See Demo
General
Configuration

Authentication Configuration

Configure authentication settings, redirects, and CORS.

The authentication configuration file (config/auth.config.ts) contains settings for authentication, session management, redirects, and CORS.

Configuration File

config/auth.config.ts
import { env } from '@/lib/env';
import { getBaseUrl } from '@/lib/utils';

const origins = Array.from(
  new Set(
    [
      getBaseUrl(),
      env.NEXT_PUBLIC_SITE_URL,
      env.NEXT_PUBLIC_VERCEL_URL
        ? `https://${env.NEXT_PUBLIC_VERCEL_URL}`
        : undefined,
      env.NEXT_PUBLIC_VERCEL_BRANCH_URL
        ? `https://${env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
        : undefined,
      env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
        ? `https://${env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
        : undefined,
      env.NEXT_PUBLIC_NODE_ENV === 'development'
        ? 'http://localhost:3000'
        : undefined
    ].filter(Boolean) as string[]
  )
);

export const authConfig = {
  redirectAfterSignIn: '/dashboard',
  redirectAfterLogout: '/',
  sessionCookieMaxAge: 60 * 60 * 24 * 30,
  verificationExpiresIn: 60 * 60 * 24 * 14,
  minimumPasswordLength: 8,
  trustedOrigins: origins,
  // Allow new user registrations
  // When false, only users with invitations can sign up (invitation-only mode)
  enableSignup: true,
  enableSocialLogin: true,
  cors: {
    allowedOrigins: [...origins, /^https:\/\/.*\.vercel\.app$/],
    allowedMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Authorization',
      'Content-Type',
      'Accept',
      'Origin',
      'X-Requested-With',
      'Access-Control-Request-Method',
      'Access-Control-Request-Headers',
      'X-CSRF-Token',
      'Accept-Version',
      'Content-Length',
      'Content-MD5',
      'Date',
      'X-Api-Version',
      'cf-connecting-ip',
      'cf-ipcountry',
      'cf-ray',
      'cf-visitor',
      'x-vercel-id',
      'x-vercel-deployment-url',
      'x-vercel-proxied-for',
      'X-Forwarded-For',
      'X-Forwarded-Host',
      'X-Forwarded-Proto',
      'X-Real-IP',
      'Connection',
      'Host',
      'User-Agent',
      'Referer'
    ],
    maxAge: 86_400
  }
} satisfies AuthConfig;

Configuration Options

Redirects

  • redirectAfterSignIn: Where users are redirected after successful sign in (default: "/dashboard")
  • redirectAfterLogout: Where users are redirected after logout (default: "/")

Session Management

  • sessionCookieMaxAge: Maximum age of the session cookie in seconds (default: 30 days)
  • verificationExpiresIn: How long email verification links are valid in seconds (default: 14 days)

Password Requirements

  • minimumPasswordLength: Minimum password length required (default: 8)

Trusted Origins

  • trustedOrigins: Array of trusted origins for authentication requests
    • Automatically includes base URL, Vercel URLs, and localhost in development
    • Used for CSRF protection and secure authentication

Signup and Login

  • enableSignup: Whether new users can register (default: true)
    • When false, only users with invitations can sign up (invitation-only mode)
  • enableSocialLogin: Whether social login (OAuth) is enabled (default: true)

CORS Configuration

The cors object configures Cross-Origin Resource Sharing:

  • allowedOrigins: Array of allowed origins (includes trusted origins and Vercel preview URLs)
  • allowedMethods: HTTP methods allowed in CORS requests
  • allowedHeaders: HTTP headers allowed in CORS requests
  • maxAge: Maximum age for preflight requests in seconds (default: 24 hours)

Use Cases

Invitation-Only Signup

To restrict signups to invitation-only:

config/auth.config.ts
export const authConfig = {
  // ... other config
  enableSignup: false // Only invited users can sign up
};

Disable Social Login

To disable OAuth/social login:

config/auth.config.ts
export const authConfig = {
  // ... other config
  enableSocialLogin: false
};

Custom Redirects

To customize redirect paths:

config/auth.config.ts
export const authConfig = {
  // ... other config
  redirectAfterSignIn: '/dashboard',
  redirectAfterLogout: '/auth/sign-in'
};

Adjust Session Duration

To change session cookie duration:

config/auth.config.ts
export const authConfig = {
  // ... other config
  sessionCookieMaxAge: 60 * 60 * 24 * 7 // 7 days instead of 30
};

Stricter Password Requirements

To require longer passwords:

config/auth.config.ts
export const authConfig = {
  // ... other config
  minimumPasswordLength: 12 // Require 12 characters minimum
};

Type Definitions

The configuration uses TypeScript types for type safety:

config/auth.config.ts
export type CorsConfig = {
  allowedOrigins: (string | RegExp)[];
  allowedMethods: string[];
  allowedHeaders: string[];
  maxAge: number;
};

export type AuthConfig = {
  redirectAfterSignIn: string;
  redirectAfterLogout: string;
  sessionCookieMaxAge: number;
  verificationExpiresIn: number;
  minimumPasswordLength: number;
  trustedOrigins: string[];
  enableSignup: boolean;
  enableSocialLogin: boolean;
  cors: CorsConfig;
};

Using the Configuration

Import and use the configuration in your code:

lib/auth/redirects.ts
import { authConfig } from '@/config/auth.config';

export function getSignInRedirect() {
  return authConfig.redirectAfterSignIn;
}
lib/auth/validation.ts
import { authConfig } from '@/config/auth.config';

export function validatePassword(password: string) {
  if (password.length < authConfig.minimumPasswordLength) {
    throw new Error(
      `Password must be at least ${authConfig.minimumPasswordLength} characters`
    );
  }
}