Authentication

The SaaS Starter Kit includes complete authentication UI flows — login, signup, one-time password (OTP) verification, forgot password, reset password, and social login. These are pre-built recipe components ready to connect to your backend.

Auth Pages Overview

Page	Route	Description
Login	/recipes/authentication/login	Email/password login with social providers
Signup	/recipes/authentication/signup	Registration form
OTP	/recipes/authentication/otp	One-time password verification
Forgot Password	/recipes/authentication/forgot-password	Password recovery email request
Reset Password	/recipes/authentication/reset-password	Set new password form

Login Form

The login form includes:

• Email and password fields with validation
• "Remember me" checkbox
• "Forgot password?" link
• Social login buttons (Google, Microsoft, Apple)
• Form validation with React Hook Form + Zod

import { LoginForm } from "@/components/ui/recipes/authentication/login-form";

export default function LoginPage() {
    return (
        <div className="flex min-h-screen items-center justify-center">
            <LoginForm />
        </div>
    );
}

Signup Form

Includes:

• Name, email, and password fields
• Password strength indicator
• Terms of service checkbox
• Social signup options
• Form validation with Zod schema

import { SignupForm } from "@/components/ui/recipes/authentication/signup-form";

export default function SignupPage() {
    return (
        <div className="flex min-h-screen items-center justify-center">
            <SignupForm />
        </div>
    );
}

OTP Verification

The OTP page uses the input-otp library for a smooth code entry experience:

• 6-digit OTP input with auto-advance
• Resend code timer
• Paste support
• Keyboard-friendly navigation

Forgot / Reset Password

Two-step flow:

1. Forgot Password — user enters email, receives a reset link
2. Reset Password — user sets a new password with confirmation field

Both pages include form validation and success/error states.

Social Login

The login and signup forms include buttons for:

• Google — OAuth 2.0
• Microsoft — Microsoft Account
• Apple — Sign in with Apple

Note: Social login buttons are UI-only. You need to wire them to your OAuth provider (NextAuth.js, Clerk, Auth0, etc.).

Connecting to Your Backend

Each auth component includes // TODO comments marking where to add your API integration:

// Example: Inside the login form submit handler
const onSubmit = async (data: LoginFormData) => {
    // TODO: Replace with your authentication API call
    // Example with NextAuth.js:
    // const result = await signIn("credentials", {
    //     email: data.email,
    //     password: data.password,
    //     redirect: false,
    // });
};

Popular Auth Libraries

Library	Best For
NextAuth.js	Full-featured, multiple providers
Clerk	Drop-in auth with UI components
Auth0	Enterprise SSO and compliance
Supabase Auth	Works with Supabase database

Settings Pages

Once authenticated, users can manage their account through the settings recipes:

• Account — profile info, avatar, display name
• Billing — subscription plan, payment method, invoices
• Team Permissions — invite members, assign roles
• Notifications — email and in-app notification preferences
• Privacy & Security — two-factor auth, session management
• AI Integrations — API keys and model configuration