Auth Surface

Product Surface

Authentication pages — login, signup, password reset, and verification.

The gateway to your application

Clean, focused authentication pages that build trust. Sign in, registration, password recovery — all the flows users expect, styled to match your brand.

What You Get

A complete authentication UI, ready to connect:

Sign in & register

Email + password forms with validation. Optional social login buttons.

Password recovery

Forgot password and reset flows. Email-based verification.

Multiple auth modes

Demo, password, Supabase, or custom API. Switch with env vars.

Mobile-friendly

Centered card layout that works on any screen size.

When to Use It

Use this surface when you need user authentication:

  • User accounts — Sign in, sign up, profile management
  • Protected content — Gated features, premium access
  • Team applications — Multi-user systems, collaboration
  • SaaS products — Subscription management, billing
  • Internal tools — Admin access, employee portals

Flexible authentication modes

Start with demo mode for development, switch to Supabase for production, or connect your own auth API. One surface, multiple backends.

Learn More

AuthenticationFull auth setup guideApp SurfaceProtected pagesSupabaseBackend integration

For AI Agents

Key rules:

  • Auth pages go in app/(auth)/ — URLs like /login, /signup
  • Use AuthShell for layout — centered card with no navigation
  • Auth logic lives in lib/supabase/ — don't duplicate auth code
  • Redirects are handled by middleware — check middleware.ts
  • Read app/(auth)/AUTH.md for auth configuration