Auth0 Endpoint "api/auth/me" returns a 404 Error in Next.js App

Question

I have gone through the following tutorial to get my Next.js App integrated with Auth0. I am able to log in and log out just fine but when trying to display user information on the page after login, the user object is unable to be returned. I have ensured that there is nothing wrong with the Profile.js page that is rendering the user object or the env.local file with my app's secret keys.

After further inspection I noticed that I get an error in the browser console that reads: Failed to Load Resource ... 404 Not Found: http://localhost:3000/api/auth/me.

This error gives me a gut feeling that there is a discrepancy in the mapping between my next.js app and Auth0 since I have modified the basepath in next.config.js:

module.exports = {
  basePath: '/my_path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: process.env.BACKEND_API_URL,
    CONSENT_COOKIE_NAME: 'ConsentCookie'
  },
}

Is there a way to add my basepath into the endpoint that the user object is being returned from? The end result would look something like: https://localhost:3000/my_path/api/auth/me

I am not 100% certain that this will fix my issue with getting the user object returned properly, so I am open to any other suggestions and willing to add more context surrounding specific files in my app.

---

Edit: After bringing this issue up on the Auth0 forums (link), I was pointed towards this link, which is another example Next.js Auth0 sample app, except they have written their frontend with TypeScript (which I am not familiar with). They are manipulating the UserContext object and resetting the ProfileURL, which is what I am after; so what would be the JavaScript equivalent to this?

The same repsonse to the Auth0 forum post I mentioned also included another link to an example function that creates a custom URL for the login. This is very close to what I am after since again, I am trying to create a custom auth URL to retrieve the User object and get rid of the 404 ... /api/auth/me not found error. Due to my inexperience with JS, my attempts at trying to create a similar function to the example stated previously have failed, so what would this look like?

Duwe

Answer 1

I am feeling intense bittersweet emotions after finding an insultingly simple solution to this issue.

Found in the readme.md of the NextJS-Auth0 repository... This small snippet of code fixed all of my issues after hours of searching for a solution -

// _app.js
function App({ Component, pageProps }) {
  return (
    <UserProvider loginUrl="/foo/api/auth/login" profileUrl="/foo/api/auth/me">
      <Component {...pageProps} />
    </UserProvider>
  );
}

Now to get back to wiping the tears off my desk..

Duwe

You don't need the additional props as long as your folders are setup correctly. At the top level you should have /pages/api/auth. Within the auth you create the dynamic [auth0].js/ts file which exposes the endpoints (including me) once you export the handler. – Cooe

Answer 2

I have been having this issue too. What was happening for my Next app deployed on Vercel is that all the api/auth/* routes were not working in production but everything worked locally.

I'm using the Auth0 Universal Login Experience

// package.json
...
"dependencies": {
    "@auth0/nextjs-auth0": "^1.9.2",
}
...

All I had before was the function

// api/auth/[...auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth();

So what I did is create all the paths I'd need in my application in their respective files. I think Next.js was not creating the dynamic files at [...auth0].ts

// api/auth/callback.ts
import { handleCallback } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const callbackHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleCallback(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default callbackHandler;

// api/auth/login.ts
import { handleLogin } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const loginHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogin(req, res, {
      authorizationParams: {
        screen_hint: "login",
      },
    });
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default loginHandler;

// api/auth/logout.ts
import { handleLogout } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const logoutHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogout(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default logoutHandler;

// api/auth/me.ts
// not api/auth/profile.ts

import { handleProfile } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const profileHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleProfile(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default profileHandler;

// api/auth/signup.ts

import { handleLogin } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const signupHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogin(req, res, {
      authorizationParams: {
        screen_hint: "signup",
      },
    });
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default signupHandler;

Mantissa

Seems to be a solution for a slightly different problem than the one asked. The question has basePath set, which means the endpoints should be at /my_path/api/auth/* but other code was trying to call /api/auth/* – Hohenstaufen

Answer 3

To fix this issue. you can follow this steps:

1. .env file:

AUTH0_SECRET='****'
AUTH0_BASE_URL='http://localhost:3000/baseURL/'
AUTH0_ISSUER_BASE_URL='***'
AUTH0_CLIENT_ID='***'
AUTH0_CLIENT_SECRET='***'

2. _app.tsx file:

  <UserProvider profileUrl="/baseURL/api/auth/me">
    <AuthContextProvider>
      <AuthLayout>
        <Component {...pageProps} />
      </AuthLayout>
    </AuthContextProvider>
  </UserProvider>

3. /api/auth/[auth0].tsx file:

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

export default handleAuth();

4. login.tsx file:

<Link href="/api/auth/login">
    Sign In with Auth0
</Link>

Epitome

Answer 4

For anyone like me landing here from a random Google search at 2AM:

This problem will appear if you have .ts/.tsx files inside /api folder and you expect your functions to be inside /pages/api. NextJS won't be able to resolve paths properly resulting in 404 responses.

Haberdasher