Authentication Features

Use the pre-built authentication flows to handle sign in, sign up, password reset, and MFA. The kit handles email/password, magic links, OAuth providers, and TOTP-based multi-factor authentication out of the box.

The Next.js Prisma 7 SaaS Kit provides complete authentication UI and logic built on Better Auth. Sign-in and sign-up forms handle email/password, magic links, and OAuth providers (Google enabled by default). Password reset sends secure email links automatically. MFA uses TOTP with authenticator apps like Google Authenticator or Authy. Session handling provides getSession() for React Server Components and useSession() for client components. All flows are pre-built and work immediately after configuration.

Authentication features are the user-facing flows (sign in, sign up, password reset, MFA) and the server-side utilities (getSession, requireAdmin) that verify user identity and protect routes in your Next.js App Router application.

Use this documentation when: you're customizing sign-in behavior, adding MFA, protecting routes, or debugging session issues.

Use Better Auth documentation when: you need to configure the auth backend (plugins, session duration, database adapter). See Better Auth Configuration.

If unsure: start here for UI and route protection; go to Better Auth docs for backend configuration.

Features

• Email/Password Sign In and Sign Up
• Magic Link (Passwordless) Authentication
• OAuth Social Providers (Google, GitHub, Apple, etc.)
• Password Reset via Email
• Multi-Factor Authentication (MFA/TOTP)
• Email Verification
• Session Management and Route Protection
• CAPTCHA Protection (Cloudflare Turnstile)
• Rate Limiting on Auth Endpoints

Documentation Structure

Related Documentation

Auth Routes

Quick Start: Protect a Page

Use getSession() in React Server Components to check authentication:

import { redirect } from 'next/navigation';
import { getSession } from '@kit/better-auth/context';
async function ProtectedPage() {
  const session = await getSession();
  if (!session) {
    redirect('/auth/sign-in');
  }
  return <div>Welcome, {session.user.name}</div>;
}

The function is cached per request using React's cache(). Multiple calls in the same request are efficient with no duplicate database queries.

For pages that need organization context with automatic redirects, use getAccountContext():

import { getAccountContext } from '@kit/better-auth/context';
async function DashboardPage() {
  // Redirects to sign-in if unauthenticated
  const context = await getAccountContext();
  return <div>Hello, {context.user.name}</div>;
}

See Session Handling for complete details on protecting routes.

Common Pitfalls

• Forgetting to check session in server components: Proxy protection is a first gate, not the only gate. Always verify with getSession() in components that render user-specific data.
• Using getSession() in client components: It's server-only. Use authClient.useSession() for client components.
• Not handling the loading state: useSession() returns isPending: true initially. Show a skeleton or spinner to avoid layout shift.
• Mixing up getSession and getAccountContext: Use getSession() for basic auth checks; use getAccountContext() when you need organization context with auto-redirect.
• Not testing the full auth flow: Sign up, verification email, click link, sign in, access app. Test the entire chain before shipping.
• Magic link bypasses MFA: Users signing in with magic links skip the TOTP challenge. If MFA is critical for security, consider disabling magic links.

Next: Sign In