Ionic 2: Auth0 integration with auth0lock V10 rc2

Ionic Framework ionic-v3
1

Has anyone gotten this to successfully work?

I have it working on my PC with ionic serve but there seems to be an issue with the redirectUrl in Android. Currently the redirectUrl is set to window.location.href (default). This works fine in the browser because the redirect is to localhost. But on Android it is redirecting to

Not allowed to load local resource: file:///android_asset/www/index.html

Does anyone see a workaround for this?

Thanks!

I am on Android 6.0

2

Although you are using Auth0, this appears to be the same issue you will face with plain JavaScript-based OAuth when installed on devices. Your InAppBrowser is being redirected to its origin, which is a file-based URL, by the remote auth provider, which is not allowed (possible security risk). For devices, you need to instead call the OAuth provider in a new (“_blank”) window, then handle that window’s loadstart event, parsing the URL before closing it. In that case the file URL won’t matter since the window will be closed before it actually tries to load the file. So users never actually leave the original window; the auth redirect happens in the _blank window.

I previously posted a reply on this topic with some sample code:

Also, Nic Raboy has a good blog post on the subject (using Facebook as provider) here:

hope this helps.

1 Like
3

This is really helpful. Thanks! I will try this out and see how it goes.

4

I’m sorry, must correct myself. I forgot I hadn’t created the device version yet in that old post I referenced.

I think you do need to set the redirect to localhost, even though your app is at the file URL. It will cause a 404 since you’re not running a webserver on your device, but it doesn’t matter because the URL is what you want for the token and the window is closed before the 404 is visible. So my current version has it like this. It returns the token asynchronously as an Observable.

// (in authParams):
redirect_uri: web ? window.location.origin : "http://localhost",

// ... (calling the remote URL from device:)
      else {
        var tokenObs = Rx.Observable.create(function (sub) {
          var wref = window.cordova.InAppBrowser.open(authUrl,'_blank', specs);
          wref.addEventListener('loadstart', function(event) {
            if (event.url.indexOf('http://localhost') === 0) {
              var hf = event.url.substring(event.url.indexOf('#'));
              // now extract token from event.url, then close popup window.
              calr.parseToken(hf);
              wref.close();
              sub.next(calr.token);
            }
          });     
        });     
        return tokenObs;
      }