signIn callbackUrl contains a # at the end?

[jcheese1]

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.

[jcheese1]

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

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

[jcheese1]

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?

[jcheese1]

@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?

[jcheese1]

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

[jcheese1]

@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:
meanjs/mean#535 (comment)

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

[TimNZ]

A bit of googling and I discovered there's a lot of discussion about the standards/browsers view on preserving or not fragments e.g. #... on redirects (302).

If you trace the network calls you can clearly see that no # is specified in the 'location' response cookie set by NextAuth on redirect using callbackUrl value, but the #_ =_ (in case of FB) is retained.

ariya/phantomjs#12192

[sidinei-silva]

A workaround and one I'm using is:

1 - In my ProectRouter component I send the path of the page that the user tried to access to / login as query params.

protectRouter.tsx

import { useRouter } from 'next/router';
import { useSession } from 'next-auth/client';
import React, { useEffect } from 'react';

import LoadingScreen from '../../ui/loadingScreen';

const ProtectRoute = props => {
  const { children } = props;
  const [session, loading] = useSession();

  const router = useRouter();

  if (!session && !loading) {
    if (typeof window !== 'undefined') {
      router.push({ pathname: '/login', query: { redirect: router.asPath } });
    }
  }

  if (session && !loading) {
    return children;
  }

  return <LoadingScreen />;
};

export default ProtectRoute;

2 - On the login page I build the callback url as follows, sending the user to an auxiliary redirection page, passing as query params the url he will return to (the url he tried accesses without login) :

login.tsx

useEffect(() => {
    const { origin } = window.location;
    setCallbackUrl(`${origin}/redirect?redirect=${router.query.redirect}`);
  }, []);

3 - And finally on the redirect page I push the route described in the query params

redirect.tsx

const Redirect: React.FC = () => {
  const router = useRouter();

  useEffect(() => {
    if (router.query.redirect) {
      const url: any = router.query.redirect;
      router.push(url);
    }
  });

  return <LoadingScreen />;
};

export default Redirect;

[github-actions]

🎉 This issue has been resolved in version 3.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[dimitrisnl]

The issue is still valid on my end. Only that if there is no transition, the hash will malform the rest of the query.

[agusterodin]

This issue is still present as of v4 with Google provider

[MohamedHakem]

Using "next-auth": "4.0.6"
The issue still present on Chrome, Brave, Edge browsers (No issues with Firfox or Vivaldi)
The # is appended to the url after logging in using Google provider,

• BUT the signOut works as expected and reloads the page.

[apyrkh]

I don't know how, but the following code fixes FB login redirect to /#_=_
At first it redirects to /# and then in a moment the hash # magically dissapears🪄

          <a
            href={`/api/auth/signin`}
            onClick={(e) => {
              e.preventDefault()
              signIn(null, { callbackUrl: '/#' })
            }}
          >
            Sign in
          </a>

Enjoy

[klabusta]

Still present on Safari only for signin. Signout and Chrome working fine. "next-auth": "4.24.5"