Next.js App Router Example

Complete guide for integrating codalware-auth with Next.js 13+ App Router, featuring Server Components and modern patterns.

For complete documentation, visit https://authcore-liard.vercel.app/

Features Demonstrated

Server Components for layout and pages
Client Components for interactive authentication
API Routes in the app directory
Authentication with NextAuth.js
Protected routes with middleware
2FA setup and management
User profile management

Quick Start

1. Install Dependencies

2. Initialize AuthCore

This copies the Prisma schema, creates .env.example, and runs migrations.

3. Configure Environment Variables

Create .env.local:

Project Structure

app/
├── api/
│   └── auth/
│       └── [...nextauth]/
│           └── route.ts          # NextAuth API route
├── (auth)/
│   ├── login/
│   │   └── page.tsx              # Login page
│   ├── register/
│   │   └── page.tsx              # Register page
│   └── layout.tsx                # Auth pages layout
├── dashboard/
│   ├── profile/
│   │   └── page.tsx              # User profile page
│   ├── security/
│   │   └── page.tsx              # Security settings (2FA)
│   ├── layout.tsx                # Dashboard layout
│   └── page.tsx                  # Dashboard home
├── layout.tsx                    # Root layout
└── page.tsx                      # Home page
middleware.ts                      # Route protection

Implementation

NextAuth Configuration

Protected Routes Middleware

Login Page (Client Component)

Dashboard Layout (Server Component)

Profile Management Page

Security Settings Page (2FA)

Key Concepts

Server Components

Use Server Components for layouts and data fetching. Check authentication with getServerSession().

Client Components

Use Client Components (with 'use client') for interactive forms and hooks like useRouter().

Middleware

Protect routes at the edge with middleware. This runs before the page is rendered.

Navigation

Use useRouter() from next/navigation for client-side navigation.