Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

signIn callbackUrl contains a # at the end? #532

Closed
jcheese1 opened this issue Aug 3, 2020 · 21 comments · Fixed by #1298
Closed

signIn callbackUrl contains a # at the end? #532

jcheese1 opened this issue Aug 3, 2020 · 21 comments · Fixed by #1298
Labels
question Ask how to do something or how something works

Comments

@jcheese1
Copy link

jcheese1 commented Aug 3, 2020

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?

@jcheese1 jcheese1 added the question Ask how to do something or how something works label Aug 3, 2020
@emetelyov
Copy link

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

@jcheese1
Copy link
Author

jcheese1 commented Aug 6, 2020

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

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

@jcheese1
Copy link
Author

jcheese1 commented Aug 6, 2020

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

@iaincollins
Copy link
Member

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
Copy link
Author

jcheese1 commented Aug 6, 2020

@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
Copy link
Author

jcheese1 commented Aug 6, 2020

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

@iaincollins
Copy link
Member

iaincollins commented Aug 6, 2020

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
Copy link
Author

jcheese1 commented Aug 6, 2020

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

@SharadKumar
Copy link

This seems to be a long held behaviour with Google OAuth:
meanjs/mean#535 (comment)

@Enalmada
Copy link

Enalmada commented Oct 8, 2020

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
Copy link
Contributor

kripod commented Oct 12, 2020

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
Copy link

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
Copy link

marcelmusiol commented Dec 16, 2020

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
Copy link

TimNZ commented Jan 5, 2021

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
Copy link

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
Copy link

🎉 This issue has been resolved in version 3.3.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@dimitrisnl
Copy link

dimitrisnl commented Mar 3, 2021

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
Copy link

This issue is still present as of v4 with Google provider

@MohamedHakem
Copy link

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
Copy link

apyrkh commented Aug 4, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Ask how to do something or how something works
Projects
None yet
Development

Successfully merging a pull request may close this issue.