Google OAuth, Error 403: dissallowed_useragent, due to opening the login from a webview

[louisgv]

By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.

Describe the problem

My auth0-react for web implementation is working fine for normal usage (I'm using this flow: https://auth0.com/docs/flows/authorization-code-flow-with-proof-key-for-code-exchange-pkce )

However, the following case failed:

1. Share a protected page on linkedin or twitter
2. User click on the link, it opens in an in-app browser/WebView
3. They tried to login with Google
4. Failed and the following error is shown:

I asked the user to try signup again with an email/password pair, and that worked, so this is definitely just the OAuth configuration.

What was the expected behavior?

Best behavior:

1. User is logged into the app without error

Work-around behavior:

1. User upon clicking the sign-in with google, auth0 should force the in-app browser to open the auth page on a native/system browser
2. User signin and continue using the app on the web

Reproduction

Described above.

Environment

Please provide the following:

• Version of auth0-react used: 1.4.0
• Which browsers have you tested in? LinkedIn in-app browser
• Which framework are you using, if applicable (Angular, React, etc): React
• Other modules/plugins/libraries that might be involved: NextJS

[adamjmcgrath]

Hi @louisgv - thanks for raising this

User upon clicking the sign-in with google, auth0 should force the in-app browser to open the auth page on a native/system browser

Firslty, trying to change how the Universal Login page behaves is outside the scope of this SDK.

Secondly, there's no way for the Universal Login Page to "force the in-app browser to open the auth page on a native/system browser", it's just a web page - there are no browser APIs to do this.

The Native app (in this case LinkedIn) would need to open the web page in the system browser if you want to login to Google in that web page.

[louisgv]

Thanks @adamjmcgrath for the clarification! Would it be possible to discuss a workaround that I implement (or this library can implement) prior to handing off to the Universal Login page?

My thought is that the library can try to look at the user-agent before redirecting to the Universal Login page, then maybe have a params to tell universal login page to not show Google login (or any login method that block in-app browser), OR prompting the user to open their system browser?

I have been looking for a solution for this for about a week, and so far couldn't figure out a good way. Especially when I do not control the native app (LinkedIn, Facebook, Twitter, etc...), and user do want to share links on these social network.

Another work-around, is to implement a native app version and initiate deep-link instead. However this is way out of scope for my project at the moment...

I found some snippet that we can investigate:

• https://salesforce.stackexchange.com/questions/298652/not-able-to-open-link-with-default-browser-in-safari-ios
• https://stackoverflow.com/questions/7930001/force-link-to-open-in-mobile-safari-from-a-web-app-with-javascript

[adamjmcgrath]

Hey @louisgv - I can certainly help suggest a workaround for you application.

My thought is that the library can try to look at the user-agent before redirecting to the Universal Login page, then maybe have a params to tell universal login page to not show Google login

If you're using the classic ULP, you could pass a parameter from your app, then remove 'google' from allowedConnections in your lock configuration

eg.

const { loginWithRedirect } = useAuth0;
...
if (/Some WebView UA String/.test(navigator.userAgent)) {
  loginWithRedirect({ hideGoogle: true })
} else {
  loginWithRedirect()
}

https://stackoverflow.com/questions/7930001/force-link-to-open-in-mobile-safari-from-a-web-app-with-javascript

If you can force your embedded browser to open a link in system browser you would still need to complete login on the same browser you initiated it on the page on your app you return to needs to check a cookie left by the page when you login. So you couldn't switch to a different browser half way through login.

My suggestion would be to prompt the user on if your application is loaded in an embedded webview, to warn them that they can't login to Google unless they switch to their system browser.

[louisgv]

@adamjmcgrath - really appreciate your thought 🙏

If you can force your embedded browser to open a link in system browser you would still need to complete login on the same browser you initiated it on the page on your app you return to needs to check a cookie left by the page when you login. So you couldn't switch to a different browser half way through login.

My thought is actually something along the line of:

1. User shares a link to a page on linkedin: app.com/page/abc
2. App checks user-agent, then try to open the system browser with the current location: app.com/page/abc while not showing a button that invokes loginWithRedirect
3. User is now on the original link on their system browser, with a signin button that invoke loginWithRedirect
4. User continue using my app on their system browser

After further research, it appears to me that this problem at the moment is unique to IOS devices, as it seem Google does allow android webview to authenticate. I dig a bit more into how I can open a system browser and found these twos:

https://github.com/huantt/force-open-browser/blob/master/index.html - force open on chrome

https://stackoverflow.com/questions/31299394/open-a-link-from-web-app-to-new-safari-window-in-ios-8

https://stackoverflow.com/a/53028249/3151192 - use an ftp hack to open safari

Hmm... I might looking at forcing chrome if they pick google.

[adamjmcgrath]

Sounds good - thanks @louisgv

I don't think there's anything for the SDK to do here, so closing

@louisgv - feel free to ping me to reopen if you disagree