How to Use NextAuth with the Next.js App Router

1.
2├── .env            <===== This is the file that contains all environmental variables
3├── .gitignore
4├── README.md
5├── eslint.config.mjs
6├── jsconfig.json
7├── next.config.mjs
8├── package-lock.json
9├── package.json
10├── postcss.config.mjs
11├── public
12├── src
13└── tailwind.config.mjs

.env

1AUTH_SECRET="<secret_key>"

Auth.js configurations

Next, we need a place to store all the configurations for Auth.js. There's no fixed way to do this, but we recommend creating an auth.js file in your project:

1src
2├── app
3│   ├── favicon.ico
4│   ├── globals.css
5│   ├── layout.jsx
6│   └── page.jsx
7├── components
8│   ├── footer.jsx
9│   └── navbar.jsx
10└── libs
11    └── auth.js     <===== Configuration file for Auth.js

You can put this auth.js anywhere you wish. For demonstration purposes, we'll put all miscellaneous documents, including this auth.js, under src/libs directory.

Copy and paste the following code into your auth.js.

libs/auth.js

1import NextAuth from "next-auth";
2
3export const { handlers, signIn, signOut, auth } = NextAuth({
4  providers: [],
5});

Take a closer look at this example, and notice that we are using the NextAuth() function from the next-auth package.

This NextAuth() accepts an object as its input argument, and the object contains all the configurations for Auth.js. We'll talk more about it later.

NextAuth() also returns several utilities that are essential for creating authentication workflows.

• handlers

This is a route handler for Auth.js, which provides an API endpoint for OAuth and email providers.

For example, imagine you have a magic link authentication system where the user provides their email address and clicks the Sign In button. An email gets sent to their inbox with a magic link. The user clicks on the link, it triggers the handler endpoint provided by Auth.js.

Behind the scenes, Auth.js validates the link, authenticates the user, and manages the session, ensuring a secure and seamless signin process.

• signIn and signOut

They are two helper functions that allows you sign users in, or sign them out. We'll discuss how to use these helper functions later.

• auth

auth is a universal method used to interact with Auth.js in your app. It is most commonly used to verify if a user is authenticated, refresh the user session, and so on.

Setting up a route handler for Auth.js

Lastly, before we start implementing the authentication system, there is one last thing we must do to finish setting up Auth.js, and that is to take the handler we discussed above, and place it inside the Next.js routing system so that it is accessible.

Create a route.js file under src/app/api/auth/[...nextauth]/:

1src
2├── app
3│   ├── api
4│   │   └── auth
5│   │       └── [...nextauth]
6│   │           └── route.js    <=====
7│   ├── favicon.ico
8│   ├── globals.css
9│   ├── layout.jsx
10│   └── page.jsx
11├── components
12│   ├── footer.jsx
13│   └── navbar.jsx
14└── libs
15    └── auth.js

And set up the route handler like this:

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

1import { handlers } from "@/libs/auth"; // Referring to the auth.ts we just created
2export const { GET, POST } = handlers;

And that's it, there's not much we need to do here. As long as the handler is accessible, Auth.js will automatically take care of everything else.