Instagram WebView blocking FB Signin

Question

I have a link on my company's Instagram bio section. When a iOs user clicks the link and is redirected to my company's website via the Instagram WebView, the user cannot connect to their account via Facebook. It just redirects them back to the same page after they login through FB. This issue does not happen on Android nor on web browser - only when it's in the in-app browser.

I tried using a function to detect the the URL with window.location.url that the user is being redirected from Instagram because the link on our Instagram app has a specific 'Instagram' parameter on it. However, it doesn't look like the in-app browser is detecting the window.location.url..

Really stuck on this issue and was wondering if anyone has come across something similar.

Answer 1

The way most social authentications works out of the box is usually popping up a window.

Most iOS native applications (the ones I encountered) like Reddit, or Instagram does not allow pop up windows.

The solution is to use a one page flow for authentication.

For example if you're using Facebook auth, instead of the auth button popping up a window dialog for authentication you would replace the current window.location with

https://www.facebook.com/v2.10/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}

Once the user successfully gives the permission the redirect_uri will redirect the user back to your site with parameters you can use to retrieve the access token

See Facebook docs for reference https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow