NextJS authentication in 5 minutes

Hi everyone, in this article, I will show you how to quickly set up authentication in NextJS with next-auth and Auth0.

This article is great if you are just starting with the project because we will be using a bootstrapped project from next-auth.

NextAuth.js is a complete open-source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

Auth0 is easy to implement, adaptable authentication and authorization platform.

Clone repository and install dependencies

First we need to clone example app from next-auth. You can find the whole guide from next-auth here or just follow my steps.

1. Clone the repository with this command git clone https://github.com/nextauthjs/next-auth-example.git
2. Change directory to the cloned repository cd next-auth-example
3. Install dependencies npm install
4. Run the app npm run dev

Now you can open the app in the browser at http://localhost:3000

Auth0

1. Sign up for an Auth0 account at https://auth0.com/signup
2. When you get to the Getting Started screen select Applications from the left sidebar and then again Applications in the sub-menu.
3. Click on the blue button with text "Create Application", select Regular Web Applications, press Create.

By default, you have enabled Google and username-password authentications, you can check that at the Connections tab.

For now, we will use that, but if you later want to enable more options, you can select Authentication->Social from the left sidebar and create new connections, after that enable it and Auth0 will take care of the rest.

Configuration

After the app is created, go to the setting tab and you will see your Domain, Client ID and Client Secret which you need to provide to the next-auth.

In the settings tab, you need to provide a callback URL for Auth0. Scroll down until you see "Allowed Callback URLs" and paste this URL: http://localhost:3000/api/auth/callback/auth0

After you did this scroll to the bottom and press the "Save Changes" button.

Go to the repository api->auth->[...nextauth].js file, you can delete everything inside the providers array except Auth0 provider. Also, you can delete everything under the providers array since we don't need it for this example.

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
  // https://next-auth.js.org/configuration/providers
  providers: [
    Providers.Auth0({
      clientId: process.env.AUTH0_ID,
      clientSecret: process.env.AUTH0_SECRET,
      domain: process.env.AUTH0_DOMAIN,
    }),
  ],
})

Now open .env.local.example file located in the root directory, delete everything except AUTH0 env variables. Then assign them values from your Auth0 settings tab.

NOTE: Wrap strings in " " or else it won't work.

Lastly, rename the file from .env.local.example to .env

Now you can go to the http://localhost:3000 and press on Sign In button. You will be redirected to Auth0 generated page.

Press on Sign in with Auth0 and you will be redirected to a new page with options to sign in, default is email-password and Google. Press on Google and Sign in with your account. After that, you will see you are signed in with your account on the Home page. Now you can access the protected route and if you log out you won't be able to see its content.

This is it! Quick authentication in NextJS with next-auth and Auth0. If you have any questions, feel free to ask!