I recently learned that Google Oauth is not allowed in webviews. Meaning that if you let's say have an app foo.com that uses google Oauth and you sent foo.com via Instagram to a user.
That user will not be able to log in since Instagram/Tiktok/Gmail and many other social media sites open links using their in-app browser.
I also learnt the hard way that ADs also open using the in-app browser, meaning that users who clicked the ads essentially met a dead end while trying to log in.
I have been thinking of ways around this:
- Have foo.com force the login page to open in the native browser. I haven't found a solution to this.
- Some manual redirection to google oauth.
- Tell the user that their browser is not supported and they have to open it manually. (least suitable)
- Rebuild the authentication system to have native username and passwords.
Here is a sample code:
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
