404 on api/auth/session when using basePath

[mt-deva]

Your question

How to set the correct path for /api/auth/session in an app using a custom basePath, it seems like an explicit NEXTAUTH_URL is ignored?

What are you trying to do

I have a global login app at root, running on mysite.com

On successful login, this redirects to another app which sits on a subpath like mysite.com/custom-app/

This app has a custom basePath set in the next.config.js

basePath: '/custom-app',

Login is successful and navigation to the subpath works correctly, but when the session is checked for, it seems to ignore the NEXTAUTH_URL and just checks the session at the default mysite.com/api/auth/session ?

NEXTAUTH_URL=mysite.com/custom-app/api/auth/

If I remove the basePath, everything works correctly when testing between two apps; one running on localhost:8080 the other localhost:3000

Just wondering if I'm missing something, or if this is even possible yet?

Thanks

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[mt-deva]

Through some trial and error, I discovered that by setting the env again in the next.config.js file - it was possible to set the auth endpoint correctly

module.exports = {
  env: {
     NEXTAUTH_URL: process.env.NEXTAUTH_URL
  }
}

[JounQin]

related to #587

@iaincollins That seems to be an FAQ and should be documented, and or can we change it to align with https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser? What means NEXT_PUBLIC_NEXTAUTH_URL.

[iaincollins]

It is best to set it as an environment variable in .env file locally and in your environment (e.g. Vercel Dashboard, Heroku Dashboard, AWS Lambda app page, etc) which is suggested as a tip in the documentation.

The variable is required to support server side rendering flows (on both pages and in API routes) across an app.

The environment variable is generally not needed in client side flows as they can access the client from a relative URLs (e.g. when running client site it just uses relative URLs like /api/auth/session) so for that reason is not a public environment variable (though it is fine to expose it publicly as it does not contain sensitive information).

Happy to make this clearer in the docs! They could be more explicit about this.

[iaincollins]

@callamwilliams This is really interesting and I don't actually understand the problem here or why what you did worked.

Please fee free to leave this open for future investigation in case it hints at a bug or just a gap in the docs.

I think the problem could be solved with a pages/_app.js file which sets this option for both client and server side renders, although it looks like this functionality is not documented.

import { Provider } from 'next-auth/client'

export default function App ({ Component, pageProps }) => {
  return (
    <Provider session={pageProps.session} options={{ basePath: `/custom-app/api/auth` }}>
      <Component {...pageProps} />
    </Provider>
  )
}

I'd be interested in knowing if this also worked, instead of using next.config.js to export the env var - although I think exporting the env var that is absolute fine too, and I can see why it resolves the issue with a custom base path (as the NextAuth.js "client" supports being run both browser and server side, and reads in default values for options from env vars if they are set).

[JounQin]

@iaincollins I'm not sure but the environment is actually required to use signIn('github') method in next-auth/client on browser.

[lavcraft]

@iaincollins thanks for your answer in previous comment. But what is actual status of this case? It's a bug? I'm finding a solution for apps with basePath and i guess, way with manual injecting basePath like this:

import { Provider } from 'next-auth/client'

const {basePath} = getConfig();

export default function App ({ Component, pageProps }) => {
  return (
    <Provider session={pageProps.session} options={{ basePath: `/${basePath}/api/auth` }}>
      <Component {...pageProps} />
    </Provider>
  )
}

Is not the best way, because next-auth can use some integration with next.js and provide more clear development experience :)

[balazsorban44]

For anyone ending up here, I summed up a possible solution at #1713! Please go there and comment on what you think!

[enso-x]

Same problem if you have 2 "api" directories. One in root of project, and one in "pages" directory.

[aerinkim]

Removing the api folder on root level fixed the issue. Spent good 3 hours debugging this. Hope the team expose this error in vercel log.

[sergiosuramin]

Removing the api folder on root level fixed the issue. Spent good 3 hours debugging this. Hope the team expose this error in vercel log.

spent quite a time before trying this approach and it worked.
I renamed the api folder on root to its synonym like services instead, and keep the nextauth inside the api folder inside my app directory.

thank you @aerinkim !