How to use Google OAuth 2 in facebook embedded browser

Question

I have a new website that require users to log in with Google login (using react-oauth/google package). The problem starts when users clicking on my website link from the facebook mobile app, and then they're redirected to the website in the facebook embedded browser. However, since last year, Google login blocks embedded browsers.

Is there any way to either:

1. Configure something so people coming in from facebook could log in using google-login, without the need of redirecting them to a different mobile browser?
2. If not, how can I redirect the users out of facebook and into their mobile default browser? window.location.href="my.url" don't actually openning any browser in the mobile.

Answer 1

I struggled with the same problem for a while, tried different approaches and none of them worked ok.

One working solution is to integrate share buttons and the URL the user shares with them has

target="_blank" 

attribute. That way the URL will always open in a new browser window, instead of the embedded one.

The other thing you can do is to determine if the URL is opened with embedded browser and if so - to offer the user to sign it with Facebook instead of Google. This works batter in my case. At least for now...

const isEmbeddedBrowser = /FBAN|FBAV|FBMS|FB_IAB|FB4A|FBAN\/Messenger/.test(navigator.userAgent);

then you can conditionally render a Facebook sign in button or the Google one