Next-auth: signIn callbackUrl contains a # at the end?

[yuyao17]

Please refer to the documentation, the example project and existing issues before creating a new issue.

Your question
A clear and concise question.

When signing in via a provider, the callbackUrl sometimes contains an # at the end. Can't seem to find the reason. help?

[emetelyov]

I have the same issue, after signin (http://localhost:3000/#) and logout not working when I have # at the end.

[yuyao17]

As a workaround, I'm returning the baseUrl from the redirect callback:

    redirect: async (_url, baseUrl) => {
      return Promise.resolve(baseUrl);
    },

[yuyao17]

Nevermind. that still appends the hash at the end. weird

[iaincollins]

Hmm I don't see this issue on the example site.

Can you replicate this with the example project?

I wonder, is your sign in link an <a> tag (rather than than say, a <button>) and is it calling signIn() without calling e.preventDefault() first?

[yuyao17]

@iaincollins
using a button to signin. That being said, just saw this: https://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url

I'm using Google provider. It might be something similar to what FB is doing?

[yuyao17]

@iaincollins You can replicate the bug using the demo site by logging in via google provider
https://next-auth-example.now.sh

[iaincollins]

Thanks! That's super weird because we don't even use the URL state from OAuth providers to store the URL (because not all providers support callback URLs NextAuth.js handles them itself).

That is so odd that it only seems to happen with some providers (e.g. I don't see it with Twitter?).

I wonder if if it's some bizzare browser behaviour where the OAuth provider page adds it and the browser decides to persist the # symbol on the redirect URL.

I THINK I can think of workaround / fix for that, if that is what is going on...

[yuyao17]

@iaincollins Yes, seems to not happen with firefox. But seems to happen with safari and chrome

[SharadKumar]

This seems to be a long held behaviour with Google OAuth:
https://github.com/meanjs/mean/issues/535#issuecomment-98582332

[Enalmada]

When login adds a hash to the url then hitting Signout button isn't refreshing the screen. It is logging out but a user can't tell. Is there any workaround to remove the hash being added by providers like Google to the browser url after callback?

[kripod]

When login adds a hash to the url then hitting Signout button isn't refreshing the screen. It is logging out but a user can't tell. Is there any workaround to remove the hash being added by providers like Google to the browser url after callback?

I'm currently using signOut({ callbackUrl: window.location.pathname }) as a temporary fix. However, that also removes the hash from the URL even when desired. A page refresh should be forced with window.location.reload() if window.location.href matches callbackUrl (without comparing #hashes at the end of URLs).

[vgolemis]

Hello. I am facing the same issue. When I login with Google it appends a '#' at the end of the url. When hitting the signout button nothing happens (no page refresh), so the user is not really sure if the web app really logged out. This behaviour was encountered on Chrome and Edge (which is Chromium based). On the other hand using Firefox the '#' in the end doesn't get appended.

Similar behaviour seems to appear with Facebook as well which appends '#_=_' at the end of the url and also prevents the signout to reload the page.

Do you have any tips on what may cause this or/and possible fixes?

[marcelmusiol]

A solution could be to check in __app.js_ if the router.asPath ends with a "#" and push to the router.pathname

__app.js_

import { useEffect } from "react";

function MyApp({ Component, pageProps, router }) {

  useEffect(() => {
    if (router.asPath.endsWith("#")) router.push(router.pathname);
  });

  return (...)
}

Works for me for now but haven't tested thoroughly...