← [Back to main documentation](readme.md) # Quick Start: Examples This section contains small, self-contained examples that demonstrate common SDK use cases and can be used as a starting point for your own implementation. Table of Contents - [Quick Start: Examples](#quick-start-examples) - [Quick Start: Authentication Flow](#quick-start-authentication-flow) - [Quick Start: Registration Flow](#quick-start-registration-flow) - [Quick Start: Newsletter implementation](#quick-start-newsletter-implementation) - [Quick Start: Ticket implementation](#quick-start-ticket-implementation) - [Quick Start: Profile Icon](#quick-start-profile-icon) - [Simple Profile Icon with Logout:](#simple-profile-icon-with-logout) - [Profile Icon with Hover Dropdown Menu:](#profile-icon-with-hover-dropdown-menu) - [Quick Start: Modal login](#quick-start-modal-login) - [Quick Start: Account Deletion](#quick-start-account-deletion) - [Quick Start: Profile QR Code](#quick-start-profile-qr-code) ### Quick Start: Authentication Flow This example demonstrates a complete authentication flow. The SDK automatically shows the correct interface based on the user's authentication status. > **Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) utility classes for styling. You can replace these with your own CSS classes or include Tailwind in your project. ```html Unidy Auth Demo

OR

Unidy Logo
← Back Send Magic Code Instead ← Back

Enter the code sent to your email

 ← Start over

Enter your new password

Welcome!

Save Changes Sign Out ``` ### Quick Start: Registration Flow This example demonstrates a complete multi-step registration flow with email verification, profile collection, password, passkey, and newsletter preferences. > **Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) utility classes for styling. You can replace these with your own CSS classes or include Tailwind in your project. ```html Unidy Registration Demo

Create a new account

Resume existing registration

Check your email for a link to continue.

Resend link Continue

Verify your email

Enter the 4-digit code sent to your email address.

Resend code

Your profile

Back Continue

Create a password

Back Continue

Add a passkey

Sign in securely without a password using your fingerprint, face, or device PIN.

Register Passkey
Back Continue

Newsletter preferences

Sports News

Back Complete Registration
``` **Notes:** - Steps with `requires-email-verification` are automatically skipped if the email is already verified (e.g., after resuming a flow) - Steps with `requires-password` are automatically skipped for social login or passwordless flows - The passkey step is always shown but optional — users can click "Continue" to skip it - `` only appears when a registration flow already exists for the entered email - `` automatically sends the verification code when the step becomes active and auto-submits when all digits are entered - `` is used for sub-preferences within a newsletter (e.g., sport categories under a "Sports News" newsletter) ### Quick Start: Newsletter implementation This example demonstrates how to implement a newsletter subscription form using the Unidy SDK. > **Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) utility classes for styling. ```html Newsletter Signup

Subscribe to our Newsletter

Subscribe
``` #### Newsletter with Additional Fields You can collect additional profile fields during newsletter signup using `u-raw-field`. These fields are submitted along with the email and newsletter selection. ```html

Additional fields

Subscribe
``` **Notes:** - `u-raw-field` creates a simple input field bound to a profile field name - The `field` attribute specifies which profile field to update (e.g., `first_name`, `last_name`, `phone_number`) - Use `u-error-message` with the matching `for` attribute to display validation errors - All fields are submitted together when the user clicks the submit button ### Quick Start: Ticket implementation This example demonstrates how to list tickets and subscriptions using the Unidy SDK. ```html Unidy Ticketable Demo
``` **Template Features:** - `` - Display values with support for nested paths (`metadata.category`), date formatting, and default values - `` - Conditionally render content based on property truthiness (e.g., show VIP badge only if `metadata.vip` exists) - `unidy-attr` - Dynamically set HTML attributes from ticket data (e.g., `unidy-attr-href="{{button_cta_url}}"`) - `` - Export tickets to PDF or Apple Wallet (pkpass) ### Quick Start: Profile Icon These examples demonstrate a profile icon that displays the user's avatar and allows the user to navigate to their profile or log out. > **Note:** These examples use [Tailwind CSS](https://tailwindcss.com/) utility classes for styling. The examples assume you have a `` element elsewhere on the page. #### Simple Profile Icon with Logout: ```html ``` #### Profile Icon with Hover Dropdown Menu: ```html ``` ### Quick Start: Modal login This example demonstrates how to implement a modal login form using the Unidy SDK. > **Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) utility classes for styling. ```html Unidy Modal login Demo

Profile

Manage your key and login data here at a central place.

 ``` ### Quick Start: Account Deletion This example demonstrates how to allow users to delete their own account by redirecting them to the Unidy profile page where the account deletion option is available. The `u-jump-to-unidy` component handles authentication automatically - when clicked, it generates a one-time login token and redirects the user to the specified Unidy page. ```html Account Deletion Demo

Please sign in to manage your account.

 ``` **Notes:** - The `path="/profile"` directs users to the Unidy profile page where the "Delete Account" option is located - The button shows a loading state while generating the authentication token - You can also open the page in a new tab by adding the `newtab` attribute: `` - For pages that don't require authentication (like terms of service), use the `no-auth` attribute ### Quick Start: Profile QR Code This example demonstrates how to generate a QR code containing user profile data. The QR code encodes a greeting message with the user's name. > **Note:** This example uses [Tailwind CSS](https://tailwindcss.com/) utility classes for styling and the [qrcode](https://www.npmjs.com/package/qrcode) library loaded from esm.sh CDN. ```html Profile QR Code Demo

Profile QR

Demonstrates generating a QR code externally.

Please sign in to view your profile QR code.

Profile QR

Demonstrates generating a QR code externally.
``` **Notes:** - The QR code encodes a simple greeting with the user's first and last name - The `qrcode` library is loaded from esm.sh CDN - The QR code is generated reactively: immediately if the user is already authenticated on page load, and again whenever auth state changes (e.g. after session restore completes or after sign-in) - You can adjust QR code options like `width`, `margin`, and `errorCorrectionLevel` as needed > **Page-load timing:** `` restores sessions asynchronously. Reading `authState.authenticated` once at `DOMContentLoaded` (or using `auth.isAuthenticated()`) races against the restore network call and will often return `false` for signed-in users. Use `onAuthChange("authenticated", cb)` so your UI reacts when the restore settles — or `await auth.ready` for a one-shot read after everything settles.