Authenticate Users with Auth0 in Next.js

How to Authenticate Users with Auth0 in Next Next auth + Auth0 What is Auth0? Auth0 is an easy-to-implement, adaptable authentication and authorizatio

Draft

1 November, 2021

Contributors

Avneesh Agarwal

@avneesh

How to Authenticate Users with Auth0 in Next

Next auth + Auth0

What is Auth0?

Auth0 is an easy-to-implement, adaptable authentication and authorization platform. If you want to follow along with this tutorial, you can create a free Auth0 account here.

Setup

I am going to set up a new next app with create-next-app.

Cleanup

I will delete everything after the Head starting from the main till the footer.

Install Next-Auth

Start using Next auth

We will first create a folder inside the api folder in pages called auth.

In that folder create a file called […nextauth].js

We are going to use auth0 as the provider, so we need three params. So add this snippet of code in your […nextauth].js.

Now we will finally configure Next Auth in _app.js like this -

Setting up an application in Auth0

Creating an app

•

Go to applications under the applications tab

•

Create a new application

•

Select Regular Web Applications and give a name to your app, then click on create.

Getting the credentials

In the settings tab copy the domain,client id , and the client secretand add it to your .env.local file.

We will also add the NEXTAUTH_URL in the env like this

Now if we try to sign in, we will see this error page

We need to add http://localhost:3000/api/auth/callback/auth0 as an allowed callback URL and save it.

Now we can sign in successfully!

We will create a function with getServerSidePropswhere we will get our user details via session.

We would like to have a signout button if the user is already signed in. So we will have a sign-in button if there is no user and a signout button if there is a user.

So create a ternary operator like this

And then import everything we need from next-auth/client.

Showing the user details

We are going to add this code to get the user’s email, name, and image.

The final code should be like this

As we are using the Next image, we will need to add the domain in next.config.js

We are using google sign in, so we will add lh3.googleusercontent.com as the domain, if you don’t know the origin of the image you can use the normal img tag instead.

Deployment

I will create a new GitHub repository and push the code there. If you don’t about git and GitHub. Check my Git and Github Crash Course.

After that go to Vercel

•

Click on create a new project

•

Import the repository that you created

•

Click deploy

Your site will now be deployed but the authentication won’t work.

Adding environment variables.

•

After the site is deployed go to the dashboard of the current app click on settings and then Environment Variables.

•

Add the Auth0 client id, Auth0 client secret, and Auth0 domain which is present in our .env.local file.

•

After you add the two it will look like this.

•

We will add another variable, our Next Auth URL and it will be the deployed URL instead of the localhost.

•

To get the URL, click on domains, get the shortest link, and add it to the NEXTAUTH_URL variable. It would be similar to https://next-auth0-demo.vercel.app/