Auth concept

Authentication is the entry point of every SaaS.

Starter Free ships a complete authentication surface: screens, states, validation, flows, and redirects — but no provider.

This separation is intentional.

You'll learn

• How auth is modeled in the starter
• What is included vs intentionally missing
• Where to plug your auth provider
• How to avoid common auth mistakes

The auth philosophy

Starter Free focuses on the UX contract, not the implementation.

You keep: - Pages - Forms - Validation - Loading states - Error surfaces - Redirect patterns

You swap: - Session provider - Token storage - API calls - Email delivery

Auth routes overview

Included routes:

• /login
• /register
• /forgot-password

AuthShell layout

<AuthShell title="..." description="..." footer={...} />

Provides consistent layout and spacing.

Login flow

Location:

app/(auth)/login/page.tsx

Redirect after login:

/dashboard

Register flow

Location:

app/(auth)/register/page.tsx

Redirect after signup:

/dashboard

Forgot password flow

Location:

app/(auth)/forgot-password/page.tsx

Never reveal if an email exists.

Wiring an auth provider

Provider-agnostic:

• Auth.js / NextAuth
• Clerk
• Supabase Auth
• Custom backend

Example:

await signIn(email, password)
router.push("/dashboard")

Route protection (future)

Protect:

/dashboard
/projects
/admin
/billing
/settings

Mental model

Auth UI is stable.
Auth implementation is replaceable.

Next steps

→ Billing concept