UI Auth Catalog

Fifteen named authentication flows — login, signup, forgot/reset, magic link, 2FA challenge & setup, locked account, social, verify email, session expired, passkey, invite accept, and SSO. Every client app needs these. See CATALOG.md for recipes.

.auth-login

Login Card

Email/password sign-in with remember me, forgot link, and create-account foot.

.auth-signup

Signup Stack

Name row, email, password, terms checkbox, and Create account CTA.

.auth-forgot

Forgot Password

Request a reset link by email — single field, back to sign in.

Forgot password?

Enter your account email and we’ll send a reset link.

Back to sign in
.auth-reset

Reset Password

New password + confirm, live strength meter and rule checklist.

Set a new password

Choose a strong password you haven’t used on Northstar before.

  • 8+ characters
  • One uppercase letter
  • One number
  • One symbol
.auth-magic

Magic Link

Passwordless sign-in — email only, then check inbox.

Sign in with email

We’ll email you a magic link — no password needed.

or
Use password instead
.auth-check-email

Check Your Email

Post-submit state for magic link / reset — resend with cooldown.

Check your email

We sent a sign-in link to

Click the link in the message to continue. It expires in 15 minutes.

Didn’t get it?

Use a different email

.auth-2fa

2FA Challenge

Six-digit authenticator code after password — OTP boxes with paste support.

Enter verification code

Open your authenticator app and enter the 6-digit code.

Code for avery@harbor.studio

Use a backup code · Sign in as someone else

.auth-2fa-setup

2FA Setup

QR + secret, verify OTP, and show backup codes once.

Set up authenticator

Scan this QR with Authy, 1Password, or Google Authenticator.

Or enter this key manually:

NSTR-AK7M-9Q2P-LL4X

Then enter the 6-digit code to confirm.

Backup codes

Save these — each works once if you lose your device.

  • 4829-1937
  • 6104-8821
  • 9055-3340
  • 1172-6608
.auth-locked

Locked Account

Too many failed attempts — cooldown timer and recovery options.

Account temporarily locked

Too many failed sign-in attempts for avery@harbor.studio.

Try again in 14:07
Reset password Contact support
.auth-social

Social Auth

Provider buttons first, then email/password divider fallback.

Continue to Northstar

Sign in with a provider or your email.

or email
.auth-verify

Verify Email

Gate after signup — confirm address before entering the app.

Pending confirmation

Verify your email

We sent a confirmation link to avery@harbor.studio. Confirm to unlock bookings and invites.

Change email · Sign out

.auth-session

Session Expired

Soft re-auth — pinned user chip, password only, stay signed in.

Your session expired for security. Enter your password to continue.
Avery Kim avery@harbor.studio
Switch account
.auth-passkey

Passkey Login

Biometric / passkey primary CTA with password fallback.

Sign in with a passkey

Use Face ID, Touch ID, or your device unlock — faster and phishing-resistant.

Or use password · email a magic link

.auth-invite

Accept Invite

Join a workspace from an invite link — org chip + create password.

Harbor Studio Invited by Maya Chen · Guide role

Join Harbor Studio

Finish your account to accept the invite sent to avery@harbor.studio.

.auth-sso

SSO / Enterprise

Work-email → identity provider, split marketing panel for enterprise login.

Sign in with SSO

Use your company email to continue to your identity provider.

Sign in with password