Email and Password Authentication in Next.js (v15): From Scratch
Learn how to implement email and password authentication from scratch using the JWT session strategy.
One of the most liberating feelings as a developer is taking complete control of your authentication system. There's a lot of fear-mongering in the development world about "never rolling your own auth," but I believe understanding authentication from the ground up is essential. When you build it yourself, you gain deep insights into the security considerations and best practices that shape authentication flows.
And that's exactly what we are going to do in this course. I'll teach you how to implement email and password authentication (along with forgot password) from scratch in Next.js, without relying on external auth libraries. We'll use the JWT session strategy.
Here's everything we'll cover:
- Introduction
- Creating a Next.js Project
- Installing Shadcn UI
- Installing Essential Development Packages
- Installing Conform and Zod
- Installing Argon2, jose and uncrypto
- Installing UUID
- Installing server-only
- Setting Up Supabase
- Setting Up React Email and Resend
- Creating the Main Navigation Bar
- Creating the Icons Component
- Creating Home Page
- Creating Client Page
- Creating Server Page
- Creating Admin Page
- Creating NotFound Page
- Building Authentication Forms
- Creating Sign-In Form
- Creating Forgot Password Form
- Creating Reset Password Form
- Creating Sign-In Server Action
- Creating Users Table
- Defining Sign-In Form Validation Schema
- Checking Email Verification Status
- Verifying User Password
- Getting User ID and Role
- Creating User Session
- Creating Email Verification Token
- Creating Email Verification URL
- Hashing User Password
- Creating Email Verification Session
- Sending Verification Email
- Creating Email Verification Template
- Creating Email Verification Page
- Connecting Sign-In Server Action to Sign-In Form
- Creating Email Verification Route Handler
- Checking Email Verification Session
- Getting Email Verification Session
- Implementing Timing-Safe Token Comparison
- Assigning User Role
- Creating User
- Deleting Email Verification Session
- Creating Email Verification Error Page
- Creating Email Verification Confirmation Page
- Accessing User Session in Server Environments
- Accessing User Session in Client Components
- Implementing Sign Out
- Optimistic Auth Checks Using Middleware
- Updating User Session
- Creating Forgot Password Server Action
- Defining Forgot Password Form Validation Schema
- Creating Password Reset Token
- Creating Password Reset URL
- Creating Password Reset Session
- Sending Password Reset Email
- Creating Password Reset Email Template
- Creating Password Reset Verification Page
- Connecting Forgot Password Server Action to Forgot Password Form
- Creating Forgot Password Route Handler
- Checking Password Reset Session
- Getting Password Reset Session
- Creating Password Reset Verification Error Page
- Creating Reset Password Server Action
- Defining Reset Password Form Schema
- Updating User Password
- Deleting Password Reset Session
- Creating Reset Password Confirmation Page
- Connecting Reset Password Server Action to Reset Password Form
- Implementing Auth Rate Limit
- Setting Up Upstash Redis
- Creating Rate Limit Function
- Rate Limiting Authentication Endpoints
- Conclusion
Even if you ultimately choose to use authentication libraries in production, you'll never see them as mysterious black boxes again. You'll be able to evaluate their source code, understand their design decisions, and make informed choices about which solutions best fit your needs.
Want to deeply understand email and password authentication?