NextBento logoNextBento
Get NextBento

Documentation

Guides and references

Authentication

Auth Layouts

Centered, split, and minimal auth layout variants.

Overview

NextBento supports three auth layout variants. Switch app-wide by editing lib/config/auth-layouts.ts:

export type AuthLayoutVariant = 'centered' | 'split' | 'minimal'

/** Change this to switch auth layout app-wide. */
export const AUTH_LAYOUT_VARIANT: AuthLayoutVariant = 'split'

Layout Variants

Centered

Single column, form centered on the page. Minimal design.

Centered layout

Split

Split screen: form on one side, branded image or content on the other. Best for marketing-focused auth pages.

Split layout — form and branded panel

Minimal

Compact form with minimal chrome. Good for embedded or modal auth flows.

Minimal layout — compact centered form

Component Mapping

Each layout variant uses different form components:

LayoutLoginSignupForgot PasswordReset Password
Centeredlogin-form.tsxsignup-form.tsxforgot-password-form.tsxreset-password-form.tsx
Splitlogin-form-split.tsxsignup-form-split.tsxforgot-password-form-split.tsxreset-password-form-split.tsx
Minimallogin-form-minimal.tsxsignup-form-minimal.tsxforgot-password-form-minimal.tsxreset-password-form-minimal.tsx

Auth Pages

Auth pages live in app/(auth)/:

  • login/page.tsx, login-2/page.tsx, login-3/page.tsx — Different layout variants
  • Same pattern for signup, forgot-password, reset-password

The -2 and -3 suffixes correspond to different layout variants. The main login uses the variant from AUTH_LAYOUT_VARIANT.

Customization

To customize a layout:

  1. Edit the form component (e.g. components/auth/login-form-split.tsx)
  2. Customize auth-split-layout.tsx for split layout structure
  3. Update branding, colors, or copy in the component

Next Steps

PreviousOverviewNextAccept Invitation