Mastering Next.Js Authentication With Auth0: A Practical Guide
Published: 2023-12-12 17:56:12

by [Tarun Singh](https://blog.openreplay.com/authors/tarun-singh) 

<blockquote><em>
Authentication is a crucial aspect of web applications, ensuring that only authorized users can access specific resources or perform certain actions. This article will examine how we can add authentication to a Next.js application using Auth0, a powerful authentication and authorization platform.
</em></blockquote>

<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>

[Auth0](https://auth0.com/) is a versatile and flexible platform that provides authentication and authorization services to your applications. Whether you're building a web application, a mobile application, or any other app, auth0 can be integrated anywhere. It supports various authentication methods, including traditional email & password login, social logins, and multi-factor authentication.
The Auth0 identity platform also allows to customize login services according to different project needs and requirements.
## Setting Up Auth0 Account
Let's get started with our example by setting up an Auth0 account. To do this, visit the auth0 website and create a new free account. Start by visiting Auth0's [website](https://auth0.com/). Click on the Signup button and sign up for a new account.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image1.png)
Once logged in, navigate to the Auth0 Dashboard. Below is how your Auth0 dashboard looks like:
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image2.png)

### Creating a New Auth0 Application
In the Auth0 Dashboard, click on "Create Application". This will allow us to create a new auth0 application.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image3.png)
Now choose `Regular Web Applications` as the application type. NextJS comes under the regular web application type as it uses traditional redirects. Lastly, click "Create".
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image4.png)
### Configuring Auth0 Settings for the Application
Navigate to the "Settings" tab and note the `client ID` and `Client Secret` for later use in the project. Every application created in Auth0 is assigned an alphanumeric client ID unique for your application only and will be used for calling Auth0 APIs through the SDK.
You will also be provided with a unique domain URL, which will be used to access the Auth0 services.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image5.png)

Great! We are done with setting up an Auth0 account. It's time to integrate it into our next project.
## Integrating Auth0 with Next.js
To get started, we will first create a new Next.js project to work further in integrating Auth0 into our application. To create the next app, use the following commands:
### Setting Up a Next.js Project
Before we dive into Auth0 integration, let's set up a Next.js project.
**Step 1.** Create a new Next.js application
To create a new next.js project, make sure you have Node.js installed, and then run the following commands:
```javascript
npx create-next-app mynextjs
cd mynextjs
```
**Note:** For demonstrating this article, I will be using *Typescript* as the default language, and the project structure will be as follows:
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image6.png)
Now that we have created our next project let's integrate Auth0 into it.
**Step 2.** Installing necessary dependencies 
To integrate Auth0 in the Next.js application, we need to install the Auth0 dependency (SDK). Run the following command within your project directory to install the SDK:
```javascript
npm install @auth0/nextjs-auth0 next-auth
```
**Step 3.** Setting up Auth0 SDK in the Next.js project
Go to `/pages/` and open the file `_app.tsx` and add the following code:
```typescript
// pages/_app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { UserProvider } from "@auth0/nextjs-auth0/client";
export default function App({ Component, pageProps }: AppProps) {
 return (
  <UserProvider>
   <Component {...pageProps} />
  </UserProvider>
 );
}
```
**Step 4:** Configure Auth0 SDK
The next step is to configure and add some details like `AUTH0_SECRET`, `AUTH0_CLIENT_ID`, `AUTH0_CLIENT_SECRET`, `AUTH0_BASE_URL`, and `AUTH0_ISSUER_BASE_URL` to our local environment file.
First, create a new `.env.local` file in your root directory and add the following:
```yaml
AUTH0_SECRET=jdsbfjsdbjfbdsgfnmdsfbgfndsbfgmnbsdfgdfbggjh
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL='https://yourdomainfromauth0.us.auth0.com'
AUTH0_CLIENT_ID=add_your_client_id
AUTH0_CLIENT_SECRET=add_your_client_secret
```
Here,
* `AUTH0_SECRET`: This is a confidential piece of information your application uses to authenticate itself with Auth0 when making requests. You can create one using `openssl rand -hex 32` on the command line.
* `AUTH0_BASE_URL`: This is the base URL for your application. If you're running the project on localhost, it will be `http://localhost:3000`.
* `AUTH0_ISSUER_BASE_URL`: This is the issuer URL of the Auth0 Authorization Server. You can find it in the domain settings.
* `AUTH0_CLIENT_ID`: This is your Auth0 application's Client ID.
* `AUTH0_CLIENT_SECRET`: This is your Auth0 application's Client Secret.
 
<CTA_Middle_Security />
 
## Implementing Authentication in Next.js
After integrating Auth0 in Next.js, let's create login and logout components and handle user authentication state.
### Creating login and logout components
Let's start building our UI for the application to use the authentication. Head to `/pages/index.tsx` and add the following code:
```typescript
// pages/index.tsx
import React from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
function index() {
 const { user, error, isLoading } = useUser();
 if (isLoading) return <div>Loading...</div>;
 if (error) return <div>{error.message}</div>;
 if (user) {
  return (
   <div className="max-w-md mx-auto bg-white rounded-md overflow-hidden shadow-md p-6">
    <h2 className="text-2xl font-semibold mb-4">
     Welcome, <span className="text-blue-700">{user.name}</span>!
    </h2>
    <p className="text-gray-600 mb-4">
     You have successfully logged in using the Auth0 authentication system.
    </p>
    <a
     className="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"
     href="/api/auth/logout"
    >
     Logout
    </a>
   </div>
  );
 }
 return (
  <div className="flex flex-col gap-10 items-center p-10">
   <h1 className="text-3xl font-bold">Auth0 authentication in Next.js</h1>
   <a
    href="/api/auth/login"
    className="bg-blue-400 text-white p-4 w-20 h-14 text-center rounded-md"
   >
    Login
   </a>
  </div>
 );
}
export default index;
```
In the code above, we're creating our main interface for the application. To get the user data, we render Log in and Log out components using conditional statements.
If the user is authenticated, it will display the user details like the user `name`, a message, and a `Logout` Button. If not, the user will see the `Login` button to authenticate themselves for the next process. Lastly, for adding styling, we're using Tailwind CSS.
### Handling user authentication state
The provided `index.tsx` file already handles the user authentication state using the `useUser` hook.
## Handling Authentication Callbacks
With our implementation complete, let's add some callbacks to handle the authentication flow. But before we handle the callbacks or write any code for it, it's important to understand what exactly we are trying to do and how our authentication process flows.
### Understanding the authentication flow with Auth0 callbacks
Authentication with Auth0 involves several steps, including redirects to Auth0 for login, authentication callbacks, and handling the authentication state. Here's a brief overview:
* **Login Request**: When users initiate the login process, they are redirected to the Auth0 Universal Login Page, where they can enter their credentials.
* **Authentication Callback**: After successful authentication, Auth0 redirects the user to your application's specified callback URL (/api/auth/callback in this case). This callback URL is configured in your Auth0 dashboard.
* **Token Exchange**: The callback route in your Next.js application is responsible for exchanging the authorization code received from Auth0 for an access token and an identity token.
* **User Authentication State**: The access token is then used to authenticate the user on the server, and the user's authentication state is maintained using sessions.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image7.png)

This diagram illustrates the seamless flow of authentication when a user interacts with our Next.js application integrated with Auth0. Understanding this flow is crucial for a clearer grasp of the Auth0 authentication process.
### Implementing callback routes in Next.js
To implement the callback routes, go to the `pages/api/auth/`, create a file called `[auth0].ts`, and add the following code:
```typescript
// pages/api/auth/[auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";
export default handleAuth();
```
The above file has the `handleAuth` method from the SDK which will be responsible for all the routes used for handling the authentication callbacks.
Once you have added the above code, the SDK will automatically read and configure these values from the Node.js process environment. Now, the application is complete and is ready to run.
### Run the server
To preview the final output, start the development server by running the following command in your terminal:
```javascript
npm run dev
```
Visit http://localhost:3000 in your browser to view your Next.js app.
**Before Login**
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image8.png)

**Auth0 Authentication**
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image9.png)

**After Login**
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image10.png)

## Adding Authorization (Optional)
Let's configure Auth0 for role-based access control and restrict access to certain routes based on user roles. This step is optional, but if you are building an application with multiple members, you can implement this.
### Configuring Auth0 for role-based access control
This step involves setting up roles and permissions in your Auth0 dashboard.
**Step 1:** Navigate to the Auth0 Dashboard: https://manage.auth0.com/ and log in with your credentials.
**Step 2:** Add a New User
* Click on "User Management" in the left-hand menu.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image11.png)
* Select "Users" > "+ Create User" button
Fill in the required information for the new user, such as email and password.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image12.png)
* Finally, click the "Create" button to save the new user.
**Step 3:** Create Roles
* In the Auth0 Dashboard, go to "User Management" and click on "Roles" > "+ Create Role."
Provide a name for the role, like admin, etc., and Save it.
![-](https://blog.openreplay.com/images/nextjs-authentication-with-auth0/images/image13.png)

Following the above steps, we can create multiple users with different roles and permissions.
### Restricting access to certain routes based on user roles
To restrict access to a specific page, use the `withPageAuthRequired` function in a higher-order component from `@auth0/nextjs-auth0`.
This can be easily done by changing our `[auth0].ts` file as follows:
```typescript
// pages/api/auth/[auth0].ts
import { handleAuth, withPageAuthRequired } from "@auth0/nextjs-auth0";
export default handleAuth({
 async callback(request, response) {
  try {
   await withPageAuthRequired({ roles: ['admin'] })(request, response);
  } catch (err) {
   res.status(err.status || 500).end(err.message);
  }
 },
});
```
By adding the above code, the users with proper permissions can access specific routes without restriction, while others will be restricted.
## Conclusion
In this article, we have looked at authenticating the Next.js app using Auth0. We have seen the step-by-step implementation for auth0 services to integrate into our application and how to handle the route callbacks in the next application. By leveraging the power of the Auth0 authentication system, you have provided the user with a seamless experience.