Search code examples
reactjsnext.jsauth0

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:

enter image description here

I have followed the examples to the t.

index.js:

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

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

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

export default handleAuth();

app.js

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

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

.env.local with randomly generated AUTH0_SECRET:

AUTH0_SECRET=b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc
AUTH0_BASE_URL=http://localhost:3000
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)

enter image description here

enter image description here

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

Any idea on what gives here? Thanks.

Solution

  • 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:

    REACT_APP_AUTH0_SECRET=
  b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc
REACT_APP_AUTH0_BASE_URL=http://localhost:3000
REACT_APP_AUTH0_ISSUER_BASE_URL=https://(domain)
REACT_APP_AUTH0_CLIENT_ID=(clientId)
REACT_APP_AUTH0_CLIENT_SECRET=(client secret)

    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.