DEV Community

Cover image for The easiest way to create authentication in 2 min with NextJs & Auth0
Rohan Salunkhe
Rohan Salunkhe

Posted on

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


Setup

1. Go to Auth0 SignUp or Login

2. Click on Applications

Step 2 screenshot

3. Click on Applications

Step 3 screenshot

4. Click on Create Application

Step 4 screenshot

5. Paste name of the app into input

Step 5 screenshot

6. Click on Regular app

Step 6 screenshot

7. Click on Create

Step 7 screenshot

8. Click on Settings

Step 8 screenshot

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

Step 9 screenshot

10. 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 http://yourdomain.com/api/auth/callback
Same for Logout URL's

11. Click on Save Changes

Step 11 screenshot

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

client


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
AUTH0_SECRET = 'LONG_RANDOM_VALUE'

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

# The url of your Auth0 tenant domain
AUTH0_ISSUER_BASE_URL = 'https://YOUR_AUTH0_DOMAIN.auth0.com'

# Your Auth0 application's Client ID
AUTH0_CLIENT_ID = 'YOUR_AUTH0_CLIENT_ID'

# Your Auth0 application's Client Secret
 AUTH0_CLIENT_SECRET = 'YOUR_AUTH0_CLIENT_SECRET'
Enter fullscreen mode Exit fullscreen mode

3 . Install @auth0/nextjs-auth0 SDK

npm install @auth0/nextjs-auth0
# Or
yarn add @auth0/nextjs-auth0
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

7. 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 (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 (
      <div>
        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
      </div>
    );
  }

  return <a href="/api/auth/login">Login</a>;
}
Enter fullscreen mode Exit fullscreen mode

9 . Now Run your nextjs app via

npm run dev
#Or
yarn dev
Enter fullscreen mode Exit fullscreen mode

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

gif

Walla your authentication is done šŸŽŠšŸ”„ .


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

design

Check out the Github Repo

Live Demo :

Auth0-Nextjs

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

Official SDK repo

Top comments (0)