Next.js App experiences a 404 Error when attempting to access the Auth0 Endpoint "api/auth/me"

Question

Next.js App experiences a 404 Error when attempting to access the Auth0 Endpoint "api/auth/me"

Following a tutorial, I integrated my Next.js App with Auth0 successfully. However, after logging in and out, I encountered an issue where the user object is not returned when trying to display user information on the page post-login. Both the Profile.js page rendering and the env.local file with the app's secret keys seem to be in order.

Upon further investigation, I found an error in the browser console stating:

Failed to Load Resource ... 404 Not Found: http://localhost:3000/api/auth/me

.

This error suggests a discrepancy in the mapping between my Next.js app and Auth0, possibly due to modifying 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'
  },
}

I am looking for a way to include my basepath in the endpoint that returns the user object, resulting in something like:

https://localhost:3000/my_path/api/auth/me

To resolve the issue of the user object not being returned properly, I am open to suggestions and providing more context on specific files in my app.

Edit: After discussing this issue on the Auth0 forums (link), I was directed to this link, which showcases another Next.js Auth0 sample app written in TypeScript. They manipulate the UserContext object and reset the ProfileURL, an action I am interested in. What would be the JavaScript equivalent of this?

Additionally, the same forum response shared another link to a function that creates a custom login URL. This aligns with my goal of creating a custom auth URL to retrieve the User object and resolve the 404 ... /api/auth/me not found error. Given my limited experience with JS, I struggled to replicate the function from the example provided. Can you guide me on how to achieve this?

javascript typescript next.js auth0 auth0-connection

Answer 1

Answer №1

Emotions of both joy and frustration overwhelm me as I stumble upon a ridiculously simple solution to this problem.

Discovered within the readme.md of the NextJS-Auth0 repository... This small code snippet resolved all my dilemmas after endless hours of searching -

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

Time to dry the tears on my desk and move on..

Answer 2

Emotions of both joy and frustration overwhelm me as I stumble upon a ridiculously simple solution to this problem.

Discovered within the readme.md of the NextJS-Auth0 repository... This small code snippet resolved all my dilemmas after endless hours of searching -

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

Time to dry the tears on my desk and move on..

Answer 3

Answer №2

I encountered a similar issue recently with my Next application deployed on Vercel. The problem was that all the api/auth/* routes were not functioning properly in the production environment, while they worked perfectly fine locally.

For authentication, I'm utilizing the Auth0 Universal Login Experience.

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

Prior to this issue, I only had the following function:

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

export default handleAuth();

To resolve the problem, I decided to create separate files for each required path in my application. It seemed like Next.js was not generating the dynamic files for [...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;

Answer 4

I encountered a similar issue recently with my Next application deployed on Vercel. The problem was that all the api/auth/* routes were not functioning properly in the production environment, while they worked perfectly fine locally.

For authentication, I'm utilizing the Auth0 Universal Login Experience.

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

Prior to this issue, I only had the following function:

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

export default handleAuth();

To resolve the problem, I decided to create separate files for each required path in my application. It seemed like Next.js was not generating the dynamic files for [...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;

Answer 5

Answer №3

For resolving this issue, you can take the following steps:

.env file:

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

_app.tsx file:


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

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

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

export default handleAuth();

login.tsx file:

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

Answer 6

For resolving this issue, you can take the following steps:

.env file:

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

_app.tsx file:


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

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

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

export default handleAuth();

login.tsx file:

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

Answer 7

Answer №4

If you find yourself arriving here after a late-night Google search:

The issue may arise if you have files with the extensions .ts or .tsx located in the /api directory, but you are anticipating your functions to be in the /pages/api directory. This can lead to path resolution problems in NextJS, resulting in 404 errors.

Answer 8

If you find yourself arriving here after a late-night Google search:

The issue may arise if you have files with the extensions .ts or .tsx located in the /api directory, but you are anticipating your functions to be in the /pages/api directory. This can lead to path resolution problems in NextJS, resulting in 404 errors.

Next.js App experiences a 404 Error when attempting to access the Auth0 Endpoint "api/auth/me"

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Does moment/moment-timezone have a feature that allows for the conversion of a timezone name into a more easily comprehendible format?

The code functions correctly when retrieving information from a file, however, encounters issues when retrieving data

Techniques for verifying phone numbers from various countries

Guide on sending a JavaScript function to a Pug file using Node.js and Express

Troubles encountered during the development of Nextjs/Javascript application

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

The JSON response may be null, yet the data flows seamlessly to the success function in

"Utilize Javascript to upload a picture and showcase it on your website

The integration between React hook form and reactstrap input components is not functioning properly

Issue with the recursive function in javascript for object modification

Using TypeScript to define a constant array as a type

React encountered an issue: each child element within a list must be assigned a unique "key" prop

ReactJs: How useEffect is invoked before onClick function in NextJS

Utilizing Mirth Connect to insert XML data into a MySQL database using JavaScript

Guide on enabling users to input slide number and URL address to load content using Ajax

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

What is the best way to extract a specific line from a command using a child process in a Node.js environment?

Utilizing React to dynamically load JSON data and render a component

What's the process for setting a value in selectize.js using Angular programmatically?

Utilizing a single component for various purposes with diverse tags in react