function is broken when user is using facebook mobile browser and instagram mobile browser in IOS

[cheong12001]

When i using IPhoneX with IOS 12.1.2, user can't finish the login procedure in my website within the Facebook App and Instagram App. The Popup window and login screen can successfully appear, after entering the username and password, the screen redirect to a loading indicator and stop here. The Facebook login component encounter the same problem too.

[ghost]

@cheong12001 same here; have you managed to find a workaround?

[abarrafo]

Login via the Facebook Mobile app is still broken on Pixel 3 and Iphone X. Users get stuck on a white screen with account.google.com at the top.

[ghost]

same here...!!!! is there any solution??

[zehawki]

FYI: Google has blocked OAuth authorization requests via web views

[DarrenKwonDev]

if you use react-native webview then set custom user-agent to solve this issue. but in pure react, you can't use do this...

[ddjain]

Facing the same problem, can't we enforce to use default web-browser instead of web views?

[AlexRex]

Hi, for anyone coming here for a solution. The unique way to solve this without relying into callbacks from google is pushing the user to the native browser in the phone. In order to do, we need to do two things:

1. Detect the user agent of the user's browser is in Instagram/Facebook/other
2. If so, create a link with the download tag, the same URL, and programmatically click it

  const instagramLink = React.useRef()

  React.useEffect(() => {
    if (instagramLink.current) {
      instagramLink.current.click()
    }
  }, [instagramLink.current])

  if (navigator.userAgent.toLowerCase().includes('instagram')) {
    return (
      <a ref={instagramLink} href={window.location.href} target='_blank' download>Open in browser</a>
    )
  }

I hope it helps.