404 error when following basic setup instructions

robliou commented 2 months ago

Checklist

[X] The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
[X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
[X] I have looked into the API documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

Hello, I'm following the basic nextjs-auth0 example to try to add auth0 authentication to my nextjs app.

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.

Reproduction

1) follow instructions at https://github.com/auth0/nextjs-auth0 for registering and configuring the app in auth0 dashboard 1a) add AUTH0_BASE_URL, AUTH0_ISSUER_BASE_URL, AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET values to .env file. 2) 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) 3) add UserProvider to layout.js via:

import { UserProvider } from '@auth0/nextjs-auth0/client';

export default function App({ children }) {
  return (
    <UserProvider>
      <body>{children}</body>
    </UserProvider>
  );
}

4) create a button to call the login route in your Header.js or Page.js file via:

<a href="/api/auth/login">Login</a>;

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

It seems like I'm missing something very simple and basic here, but can't figure out what it is? Thank you in advance,

Additional context

No response

nextjs-auth0 version

3.5.0

Next.js version

14.1.3

Node.js version

20

robliou commented 2 months ago

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'.

braddf commented 1 month ago

Same here, wondering if the CSR is my problem too, obviously isn't finding its way to the Auth0 redirect logic 😢

auth0 / nextjs-auth0