Adding User Authentication in NextJS using Auth0 - GeeksforGeeks

27 Oct, 2021
In this article, we will learn How we can add user authentication in our NextJS project using Auth0. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
Approach: To add the user authentication using auth0 in our project first 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.
Create NextJS Application:
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
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
Javascript
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 
Javascript
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 
Javascript
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:
Next.js
NodeJS-Questions
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set background images in ReactJS ?
How to create a table in ReactJS ?
ReactJS useNavigate() Hook
How to navigate on path by button click in react router ?
React-Router Hooks
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?