How to avoid 403 disallowed_useragent error in a web app from 3rd party native app

Question

I would like to let my users login with Google on my react web app (secured with Auth0), even if they come from a native app. I did add a social connection for oauth in auth0 dashboard and it's working fine on desktop. But the security policy of Google from 2017 forbids to use Oauth request inside a webview, so users coming from a native app and trying to signin with Google, get the following error 403: disallowed_userAgent

Steps to reproduce :

1. Send a msg in LinkedIn containing this link stackoverflow.com (or any other link that redirects to a website with a Google sign-in)
2. From the native LinkedIn app, click on the link and login via Google sso (login or sign up, no matter)
3. Click the connect button of Google sign-in and see the error arise

And this is reproductible on Facebook, Messenger, Twitter native apps.

Any secured website that want to use Google sign-in must encounter this issue when users navigate from a social native app.

The solutions I've found so far are:

• (A) Recommended by Google: create my own native application and then make a fully integrated authentication (fully Google policy compliant). But it is really time consuming to do so, I do not want to create a native app for now.
• (B) Make a user agent spoofing on the webview but it means that I can control it and I don't have any power on this since it is a third party app (LinkedIn & co)
• (C) Hide Google login if useragent contains a "android" or "iPhone" string. Pintesrest did this. But it is not a very satisfying solution since a lot of users would prefer using Google login and could not. Plus, I'm note sure this is possible with Auth0.
• (D) Make a deferred deep link to force open a chrome/safari app from my react webapp. But I still want to inject an url and search for it afterwhile, as a window.open(url) would do. I can't find a way to do both actions. Is it even possible?

Any other idea? Maybe another service than Auth0 handle this issue better?

I tried to:

• force opening the link within Chrome app using window.open("chrome:https//example.com") and other variations of it but did not work.
• make a user-agent spoofing but it seems to be changed in the navigator prompt and then it is set again when I'm redirected from Auth0 login to Google login. Plus, user-agent is supposed to be read only so I think this is not a good lead. However, I noticed that user-agent, on iphone users redirected from LinkedIn app with Solers.io, contains "LinkedInApp" while Android users don't. Thus, for this particular case of Solers.io in LinkedIn, only IOS devices will rise the error. That makes me think that it would probably exist a solution around user agent spoofing but it's not in our hands (browser's hands or social native apps hands or both?)

Answer 1

It is not possible to let users login with Google SSO when they're browsing through native app. If you do so, you'll have the 403 disallowed_userAgent error.

But I found way to disable Google SSO when user is browsing through native app so that the error cannot arise, using Auth0. To do so, create 2 applications in your tenant in auth0 and redirect to the right one within your own web app. Authorize Google SSO only on one of the two applications.

The code below redirect a user browsing through Iphone to the application where SSO is disabled so that user won’t have the error pop (since this error occur only on iphones in my case). Look at user agent to make it match to your case.

if (navigator.userAgent.match(/iPhone/i)) {
    return process.env.REACT_APP_AUTH0_MOBILE_CLIENT_ID; // Google SSO is disabled
  } else {
    return process.env.REACT_APP_AUTH0_CLIENT_ID; // Google SSO is enabled
}