auth.patterns

A reference collection of 7 production-ready authentication flows built with Next.js 15, Supabase, and Tailwind v4.

Patterns

#	Pattern	Description
01	Email & Password	Credential auth with Zod validation, Server Actions, sign up + email confirmation
02	Email OTP	Two-step flow — enter email, receive an 8-digit code
03	Two-Factor Auth	TOTP via Supabase MFA (supabase.auth.mfa.*), QR enrolment + verify
04	Magic Link	Supabase signInWithOtp with emailRedirectTo, waiting state UI
05	Passkey	WebAuthn via @simplewebauthn/browser + @simplewebauthn/server v13
06	Social OAuth	One-click sign-in with Google + GitHub via signInWithOAuth
07	Passcode PIN	Client-side 6-digit keypad demo — no backend, accepts 123456

Stack

• Next.js 15 — App Router, Server Actions, Turbopack
• Supabase — Auth, MFA, OAuth, SSR (@supabase/ssr)
• TypeScript — strict mode
• Tailwind v4 — CSS-first design tokens (@theme {} in globals.css)
• Zod — schema validation
• SimpleWebAuthn v13 — passkey / FIDO2 registration + authentication ceremony

Getting started

pnpm install
cp .env.local.example .env.local
# fill in your Supabase + WebAuthn values
pnpm dev

Environment variables

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# WebAuthn (passkey)
NEXT_PUBLIC_RP_ID=localhost
NEXT_PUBLIC_RP_NAME="Auth Patterns"
NEXT_PUBLIC_ORIGIN=http://localhost:3000

Commands

pnpm dev        # start dev server (turbopack)
pnpm build      # production build
pnpm typecheck  # tsc --noEmit
pnpm lint       # eslint

Project structure

app/
  (auth)/               ← centered card layout (auth shell)
    email-password/
    otp/
    2fa/
    magic-link/
    passkey/
    social/
    passcode/
    error/              ← auth error fallback page
  auth/callback/        ← GET handler: OAuth + magic link code exchange
  documentation/        ← technical walkthrough of all 7 patterns
  page.tsx              ← landing showcase grid
components/
  auth/auth-header.tsx
  ui/button.tsx
  ui/input.tsx
  ui/otp-input.tsx
  ui/success-toast.tsx
lib/
  supabase/server.ts    ← server client (Server Actions + Route Handlers)
  supabase/client.ts    ← browser client ("use client" components)
  schemas.ts            ← Zod schemas
  utils.ts              ← cn() helper

Notes

• Passkey — requires a passkeys table in Supabase for persistence. Schema in app/(auth)/passkey/actions.ts.
• 2FA — requires an existing authenticated session before enrolling TOTP.
• Passcode — client-only demo, no Supabase dependency.

License

MIT