Redirect to login page

[paqstd-dev]

Question 💬

Hi I am using next with a different basepath. I need to use useSession to check authorization, and if it is not there, redirect to the authorization page. How can I change the logic?

The code https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L102 explicitly redirects to /api/auth/signin:

    if (requiredAndNotLoading) {
      const url = `/api/auth/signin?${new URLSearchParams({
        error: "SessionRequired",
        callbackUrl: window.location.href,
      })}`
      if (onUnauthenticated) onUnauthenticated()
      else window.location.href = url
    }

but I have it might be: /custompath/api/auth/signin.

How to reproduce ☕️

I have nginx running with a proxy pass that is configured to serve a next application at /custompath.

Thus, all actions are expected to take place relative to /custompath:

• custompath/_next
• custompath/api
• ...

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[paqstd-dev]

It is probably expected that the code

<Provider store={store}>
     <SessionProvider session={session} basePath="/custompath/api/auth">
                ...
     </SessionProvider>
</Provider>

will also affect the redirect

[ThangHuuVu]

Could you provide a small reproduction to help us confirm that the redirect does not take basePath into account? 👀

[paqstd-dev]

Thank you for bringing this issue attention. I indicated above that in the url code itself, the transition does not contain basePath at all.

I think it should be something like this (with ${basePath}):

сonst url = `/${basePath}/api/auth/signin?${new URLSearchParams({
     error: "SessionRequired",
     callbackUrl: window.location.href,
})}`

Here is what it looks like in code.

I don't have much experience in creating public pull requests, so I can't fix this bug myself yet, unfortunately.

[paqstd-dev]

Here is how I solved the problem. Using the onUnauthenticated parameter.

.env

BASE_PATH=/blog

_app.js

import ...

function AppProvider({ children: Component, ...pageProps }) {
    const { data: session, status } = useSession({
        required: Component.needAuth,
        onUnauthenticated: () => {
            window.location.replace(`${BASE_PATH}/account/signin?error=SessionRequired&callbackUrl=${window.location.href}`)
        },
    })

    // ... custom code

    return <Component {...pageProps} />
}

function NextClient({ Component, pageProps: { session, ...pageProps } }) {
    return (
        <SessionProvider session={session} basePath={`${BASE_PATH}/api/auth`}>
              <AppProvider {...pageProps}>{Component}</AppProvider>
        </SessionProvider>
    )
}

export default NextClient

However, basePath is still expected to work correctly for all parts of the system.

[stychu]

@ThangHuuVu I can confirm this bug. I just encountered it.
It doesn't take into account when there is a basePath declared.
I had to define custom redirect in config to get this working.

<SessionProvider
        session={session}
        basePath={`${env.NEXT_PUBLIC_APP_BASE_PATH}/api/auth`}
      >
        <main className={fonts.className}>
          <Component {...pageProps} />
        </main>
      </SessionProvider>

{
    reactStrictMode: true,
    swcMinify: true,
    basePath: env.APP_BASE_PATH,
    async redirects() {
      return [
        {
          source: "/",
          destination: env.APP_BASE_PATH,
          basePath: false,
          permanent: false,
        },
        {
          source: "/api/auth/:path*",
          destination: `${env.APP_BASE_PATH}/api/auth/:path*`,
          basePath: false,
          permanent: false,
        },
      ];
    },
  }

[mscerri]

@stychu and @ThangHuuVu I can also confirm this bug.
I am using NextAuth with NEXTAUTH_URL='http://localhost:3000/auth-api' (as an example) since /api is reserved and proxied by the ingress to the backend APIs, so it will not even reach the Next.Js app.
I would suggest using the base path as seen in the signIn method (https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L215 and then https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react/index.tsx#L224) which would lead to the below

const baseUrl = apiBaseUrl(__NEXTAUTH)
const url = `${baseUrl}/signin?${new URLSearchParams({
  error: "SessionRequired",
  callbackUrl: window.location.href,
})}`

Would this make sense?

[soldera]

@mscerri Your merge to v4 was reverted by this commit: a83573e#comments

Do you know if it's possible to access your fix right now instead of creating a redirect or using the workarounds ?

Thanks

[stale]

It looks like this issue did not receive any activity for 60 days. It will be closed in 7 days if no further activity occurs. If you think your issue is still relevant, commenting will keep it open. Thanks!

[stale]

To keep things tidy, we are closing this issue for now. If you think your issue is still relevant, leave a comment and we might reopen it. Thanks!

[mkollers]

We are having the exact same scenario as @mscerri and still facing this issue, because of the revert. Can someone help fixing this issue?

[ThangHuuVu]

hi all, if you are still having the issue, please open a new issue with a proper reproduction so that we can take a deeper look 🙏