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?

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?

• javascript
• typescript
• next.js
• auth0
• auth0-connection

Share Improve this question Follow edited May 8, 2022 at 19:03 wisenickel asked May 6, 2022 at 15:37 wisenickelwisenickel 39466 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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;

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>

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.