NextAuth.js Authentication Series — Part 2 ~ Installing & Configuring NextAuth.js in Next.js (App Router)

In the previous article, we created our Next.js project and prepared the development environment. In this part, we'll install NextAuth.js (Auth.js) and configure the basic authentication setup that will serve as the foundation for the rest of this series.

By the end of this article, you'll have a working authentication endpoint ready for adding login providers in the upcoming posts.

Installing NextAuth.js

Install the latest version of NextAuth.js.

npm install next-auth

That's the only package we need for now. Additional dependencies like database adapters or password hashing libraries will be installed later when we integrate a database.

Creating the Authentication Route

With the App Router, NextAuth is configured using a Route Handler.

Create the following file:

app/api/auth/[...nextauth]/route.ts

Add the following code:

import NextAuth from "next-auth";

const handler = NextAuth({
  providers: [],
});

export { handler as GET, handler as POST };

At this stage, we haven't added any authentication providers yet. We're simply preparing the API route that NextAuth will use.

Organizing Authentication Configuration

As applications grow, keeping all authentication logic inside the route file becomes difficult to maintain.

A better approach is creating a dedicated authentication configuration.

Create a new file:

lib/auth.ts

import type { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
  providers: [],
};

Now update the route.

import NextAuth from "next-auth";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

This keeps the project cleaner and allows us to reuse authOptions throughout the application.

Environment Variables

NextAuth requires a secret key to securely sign tokens and sessions.

Create or update your .env.local file.

NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000

To generate a secure secret:

openssl rand -base64 32

Or use any secure random string generator.

Never commit your .env.local file to GitHub.

Understanding the Authentication Flow

When a user tries to sign in, the request follows this flow:

Client
   │
   ▼
NextAuth Route Handler
   │
   ▼
Authentication Provider
   │
   ▼
Session / JWT
   │
   ▼
Authenticated User

For now, our provider list is empty, so users cannot log in yet. We'll connect real authentication providers in the next articles.

Project Structure

Our project now looks like this:

app/
 ├── api/
 │    └── auth/
 │         └── [...nextauth]/
 │               └── route.ts

lib/
 └── auth.ts

.env.local

Keeping authentication logic separate from routes makes the application easier to maintain as it grows.

Common Beginner Mistakes

Here are a few issues developers often encounter:

• Forgetting to set NEXTAUTH_SECRET.

• Committing .env.local to GitHub.

• Placing the authentication route in the wrong directory.

• Forgetting to export both GET and POST.

• Mixing Pages Router examples with the App Router.

Avoiding these mistakes early will save a lot of debugging time later.

What's Next?

Now that the authentication endpoint is configured, the next article will focus on adding the first authentication provider.

We'll implement Google OAuth Login, configure Google Cloud credentials, and allow users to sign in with their Google account.

By the end of the next article, you'll have your first working login system running in your Next.js application.

Happy coding!