Nextjs and Auth0

The easiest way to create authentication in 2 min with NextJs & Auth0

Aren't you sick of having to authenticate users with long codes and dirty back-end work?

Here's the quickest way to do it in under 2 minutes.

Demo :

Live Preview


  1. Go to Auth0 Sign Up or Login

  2. Click on Applications

Step 2 screenshot

  1. Click on Applications

Step 3 screenshot

  1. Click on Create Application

Step 4 screenshot

  1. Paste name of the app into input

Step 5 screenshot

  1. Click on Regular app

Step 6 screenshot

  1. Click on Create

Step 7 screenshot

  1. Click on Settings

Step 8 screenshot

  1. Type http://localhost:3000/api/auth/callback

Step 9 screenshot

  1. Type http://localhost:3000

Step 10 screenshot

Note when you will deploy this app you should change the url to http://locahost:3000/api/auth/callback to Same for Logout URL's

  1. Click on Save Changes

Step 11 screenshot

  1. Scroll up take note of your domain , client id and client secret


Now create a Nextjs App

1 . yarn create next-app

2 . Create .env.local and paste your secrets here

# A long, secret value used to encrypt the session cookie use any random 32 character string

# The base url of your application
AUTH0_BASE_URL= 'http://localhost:3000'

# The url of your Auth0 tenant domain

# Your Auth0 application's Client ID

# Your Auth0 application's Client Secret

3 . Install @auth0/nextjs-auth0 SDK

npm install @auth0/nextjs-auth0
# Or
yarn add @auth0/nextjs-auth0

4 . Get your environment variables

5 . Step copy your secrets to .env.local

Client Secrets

6 . Go to pages/api/ create a new file auth/[...auth0].js this will create folder auth and file [...auth0].js

[...auth0]js to catch all slug so we can use same route for login and logout

Now paste the following code in your auth/[...auth0].js file

import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth();
  1. Wrap your pages/_app.js component with the UserProvider component.
// pages/_app.js
import React from "react";
import "../styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0";

export default function App({ Component, pageProps }) {
  return (
      <Component {...pageProps} />

8 . Now lets implement this inside our pages/index.js page

// pages/index.js
import { useUser } from "@auth0/nextjs-auth0";

export default function Index() {
  const { user } = useUser();

  if (user) {
    return (
        Welcome {}! <a href="/api/auth/logout">Logout</a>

  return <a href="/api/auth/login">Login</a>;

9 . Now Run your nextjs app via

npm run dev
yarn dev

10 . Now you can login to your app and also be able to logout


Walla your authentication is done 🎊🔥 .

So you can see it in action, I've put some design to it.


Check out the Github Repo

Live Demo :


Additional features, such as page protection and others, can be added. Check out the official SDK repo for further information.

Official SDK repo

Jan 27 2022