# Authentication

> Sign-in and sign-up screens: password and magic-link cards, SSO discovery, passkeys, two-factor codes, phone sign-in, account choosers and password recovery.

- [Phone Sign-in](https://www.assembli.design/components/phone-sign-in.md): Sign in with a phone number and a texted code. A searchable country list (names, ISO codes or +44; arrow keys, Enter, Escape) sits on the field, and the number formats as you type in that country's style, drops a trunk zero and accepts pasted international numbers. The code step auto-submits, counts down to a resend and then offers a call instead.
- [Sign-in Dialog](https://www.assembli.design/components/sign-in-dialog.md): Sign-in in a modal: a centred mark and title over full-width Google, GitHub and Apple buttons, then an email path that sends a magic link and turns the dialog into a Check your inbox confirmation without closing. It eases to each new height, keyboard opens land on the first provider, a footer offers sign-up, and it starts fresh each time it opens.
- [Magic Link Sign-in](https://www.assembli.design/components/magic-link-sign-in.md): Passwordless email sign-in. One email field with domain completion, then the card eases into a confirmation: a letter rises out of an envelope, a button opens the right webmail for the address (Gmail, Outlook, iCloud, Yahoo, Proton), a resend link counts down, and Enter a code instead reveals a six-digit code for links opened on another device.
- [Account Chooser](https://www.assembli.design/components/account-chooser.md): A Choose an account screen for apps that remember who signed in on this device. Rows show an avatar, name, email, session status and a Last used tag. Signed-in accounts continue in place with a spinner; signed-out ones slide to a password step that greets you by name. Manage mode swaps chevrons for remove buttons and rows fold away as you clear them.
- [SSO Sign-in](https://www.assembli.design/components/sso-sign-in.md): Identifier-first sign-in for teams. Type a work email and the domain is checked with a quiet spinner: companies on SSO get a card naming the organisation and its identity provider and a Continue with Okta button, everyone else gets a password field that eases in. Results are cached per domain, and a workspace-URL route sits in the footer.
- [Sign-up Card](https://www.assembli.design/components/signup-card.md): A complete sign-up: social buttons, first and last name, a work email that completes domains and catches typos, and a password whose four requirements tick off as you type. Terms are required, updates optional. Submit validates and focuses the first problem, then the card eases to a six-digit email code with a resend countdown and a way back, and ends on a welcome state.
- [Two-factor Challenge](https://www.assembli.design/components/two-factor-challenge.md): The second step after a password, with four methods. An authenticator code submits itself on the last digit, a text is sent on request with a resend countdown, a security key waits for a touch and lets you retry, and a backup code formats as XXXX-XXXX. Try another way lists the other methods, the card eases between them, and a trust-this-device checkbox rides along.
- [Sign In / Sign Up Card](https://www.assembli.design/components/auth-card.md): One card for signing in and creating an account. A sliding tab switches sides, the card eases to its new height and what you typed comes with you. Social buttons sit above the email form; sign-in has a reveal toggle, Forgot password? and Keep me signed in, sign-up adds a name and a live strength meter. Submit validates, focuses the first problem and ends on a welcome state.
- [Aurora Glass Login](https://www.assembli.design/components/login-aurora-glass.md): Frosted-glass sign-in card floating over slow drifting aurora blobs, with a passkey primary action, social providers and translucent inputs. Always dark.
- [Editorial Login](https://www.assembli.design/components/login-editorial.md): Magazine-style split sign-in with a big serif headline, numbered underline-only fields whose rules draw in on focus, and a button that fills with ink on hover.
- [Email-first Login](https://www.assembli.design/components/login-email-first.md): Minimal two-step sign-in with floating labels: enter your email, it collapses into an editable chip with your initial, and the password field slides in with a personalised greeting.
- [Mascot Login](https://www.assembli.design/components/login-mascot.md): Playful sign-in where a blob mascot's pupils follow your typing, its eyes cover when you enter a password, and it smiles, droops or hops on success and failure. Clay-style chunky buttons.
- [Neobrutalist Sign-up](https://www.assembli.design/components/signup-neobrutalist.md): Loud sign-up form with thick black borders, hard offset shadows that press flat on click, a blocky password-strength meter and a sticker badge.
- [Passkey Login](https://www.assembli.design/components/login-passkey.md): Passkey-first sign-in built around one large fingerprint button: idle ripples, a scanning sweep, a success burst and a shake on failure, with an inline password fallback.
- [Reset Password Flow](https://www.assembli.design/components/reset-password.md): Four-stage password recovery in one card: request, email-sent with a resend countdown, new password with live rules and match check, and a confirmation. The icon tile and progress rail animate between stages.
- [Split-screen Sign-up](https://www.assembli.design/components/signup-split-brand.md): Two-panel sign-up with a brand side (testimonial, stats, drifting gradient) and a form with social buttons and a live password checklist that ticks off as you type.
- [Spotlight Login](https://www.assembli.design/components/login-spotlight.md): Near-black sign-in card whose hairline border and surface light up under the cursor like a spotlight, with SSO, gradient-text heading and a ⌘↵ submit shortcut. Always dark.
- [Terminal Login](https://www.assembli.design/components/login-terminal.md): Developer-tool sign-in styled as a shell session: inline prompts for email and password, a streamed status log on submit, and a red failure line instead of a toast. Always dark.
- [Sign-in Card](https://www.assembli.design/components/signin-card.md): Sign-in card that switches between password and magic-link modes with a sliding segmented control, show/hide password, async errors and an inbox confirmation state.

Back to [all components](https://www.assembli.design/components.md).