React-google-login: uxMode='redirect' does not redirect and opens a popup

[dyegolara]

As stated in the title, I have always used the popup mode in my app and everything works just fine, nevertheless now I need to use the redirect uxMode and it is still opening a popup even in desktop browsers.

I'm using "react-google-login": "^3.2.0" version

Attached my GoogleLogin config:

This is a real react-google-login issue but if any of you guys knows how to implement google auth in a PWA without it taking me out of my web-app that would be great

[johnydevtv]

Hi @dyegolara, you must add redirectUri to make it work, as per docs https://github.com/anthonyjgrove/react-google-login#parameters

[dyegolara]

Nope, even with the explicit redirectUri it behaves as popup

[pedro]

Same problem here, removing the responseType makes it redirect, but then the onSuccess callback doesn't trigger 🤔

Making it redirect to a page that doesn't have the GoogleLogin component mounted I can at least see the auth params in the query string, like id_token, so that could be a way around it.

[ranisalt]

Same problem, and it seems that offline access type does not work at all with popup. So it does not work anyhow.

[JordanAtBridgit]

Same issue here. In my case it was redirecting as expected until I added responseType="code"

[williansabiao]

+1

[irhspur]

Doesn't work with responseType="code"

[nono-la-frite]

Redirect doesn't work if i put responseType="code"

[tim-fastpay]

+1 any update?

[hhause19]

+1

[iamandyk]

relevant: https://github.com/google/google-api-javascript-client/issues/288

[chiragkanhasoft]

+1, any update ?

[suryakant-kumar]

any update on this one?

[ImSolitude]

Any updates please?

[sebastienbarre]

What are we missing here? Why can't we get the code?

[PetrShchukin]

Switched to hooks, works for me.
P.S. once you use ux_mode redirect, callback won't be triggered as you leave the page. That has nothing to do with the library that's a native behavior.

[gamesover]

@PetrShchukin ,

Switched to hooks, works for me.

Do you mean you did not use redirect, right?

[PetrShchukin]

@gamesover I had some problems with the component approach, like I wasn't able to click button (it was disabled) so I used the hook approach. uxMode="redirect" worked for me, it open up google auth page in the same tab (not pop up), but obviously on the way back my callback wasn't triggered. Ultimately I removed 'react-google-login' package and implemented google authorization via back-end service. It's more secure(by saying that I mean not using PKCE extension), robust, and straight forward. Also after authentication uxMode="redirect" brings you back into your home page(actually you can set any page, but only one in google console) that makes you unable to bring user back on the same page where he clicked Login. So I ended up with back-end authentication on my fastAPI back-end service.

[gamesover]

Thanks for your advice, @PetrShchukin

Now I use the same way. Did not release actually you can ask google to redirect to any page in the backend

def google_oauth2_callback
  save_code
  fetch_access_token_and_refresh_token
  redirect_to front_end_page_url
end

[veeralpatel]

Anybody figure out a fix to this that wasn't implementing server-side auth?

[Vishnu2611]

Has there been any solution to this issue?

[sidharrth2002]

Hi, is there a solution to this?