Authenticate Users with Auth0 in Next.js
How to Authenticate Users with Auth0 in Next
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.
npx create-next-app next-auth0-demoCleanup
I will delete everything after the Head starting from the main till the footer.
Install Next-Auth
npm i next-auth # npm
yarn add next-auth # yarnStart 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
- Sign up to Auth0
- 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
NEXTAUTH_URL=http://localhost:3000Creating a sign-in button
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!
Getting user info
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
- Sign up with your GitHub
- 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/
- Finally, go to the Deployments tab on the tab in the header.
- Click on the latest version and press redeploy.
Change the URI in Auth0
Finally, replace localhost:3000 with the actual URL and use HTTPS instead of HTTP.
Our authentication is now working perfectly. Congratulations. You have created your first Auth0 sign-in with Next Auth! 🥳
If you have found this useful, be sure to let me know in the comments. You can also let me know if you want to see any other kind of authentication.
Further resources
More content at plainenglish.io
