Adding User Authentication in Next.js using Auth0

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. Integrating Auth0 with Next.js allows you to manage user authentication seamlessly. In this article, we will learn How we can add user authentication in our NextJS project using Auth0.

Approach

To add user authentication using auth0 in our project firstly we will install the auth0 module. After that, we will create a dynamic file with [...auth0].js name. Then we will add UserProvider on every page. After that, we will add a login and signout option on our homepage.

Steps to Implement Authentication using Auth0 in Next.js

Step 1: Create a new NextJs project using the below command:

npx create-next-app gfg

Project Structure:

It will look like this.

Step 2: Create a free account on the auth0 website and create a new application.

Step 3: Get your domain, client id, and client secret key from the setting tab in your account.

Step 4: Add the callback and logout URL. Callback user is used to redirecting the user after logging in and logout URL is used to redirect the user after logging out.

Step 5: Now we will install the auth0 module using the following command:

npm install @auth0/nextjs-auth0

The updated dependencies in the package.json are:

"dependencies": {
    "@auth0/nextjs-auth0": "^3.5.0",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
}

Step 6: Create a new .env.local file with the following code:

AUTH0_SECRET=
  "[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="YOUR_AUTH0_DOMAIN"
AUTH0_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
AUTH0_CLIENT_SECRET="YOUR_AUTH0_CLIENT_SECRET"

Step 7: Create a new folder inside the page/api directory with name auth. Inside this folder create a new dynamic route file with name [...auth0].js and add the below content inside the file.

// Filename: [...auth0].js

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

Step 8: Now we have to add auth0's UserProvider on every page. For that, we will change the content of the _app.js file with the below content.

// Filename: _app.js

import React from "react";
import { UserProvider } from "@auth0/nextjs-auth0";

export default function App({ Component, pageProps }) {
	return (
		<UserProvider>
			<Component {...pageProps} />
		</UserProvider>
	);
}

Step 9: Now we will add the login and logout button on our homepage. For that, add the below lines in the index.js file.

// Filename: index.js

import { useUser } from "@auth0/nextjs-auth0";

export default function Login() {
	const { user, error, isLoading } = useUser();

	if (user) {
		return (
			<div>
				<h2>Hey {user.name}, You are logged in</h2>
				<a href="/api/auth/logout">
					<h1>Logout</h1>
				</a>
			</div>
		);
	}
	return (
		<a href="/api/auth/login">
			<h1>Login</h1>
		</a>
	);
}

Step to run application: After that run the app with the below command:

npm run dev

Output:

Conclusion

Integrating Auth0 with Next.js provides a robust and scalable authentication solution. By setting up Auth0, configuring API routes, and utilizing Auth0 hooks, you can efficiently manage user authentication and secure your Next.js application.