AUTH STARTER · CUSTOMIZING THE UI
Customizing the UI
Where the auth card lives, how the method picker animates, and the gotchas of swapping the design.
All auth UI is in src/components/auth/. The entry point is auth-card.tsx, which renders the tabbed Sign In / Sign Up surface with Framer Motion animations. The sign-in flow uses a method picker pattern: social providers on top, a list of methods below, and selected method slides in.
The components, mapped
- auth-card.tsx — tabbed surface (sign-in / sign-up).
- auth-background.tsx — dot grid SVG, swap or remove.
- sign-in-form.tsx — the method picker + selected method.
- sign-up-form.tsx — email/password + social providers.
- magic-link-form.tsx, email-otp-form.tsx, phone-sign-in-form.tsx, two-factor-verify-form.tsx, forgot/reset-password-form.tsx — individual flows.
- passkey-manage.tsx, two-factor-setup.tsx, phone-link.tsx — dashboard components.
- captcha.tsx — invisible Turnstile widget (don't remove).
- social-icons.tsx — Google / GitHub SVGs.
Shadcn-based primitives
All inputs, buttons, dialogs are shadcn/ui in the radix-luma style. Restyle by editing src/components/ui/* — Tailwind classes, easy to swap.
Pages are Server Components
src/app/(auth)/sign-in/page.tsx is a Server Component (calls requireGuest). The interactive form is the only "use client" piece. Keep that split — it's how you get fast first paint without losing interactivity.
If you remove a method from sign-in-form, also remove the toggle
The method picker reads from authConfig.plugins to decide which buttons to render. If you hand-remove a button, the toggle still says enabled and other code paths (server registration, client plugin) still load — wasting bundle size and CPU. Flip the toggle to false instead.
Don't remove the captcha wrapper
Even if you turn captcha off in dev, leave <Captcha /> + captchaHeaders in the forms. The component renders nothing when disabled. The day you turn captcha on for prod, every form already does the right thing.