CODEWITHSUNDEEP
react-nativewebviewfacebook-logingoogle-signinreact-native-webview
Falay
Falay

Reputation: 63

React Native Webview social authentication

I am trying to build an iOs mobile application for a website with webview in React Native.

I am using the library ('react-native-webview') in the expo-cli project. Everything seems so good so far. And maybe it is because I am new to webviews but I could not figure out some problems. The website I am working on has options of 'Login With FB' and 'Login with Google' and they work fine on safari or on the other web browsers.

For Facebook login, the website opens a new tab on Facebook, and when users login in to the new tab it closes the tab and gets back to the login page of the website then logs in perfectly. But in the webview it does not open a new tab for FB login and that is why (i think) it fails to login to the website with Facebook. It just returns the login page of website in the webview but doesn't login like as if it has no effect.

For Google login, the same concept as FB login. But in google login it says "error 403: disallowed_useragent" I believe I have to specify userAgent or applicationNameForUserAgent for webview but I do not know how to do these. Especially in expo-cli application.

I searched the web for days and couldn't find a solution to my problem. It seems like it has some easy fix. But as I said I'm new to it. Any help would be appreciated. Any explanation would make me grateful. :)

Upvotes: 6

Views: 10477

Answers (3)

donkey
donkey

Reputation: 544

<WebView
    source={{ uri : initurl}}              
    userAgent="Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko"
    originWhitelist={["https://*", "http://*", "file://*", "sms://*"]}
/>

This code work for me

Upvotes: 7

vyppN
vyppN

Reputation: 67

You must connect WebView to Expo by onMessage and postMessage and let the Expo handle the auth for you (in native approach) then post back the credential to webpage

For iOS: Use the custom Expo client. If you use standard Expo client you can't integrate Facebook login with Firebase

I wrote some instruction here: https://medium.com/@chwrtokuma/expo-webview-facebook-authentication-with-firebase-2b864c031340

If you use only Facebook auth without integration with firebase, just post the facebook logged in data to your web page.

Upvotes: 0

Rakesh Medpalli
Rakesh Medpalli

Reputation: 474

Instead of react-native-webview you can use the below links for social sign in.

For Google sign in - https://docs.expo.io/versions/v38.0.0/sdk/google/

For Facebook sign in - https://docs.expo.io/versions/v38.0.0/sdk/facebook/

For web browser based authentication - https://docs.expo.io/versions/latest/sdk/auth-session/

Upvotes: 1

Related Questions