Http://localhost:3000/api/auth/me returns 404 in Console

Help
, , ,
1

Greetings, I have just 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 is always null. I have made sure to follow every step in the tutorial exactly and the page that I am trying to display user data on looks like this:

import { useUser } from "@auth0/nextjs-auth0";
import Layout from "../components/layout";

export default function Profile({ ...props }) {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>{error.message}</div>;

  if (user) {
	  return (
		  <Layout>
		    <div>
			  Welcome {user.name}! <a href="my-site/api/auth/logout">Logout</a>
		    </div>
		  </Layout>
	  )
  }
  return <a href="/api/auth/login" className="secondary-navbar-btn">Login</a>;
}

Again, I can log in through Auth0 just fine, but cant get the user object to return properly. 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.

From my understanding, this url is related to getting the user’s profile. What can I do to fix this?

4

Hey there @wisenickel5 welcome to the community!

I’m not super familiar with this particular SDK/blog (they’re on my list!) so it’s tough to know exactly what could be going on here - I can however confirm that the sample app that is a companion to our Next.js SDK Quickstart documentation functions as expected. I am able to authenticate a user and utilize another route to display profile information. Perhaps you could give that a look?

For reference, both the quickstart and sample app can be found here:

https://auth0.com/docs/quickstart/webapp/nextjs

Hope this helps!

5

Hi @tyf thank you for your response!
The tutorial you linked was actually the first tutorial I used to configure Auth0 in to my app.
I have triple checked my .env.local, my application settings on mange.auth0.com, and the profile.js file that returns the user object. I also went through the sample application’s repo and used the same profile.js that they used.

The same thing keeps happening though, after I log in, I get errors in the browser console saying that the user object cannot be returned and that the https://localhost:3000/api/auth/me url cannot be found.

I am willing to schedule a quick zoom call so that we can take a closer look at what is going on!

1 Like
6

@tyf One other thing to note that might be giving me some trouble with this issue:

  • In my next.config.js I have reset the basepath to /my_path. My next.config.js looks something like this:
module.exports = {
  basePath: '/my_path',

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

  env: {
  },

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

I have a gut feeling that this is the reason why https://localhost:3000/api/auth/me cannot be found. Should it instead be https://localhost:3000/my_path/api/auth/me ?
If so, how do I modify this endpoint?

1 Like
7

Hey @wisenickel5 thanks for the detailed information, just getting around to this!

I am leaning this way as well - Have you tested the sample app without setting a basePath? Regardless, looking here and here, what happens if you set NEXT_PUBLIC_AUTH0_PROFILE in your .env.local file to NEXT_PUBLIC_AUTH0_PROFILE="/my_path/api/auth/me"

Like I said I’m not super familiar with Next.js nor this SDK, but I think you’re on the right path!

Let us know :crossed_fingers:

8

@tyf 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…

1 Like
9

Hey @wisenickel5 !

I’m right there with you :laughing: That’s entirely new to me… I’m super happy to know that did the trick for you - Thanks for your perseverance and for sharing with the community!

1 Like
10

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.