404 error when following basic setup instructions?

Help
,
1

Hello, I’m following the basic nextjs-auth0 example to try to add auth0 authentication to my nextjs app using the latest docs.

However, I keep getting 404: not found error when trying to access the login route located at /api/auth/login.

For the record, I am just deploying locally (localhost:3000). I am using the NextJS app router and have setup everything according to the instructions page, including setting up the application in my Auth0 dashboard.

To reproduce the error:

  1. follow instructions at https://github.com/auth0/nextjs-auth0 for registering and configuring the app in auth0 dashboard

  2. add AUTH0_BASE_URL, AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET values to .env file.

  3. add route.js file which imports and then exports handleAuth at /app/api/auth/[auth0]/route.js (note that I have a parent src directory above the app directory)

  4. add UserProvider to layout.js via:


export default function App({ children }) {
  return (
    <UserProvider>
      <body>{children}</body>
    </UserProvider>
  );
}
  1. create a button to call the login route in your Header.js or Page.js file via:
    <a href="/api/auth/login">Login</a>;

Clicking this button should reroute you to http://localhost:3000/api/auth/login, however, at this route, I get a 404 error?

I’ve set auth before using older issues without issue, but it seems like I’m missing something very simple and basic here, what could it be?

Thank you in advance,

2

The main issue here is that instead of redirecting me to the auth0 server where authentication of my credentials can take place, I instead end up at http://localhost:3000/api/auth/login, which naturally results in a 404 error. Why isn’t handleAuth picking up when api/auth/login is being called and taking me to the login page? I’ve tried installing and using the old { useAuth0 } method from '@auth0/auth0-react' but that no longer seems to be compatible with NextJS?

Does this have something to do with whether one uses CSR or SSR? Due to the use of useState hooks, I am using CSR for most of my pages via ‘use client’.

3

Hello! Have you fixed it? I’m facing the same problem and can’t find any answers on Google :frowning:

4

Hey there @horariodev ,

Yes, to fix it, I basically took the working Auth0 GitHub example, cloned it, and inserted all my components and files into the cloned file. In other words, I rebuilt my entire app around the cloned file.

Then it worked, lol.

Even going line by line in each and every file in my original project and comparing to the working example, I could never figure out what was causing the error. It was really strange.

Let me know if that works for you, or if you can figure out what went wrong…

5

Hey! :slight_smile: Thank you for you answer! I haven’t been able to fix it, I think I will do the login myself with nextjs, prisma and postgres :S I was checking out that example repo and was wondering if you used the server file as well? do you know if it can be done without it? Thanks! :smiley:

6

Facing the same problem. I just followed the simple read.me instructions (((

7

The instructions are garbage. Make sure you’re passing in the context and not NextResponse. If you’re using app router.

8

Ok yes, who in 2024 August with the same problem?

1 Like