Home > Net >  I am getting an error on login with Auth0 and NextJs
I am getting an error on login with Auth0 and NextJs

Time:04-09

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)

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

Any idea on what gives here? Thanks.

CodePudding user response:

Does your secret have to be wrapped in quotes?

AUTH0_SECRET="b4c5107c3e4fc67e8d2323118a8e36bbc52a515ffc0a2afb5429126a4aed0ccc"

CodePudding user response:

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.

  • Related