Next.js Pages Router Example

Complete guide for integrating codalware-auth with Next.js Pages Router, the traditional and stable routing system.

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

Features Demonstrated

  • Pages Router architecture
  • API Routes for authentication
  • Client-side authentication with NextAuth.js
  • Protected routes with getServerSideProps
  • 2FA setup and management
  • User profile management

Quick Start

1. Install Dependencies

bash

2. Initialize AuthCore

bash

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

3. Configure Environment Variables

Create .env.local:

bash

Project Structure

pages/
├── api/
│   └── auth/
│       └── [...nextauth].ts      # NextAuth API route
├── auth/
│   ├── login.tsx                 # Login page
│   └── register.tsx              # Register page
├── dashboard/
│   ├── index.tsx                 # Dashboard home
│   ├── profile.tsx               # User profile page
│   └── security.tsx              # Security settings (2FA)
├── _app.tsx                      # App wrapper with SessionProvider
├── _document.tsx                 # Document wrapper
└── index.tsx                     # Home page

Implementation

App Configuration

typescript

NextAuth Configuration

typescript

Login Page

typescript

Protected Dashboard Page

typescript

Profile Page

typescript

Security Settings Page

typescript

Key Differences from App Router

Session Management

Uses SessionProvider in _app.tsx instead of context providers in layouts.

Route Protection

Uses getServerSideProps instead of middleware for protecting pages.

Data Fetching

Server-side props (getServerSideProps) instead of Server Components.

Navigation

Uses useRouter() from next/router instead of next/navigation.

File Structure

pages/ directory instead of app/ directory.

Learn More