Introduction to Authentication in Next.js

Introduction

Authentication is one of the most important parts of any web application. It’s the process of verifying the identity of a user and ensuring that only the right people can access certain parts of your app. For example, you don’t want anyone to access your personal dashboard or admin panel without logging in.

There are libraries and services like our there like Clerk, Auth0, or Firebase Authentication that handle authentication for you. They provide pre-built flows for signup, sign in and sign out.

However, if you want to implement your own authentication without relying on third party services, this tutorial is for you! Not only will this give you a deeper understanding of how everything works under the hood, you'll also have more control over the user data since that will be stored in your own database.

In this tutorial, we’ll use iron-session, a simple tool that simplifies session management in Next.js. While it is technically an abstraction (it handles cookies, encryption, and session persistence for you), it’s lightweight and easy to understand, making it a perfect tool for learning the core authentication flow without being overwhelmed by low-level details.

Once you’re comfortable with these concepts, you can build your own session system from scratch, or confidently use more advanced libraries and services with a solid understanding of what’s happening behind the scenes.

How Authentication Works With Sessions

At a high level, authentication works like this.

User Submits Their Credentials

This usually happens through a login form where the user types their email and password. The data is sent to the server.

Server Verifies the User

The server checks the database to see if the email exists. The process will be a little different depending on if the user is signing up or signing in.

Sign Up

For signup, we'll generate a salt. A salt is random string of characters that is added to the password before it is hashed. The salt essentially adds an extra layer of protection. The server then saves the salt and hashed password (we never store the actual password).

Sign In

The server fetches the stored salt and hashed password from the database. It then runs scrypt again using the submitted password and stored salt and compares the new hash with the stored hash. If they match then the password is correct, if not, then the sign in fails.

Create Session

After successfully signing in, a session object is created on the server. The object can contain information like the ID, email, role, or anything you need to identify the user. Iron-session encrypts and signs the session and stores it in a secure cookie on the client.

Browser Stores Session Cookie

The user’s browser automatically saves this cookie. Now whenever they make a request to your Next.js server (API routes or server-side pages), the cookie is sent automatically. Note: Limited to 4kb cookie size, but is more than enough for storing authentication data (user ID, role, expiration info). We'll be fine as long as we're not sending arrays of data or full user preferences.

Server Reads the Session

On protected pages or API routes, your server reads the session from the cookie. If the session exists and is valid, the server knows which user is making the request. If the session doesn’t exist or has expired, the server can redirect the user to login or return an unauthorized response.

Logout / Session Termination

When a user logs out, the session is destroyed on the server. The cookie is cleared from the browser, so future requests are no longer authenticated.

Password Security

Passwords are never stored in plain text. Instead, they are hashed and optionally salted before being stored in the database. Salting adds randomness so that even if two users have the same password, their stored hashes will be different. Hashing transforms the password into a long, irreversible string.

What We'll Build

By the end of this tutorial, you’ll have a complete authentication system in your Next.js app that includes:

• User signup and login with hashed passwords.
• Session management so users stay logged in.
• Role-based access control (e.g., admin vs regular users).
• Email verification and password reset flows.

This foundation will give you the tools to secure any Next.js app and expand to more advanced authentication features in the future.