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.

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.

• javascript
• android
• react-native
• webview
• oauth-2.0

• What is the redirect uri you have used? Also when you get the 404 what is the link in the webview? – Tarun Lalwani Commented Nov 6, 2017 at 4:57
• @TarunLalwani The redirect uri is app.<app_name>.com/auth and the scheme is https .The link in the web view is the same as well – Surendhar E Commented Nov 6, 2017 at 12:32
• Please provide me the source code and assign me the job. – Codesingh Commented Nov 6, 2017 at 16:24
• @Codesingh I can give you specifics of the issues – Surendhar E Commented Nov 6, 2017 at 17:29
• ok i'm looking forward for it – Codesingh Commented Nov 6, 2017 at 18:01

2 Answers 2

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>

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.