I am getting an error on login with Auth0 and NextJs

I have tried a serverless auth0 with NextJs/React example that is identical on 2 different sites. I am getting an error when I click login and I can’t understand why.

Here is the error:

I am getting an error on login with Auth0 and NextJs

I have followed the examples to the t.


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

export default () => {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

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

api in pages/api/auth/[…auth0]:

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

export default handleAuth();


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

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

.env.local with randomly generated AUTH0_SECRET:

AUTH0_ISSUER_BASE_URL=https://(directly copied from my auth0 app)
AUTH0_CLIENT_ID=(directly copied from my auth0 app)
AUTH0_CLIENT_SECRET=(directly copied from my auth0 app)

I am getting an error on login with Auth0 and NextJs

I am getting an error on login with Auth0 and NextJs

example link: https://www.geeksforgeeks.org/adding-user-authentication-in-nextjs-using-auth0/

Any idea on what gives here? Thanks.


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Does your secret have to be wrapped in quotes?


Method 2

I think there might be two issues:

First you did not set the callback url callback in auth0 account

Step 4: Add the callback and logout URL. Callback user is used to
redirecting the user after logging in and logout URL is used to
redirect the user after logging out.

Second, your .env.local is not located in the root directory.

Method 3

After another few hours of messing with this, I was able to get it to work, but it seems really wonky. First, I had to initialize Auth0 in my code by creating this file which I called auth0.js:

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

export default initAuth0({
  secret: "process.env.REACT_APP_AUTH0_SECRET",
  issuerBaseURL: process.env.REACT_APP_AUTH0_ISSUER_BASE_URL,
  baseURL: process.env.REACT_APP_AUTH0_BASE_URL,
  clientID: process.env.REACT_APP_AUTH0_CLIENT_ID,
  clientSecret: process.env.REACT_APP_AUTH0_CLIENT_SECRET,

I had to redo the .env.local because, and I forgot about this, the variables need to be prefixed with REACT_APP in a react app:


Notice that I had to put the reference to the REACT_APP_AUTH0_SECRET env var in the auth0.js file in quotes and leave the secret variable itself in the .env.local file unquoted. Quoting the variable and leaving the reference to it in auth0.js unquoted did not work, which seems extremely weird.

Then I imported the auth0.js initialization file into […auth0].js file like so:

import auth0 from "../../../lib/auth0";
export default auth0.handleAuth();

And that worked. I figured once I had that, I could go back to the original config using just the .env.local file with the REACT_APP prefixes, but that still did not work even when quoting the secret string. I still got the secret error. If anyone can give reasoning behind this I would love to know.
Not liking auth0 with nextjs very much right now.

Method 4

What worked for me was to change all the variables in .env with ‘ ‘ instead of ” “.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x