Fixing baseURL error in Nextjs-auth0

Contrary to the YouTube tutorial and auth0 documentation that I followed diligently while setting up my code of nextjs and auth0 authentication, still i encountered this error and it took awhile to find a solution to fix the error. Talk is cheap show me the code.

👾 Let’s dive right into fixing the error.

Error image.

If you’re getting this exact error then i have the exact fix for you in this article.

Prerequisite:

In your _app.js you should import UserProvider and wrap it around the component.

import "../styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0";

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

export default MyApp;

Step One:

Make sure you have your .env.local file created in the root of your app.

Step Two:

The contents of you .env.local file should be arranged in this format.

AUTH0_SECRET='random generated number'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN_AUTH0_DASHBOARD'
AUTH0_CLIENT_ID='CLIENT_ID_AUTH0_DASHBOARD'
AUTH0_CLIENT_SECRET='CLIENT_SECRET_AUTH0_DASHBOARD'

Step Three:

In your pages/api/auth/[…auth0].js file.

// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth({
    baseUrl: process.env.AUTH0_BASE_URL
});

This is the file where the error comes from.

Contrary to what is in the auth0 documentation for nextjs which is the snippet below.

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

export default handleAuth();

This will definitely throw an error because the handleauth isn’t able to read the baseUrl from the env.local file.

Step Four:

The last step is to navigate to the authentication url in your browsers’ url.

Add the api/auth/login to your localhost url

http://localhost:3000/api/auth/login

If this helped solve the error you’ll get this in your browser’s http://localhost:3000/api/auth/login

😜 Finally! Problem solved.

If this helped follow my twitter handle @celebrity_dev