Hello everyone, I hope you all are well. In this post, we are going to discuss, how you can set up a user Login authentication using Auth0 in Next.js projects. Here is a little demo of the project, that we are going to build: Demo Video Link Demo Video Link So, let's jump right into it. We will be doing this in 5 easy steps: Note: I have used Tailwind CSS for CSS and created a cutom Navbar for this project , If you wish to get the code for the same , you can visit my Github project link and copy from there. Note: I have used Tailwind CSS for CSS and created a cutom Navbar for this project , If you wish to get the code for the same , you can visit my Github project link and copy from there. Github project link STEP-1 Create your Auth0 Account Create an Auth0 Account. The visit your dashboard and under Applications click on Application, then click on Create Application and provide a name to the application and choose the "Regular web Application" category. Regular web Application Now you will see 5 tabs, one of them is Settings, click on setting and then scroll down a little bit and you will find "Application URIs". Inside that, you have to fill the ALLOWED_CALLBACK_URL and the ALLOWED_LOGOUT_URL like this. After this scroll down to the end and then click on save changes. STEP-2  Setup Next.js App and download the Auth0 package Create a Nextjs App using the create-next-app app-name. For this tutorial I have created the Next.js app with TailwindCSS, just to style the application a little bit, you don't need to do that. In case you want to set up nextjs-app with tailwindCSS, just use this one command it will do the rest. npx create-next-app -e with-tailwindcss my-project
cd my-project npx create-next-app -e with-tailwindcss my-project
cd my-project And now cd into your folder and install the @auth0/nextjs-auth0 package. @auth0/nextjs-auth0 npm install @auth0/nextjs/auth0 npm install @auth0/nextjs/auth0 Step-3 Create .env.local file to store the credentials. Create a .env.local  file in the root directory of your project and paste this in your .env.local file and change the values with your Client_ID, Client_Secret, and ISSUER_BASE_URL, which you can find in your Auth0 dashboard. .env.local .env.local AUTH0_SECRET='LONG_RANDOM_VALUE_32_CHARACTERS_LONG'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth.com'
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET' AUTH0_SECRET='LONG_RANDOM_VALUE_32_CHARACTERS_LONG'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth.com'
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET' The base URL will remain the same and the rest three you can find in your Auth0 dashboard. One more thing in the ISSUER_BASE_URL make sure that https:// is present in the URL do not remove it. https:// And to generate the 32 characters string you can paste this code in your terminal and it will generate a 32 characters long random string. node -e "console.log(crypto.randomBytes(32).toString('hex'))"_ node -e "console.log(crypto.randomBytes(32).toString('hex'))"_ Step-4 Create API routes Now we have to create an API route for the login, logout, callback. In Next.js it is very simple to do. Just navigate to the /pages/api folder and inside that create a folder name auth and inside that create a file name [...auth0].js  inside a square bracket like this: So we can create any route like this api/auth/login, api/auth/logout, api/auth/callback like this. api/auth/login api/auth/logout api/auth/callback The file name in the square bracket will accept any route, it is called catch-all routes. Then navigate inside the [...auth0].js and paste these two line of code and save it. import {handleAuth} from "@auth0/nextjs-auth0";

export default handleAuth(); import {handleAuth} from "@auth0/nextjs-auth0";

export default handleAuth(); Make sure you have installed the package "@auth0/nextjs-auth0" . Step-5 So the last step is here. Navigate to /pages/_app.js and inside that wrap the  inside a  Component like this and make sure to import it also. So these were the 5 steps to make authentication work in a Next.js Application. If you open your terminal and cd to your project and type "npm run dev", you will see the application is running on port 3000. Now change the URL and visit http://localhost:3000/api/auth/login. http://localhost:3000/api/auth/login You will see the Auth0 Login page and you will be able to use it and sign in to it. But, the important question arises, how to use it, and how do we know we are authenticated or not? How to use We can use it for the following things: To show some pages in our website which can only be seen if the user is authenticated.


If a user is not logged In, we can show a Sign In button, and if the user is Signed In we can show him a Logout button. To show some pages in our website which can only be seen if the user is authenticated. To show some pages in our website which can only be seen if the user is authenticated. If a user is not logged In, we can show a Sign In button, and if the user is Signed In we can show him a Logout button. If a user is not logged In, we can show a Sign In button, and if the user is Signed In we can show him a Logout button. So to use this we need to use a Custom Hook provided by the auth0 package, which is useUser hook. useUser Navigate to pages/index.js and  write the following code: pages/index.js import {useUser} from "@auth0/nextjs-auth0";

  // you can use the error and loading state to show an error message or a loading spinner while loading.

Inside the Home function just above return, statement write this 

const {user ,error , isLoading} = useUser();

if (isLoading) {
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        ...loading{" "}
      </div>
    );
  }

  if(error){
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        {error.message}
      </div>
    )
  } import {useUser} from "@auth0/nextjs-auth0";

  // you can use the error and loading state to show an error message or a loading spinner while loading.

Inside the Home function just above return, statement write this 

const {user ,error , isLoading} = useUser();

if (isLoading) {
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        ...loading{" "}
      </div>
    );
  }

  if(error){
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        {error.message}
      </div>
    )
  } and then below the H1 tag paste this code: H1 <div className="max-w-[500px] border-4 border-indigo-400 rounded-lg p-6 mx-auto text-3xl mt-16 font-bold text-indigo-700 text-center">
       {user && (
         <p className="mb-6">Welcome 
         <span className="text-amber-600">{user.name}</span></p>
         )}
        {!user && (
          <p>You are Not signed In, Please Sign In to view the Secret Pages.</p>
          )}
  </div> <div className="max-w-[500px] border-4 border-indigo-400 rounded-lg p-6 mx-auto text-3xl mt-16 font-bold text-indigo-700 text-center">
       {user && (
         <p className="mb-6">Welcome 
         <span className="text-amber-600">{user.name}</span></p>
         )}
        {!user && (
          <p>You are Not signed In, Please Sign In to view the Secret Pages.</p>
          )}
  </div> You can do the same thing as above to show the Sign In button only if the user is not logged In and the Logout button only if the user is already logged In. ign In Logout Now suppose you have a members-only page in your application and you want only authenticated users can visit that page. This can be easily done using the withPageAuthRequired Hook provided with nextjs-auth0 SDK. withPageAuthRequired Create a members-only.js file inside the pages directory and paste this code inside the file givenn below. pages import {withPageAuthRequired } from "@auth0/nextjs-auth0";

const membersOnly = () => {
    return (
        <div>
        <h1 className="text-5xl font-semibold mt-10 text-center text-indigo-600">This page is for Members Only.</h1>   
        </div>
    )
}

export default membersOnly;

export const getServerSideProps = withPageAuthRequired(); import {withPageAuthRequired } from "@auth0/nextjs-auth0";

const membersOnly = () => {
    return (
        <div>
        <h1 className="text-5xl font-semibold mt-10 text-center text-indigo-600">This page is for Members Only.</h1>   
        </div>
    )
}

export default membersOnly;

export const getServerSideProps = withPageAuthRequired(); So by doing this only authenticated users can visit the page and those who are not authenticated and try to visit the page will be shown a 404 page or may be redirected to the login page automatically. 404 page Conclusion So that was all about Nextjs Authentication using Auth0. I hope you like this and enjoyed building this project. If you were stuck somewhere and not able to find the solution you can check out my completed repository here. Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there. Some Useful Link: Next.js and Tailwind Installation Docs
Auth0
Github link for project Next.js and Tailwind Installation Docs Next.js and Tailwind Installation Docs Auth0 Auth0 Github link for project Github link for project Connect with me: Twitter Link
LinkedIn link
Facebook Link
Github Link Twitter Link Twitter Link LinkedIn link LinkedIn link Facebook Link Facebook Link Github Link Github Link Also Published Here Here

Facebook

Twitter

How to Build a Github User Finder App With Next.js & Tailwind CSS

12 Best Vscode Extensions to Boost Your Productivity in 2022

Portfolio

Visit Nextjs Dev

Book a Call

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Productivity

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Too Long; Didn't Read

Nextjs User Login Authentication in 5 Simple Steps Using Auth0

Nextjs User Login Authentication in 5 Simple Steps Using Auth0

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

12 Best Vscode Extensions to Boost Your Productivity in 2022

Are Social Logins More Secure?

Authentication as a Service, an honest review of Auth0

Authentication: Create a Simple Rick and Morty Wiki Page

Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

Authentication Using the Auth0 to a React Application

12 Best Vscode Extensions to Boost Your Productivity in 2022

Are Social Logins More Secure?

Authentication as a Service, an honest review of Auth0

Authentication: Create a Simple Rick and Morty Wiki Page

Authentication in Web Apps: Connecting Auth0, ASP.NET Core and Nuxt.js

Authentication Using the Auth0 to a React Application

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps