baseUrl is not considered on client side code

[ramiel]

Your question
baseUrl Provider option (which is undocumented) is not considered on client side, for example when using useSession(). I noticed the code explicitely does this here

const _apiBaseUrl = () => {
  if (typeof window === 'undefined') {
    // NEXTAUTH_URL should always be set explicitly to support server side calls - log warning if not set
    if (!process.env.NEXTAUTH_URL) { logger.warn('NEXTAUTH_URL', 'NEXTAUTH_URL environment variable not set') }

    // Return absolute path when called server side
    return `${__NEXTAUTH.baseUrl}${__NEXTAUTH.basePath}`
  } else {
    // Return relative path when called client side
    return __NEXTAUTH.basePath
  }
}

What are you trying to do
I have several application working on the same domain, on different subpath. Since the authentication is set on that domain, I'd like to use the client library to check signin status and so I'm trying to use the Provider on each project. In local development, done on localhost, I want to set the baseUrl to the value I prefer.

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• 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

[ramiel]

I patched the library and noticed that it's not thought to work from a different domain. When the getSession is called no credentials are sent, so it's impossible to get it. Even if this could be fixed I think it probably goes against some design. The author may tell us more.

[iaincollins]

Hi there!

When called client side, only making requests to the same domain are supported, so we ignore baseUrl client side as it won't work if a request is for a different hostname.

If you are running multiple apps on the same domain but on a different path, you can set NEXTAUTH_URL with a path to each app http://example.com/my-app-1/api/auth and on the client side it will automatically use /my-app-1/api/auth as the basePath, if that helps.

(The basePath option is undocumented as it is now automatically extracted from NEXTAUTH_URL if it has a path in it).

If you are running multiple domains then I'm afraid that's not currently supported.

[ramiel]

I'm running several apps on the same domain, but on local dev each app run on a different port on localhost, which means different domains (even if the cookie works well). I'd need to add a reverse proxy as nginx or caddy on top of it on local, but it's not worth at the moment.

My current solution is to do a request similar to your getSession but with credentials always included on local dev. This is not an option in next-auth and I understand why. Feel free to close this issue.

[androa]

If you are running multiple apps on the same domain but on a different path, you can set NEXTAUTH_URL with a path to each app http://example.com/my-app-1/api/auth and on the client side it will automatically use /my-app-1/api/auth as the basePath, if that helps.

I'm unable to replicate this behaviour. The app is served with a basepath. I set NEXTAUTH_URL and this seems to work well on the client-side. But when I use the signIn-method, it produces a URL that expects the app to be on the root path.

I had to set the basePath through the options attribute on the Provider in _app.js. I can't quite see from the code in client/index.js how the behaviour you describe can work.

[balazsorban44]

@iaincollins the problem with this is that on client-side, NEXTAUTH_URL is never read, and it will always be /api/auth. Changing the variable name to NEXT_PUBLIC_NEXTAUTH_URL would solve this (#1713)

[LNFWebsite]

@androa Can you post a snippet of code to how you did this? I'm running into the exact same issue

[LNFWebsite]

Nevermind, found it here: #499 (comment)

Here's the code to save other's time:

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>
  )
}

[serbioortega]

// .env file:
NEXTAUTH_URL=XYZ

// next.config.js
module.exports = {
env: {
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
},
}

[gh-sthakur]

Nevermind, found it here: #499 (comment)

Here's the code to save other's time:

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>
  )
}

Nevermind, found it here: #499 (comment)

Here's the code to save other's time:

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>
  )
}

this has saved, so much of time. Thank you #1110