Redirection to a mobile app from the webview of the app itself in React Native

Question

I'm building an android application which requires authentication from an external auth provider.So I'm using react-native-oauth package to handle this.

The redirect_uri defined is a deep link which should ideally open my app itself after successful authentication.But the WebView seems to not handle this redirection and I'm getting response as 404-page not found.

This is the service that I have written to handle the auth:

    const manager = new OAuthManager('<app_name>')

    manager.addProvider({
         'provider': {
                  auth_version: '2.0', 
                  authorize_url:'<auth-url>',
                  access_token_url: '<auth-url>/token',
                  callback_url: 'http://localhost/provider',
         }
    });

    manager.configure({
       provider: {
           client_id: '<id>',
           client_secret: '<secret>',
           redirect_uri: '<redirect-uri>' //DEEP LINK HERE
      }
    });
   module.exports = {
      authManager: () => {
      manager.authorize('<provider>')
                        .then(resp => console.log(resp))
                        .catch(err => console.log(err));    
                    }
   }

Also I have defined my intent-filter as specified in the Android docs on how to declare the deep links for your apps.The deep link works fine when opened with Linking.openURL() from the app components.

Any help in this is much appreciated.

What is the redirect uri you have used? Also when you get the 404 what is the link in the webview? — Tarun Lalwani, Nov 06 '17 at 04:57
@TarunLalwani The redirect uri is app..com/auth and the scheme is **https** .The link in the web view is the same as well — Surendhar E, Nov 06 '17 at 12:32
check this question https://stackoverflow.com/q/38991019/2809351 — Lalit Jadav, Nov 08 '17 at 13:14
you can use this strategy: https://stackoverflow.com/questions/25672330/how-to-enable-deep-linking-in-webview-on-android-app. This is the native code but you can do the same thing in react-native also using callbacks like onLoadStart. — Ankit Aggarwal, Nov 10 '17 at 11:48
I wouldn't use this library because it asks you to store secret keys on client side. — Nedim Talovic, Jan 03 '19 at 00:19

score 13 · Answer 1 · answered Nov 10 '17 at 14:51

You can't directly set redirect_uri to your mobile app ( because most auth providers doesn't support custom OAuth scheme ).

But you can create some web page that will accept redirect from OAuth providers and will open your app ( and send all redirect params, like token ).

For example you create page https://example.com/oauth/, and set callback_url to https://example.com/oauth/XXXXX_provider, so when user will be redirected to page https://example.com/oauth/XXXXX_provider&token=xxx it will open you app using appName://example/oauth/google?token=xxx

You can handle appName://example/oauth/google?token=xxx using Deeplink ( it will open your mobile app when it is installed on device )

Example of page to handle redirects:

<html><head></head><body>
<p>Please wait while we redirect you to Your APP NAME...</p>
<p><a href="javascript:redirectToApp()">Open appname</a></p>
<script>
  var redirectToApp = function() {
    var scheme = "appnameapp";
    var openURL = "appname" + window.location.pathname + window.location.search + window.location.hash;
    var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    var Android = /Android/.test(navigator.userAgent);
    var newLocation;
    if (iOS) {
      newLocation = scheme + ":" + openURL;
    } else if (Android) {
      newLocation = "intent://" + openURL + "#Intent;scheme=" + scheme + ";package=com.appnameapp;end";
    } else {
      newLocation = scheme + "://" + openURL;
    }
    console.log(newLocation)
    window.location.replace(newLocation);
  }
  window.onload = redirectToApp;
</script>


</body></html>

I created something like this. It avoids all mess with RN libraries such as `react-native-fbsdk` and `react-native-google-signi`. This way, you can implement everything on a server-side and pass an API token to your mobile app with a deep link. — Nedim Talovic, Jan 03 '19 at 00:24

score 3 · Answer 2 · answered Nov 11 '17 at 10:07

WebView by default doesn't share cookies/session data with Safari/Chrome. So it is not ideal for login flow since it doesn't use the existing logged in session in Chrome/Safari.

Expo provides a WebBrowser api that will open Safari/Chrome instead of webview. Note that it opens Safari/Chrome inside the app, instead of redirecting you the browser using Linking. So users always have a button in the browser to get back to your app.

You can use WebBrowser.openAuthSessionAsync(url) to open a secure session which shares cookie/session info with the native browser in the device.

Expo also provides another api called AuthSession that simplifies a lot of boilerplate and provides a simple api.

Redirection to a mobile app from the webview of the app itself in React Native

2 Answers2