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