Auth
Project
A focused implementation of modern authentication in Next.js — credentials, sessions, protected routes, and role-based access, all wired together with Auth.js and Prisma.
Overview
Authentication is one of those things that looks simple until you implement it properly. This project works through every layer — from hashing to middleware to session access patterns — as a deliberate learning exercise.
Built in December 2024 to solidify understanding of the Next.js App Router authentication model. Rather than reaching for a managed auth service, everything is implemented manually: credential hashing, session management with Auth.js, type-safe database access via Prisma against a Neon serverless PostgreSQL instance, and both server-side and client-side session reading patterns demonstrated explicitly.
Type
Personal · Solo
Completed
December 2024
Auth Library
Auth.js
Database
Neon DB (serverless PostgreSQL)
Auth Flow
From form submission to protected page
Register
User submits the sign-up form. Input is validated server-side with Zod schemas before anything hits the database.
Next.js / Zod
Store
Password is hashed and the new user record is written to Neon DB via Prisma. Type-safe schema ensures data integrity.
Prisma → Neon DB
Sign In
Auth.js validates the submitted credentials against the stored hash. On success it creates a session — JWT or database-backed.
Auth.js
Session
Next.js middleware reads the session token on every request and redirects unauthenticated users away from protected routes before the page renders.
Middleware
Server Access
Protected server components call auth() directly to read the session on the server. No client round-trip needed — user data is available at render time.
Server Components
Client Access
Client components use the useSession hook to access session data reactively. Both patterns are demonstrated side-by-side in the dashboard.
useSession
Features
What it implements
Credential Authentication
Full sign-up and login flow built with Auth.js credentials provider. Passwords are hashed before storage and verified on sign-in — no plaintext ever touches the database.
Server & Client Session Patterns
The dashboard deliberately demonstrates both approaches: a server component that reads the session with auth() at render time, and a client component that subscribes to session state via useSession. Side-by-side to make the distinction concrete.
Protected Routes via Middleware
A Next.js middleware layer intercepts requests to protected paths, checks the session token, and redirects unauthenticated users to the login page before the route ever renders — keeping protection at the edge.
Role-based Admin Access
A dedicated admin page tests role-based access control. Only users with the admin role can reach it — others are redirected. The role is stored in the database and attached to the session.
User Settings
Authenticated users can update their account details from a settings page. Changes are validated, persisted to Neon DB via Prisma, and reflected in the session.
Type-safe Database Layer
Prisma ORM generates a fully typed client from the schema, catching data access errors at compile time. Neon DB provides the serverless PostgreSQL backend — no infrastructure to manage.
Tech Stack
Framework
- Next.js
- React
- TypeScript
Auth
- Auth.js
- Zod validation
Database
- Prisma ORM
- Neon DB (PostgreSQL)
Styling & Deploy
- Tailwind CSS
- Vercel