ng-token-auth with Ionic Framework/Cordova

[Liampronan]

Hello!

I'm using ng-token-auth + devise-token-auth for an app I'm working on, and it's working great for the browser version of my site. My auth flow uses twitter oauth. I'm attempting to use the same auth code for Ionic/Cordova on mobile, but am running into issues with the log-in flow: after hitting the omniauth callback, my app stays on the 'redirecting...' screen.

I believe the issue is with the Cordova app window and the new window that is opened by ng-token-auth. I'm thinking that a solution would be to implement ng-token-auth with the InAppBrowser Cordova plugin, but wanted to check to see if anyone has run into something similar and/or has any ideas.

Any help would be greatly appreciated!

[lynndylanhurley]

@Liampronan - this could be an issue with Cordova and postMessage.

There is an undocumented config option called forceHardRedirect - try setting it to true and see if that solves the issue.

Example

angular.module('myApp', ['ng-token-auth'])
    .config(function($authProvider) {
        $authProvider.configure({
            apiUrl: 'http://api.example.com',
            forceHardRedirect: true
        });
    });

[joannatdl]

@Liampronan I have the same issue.

And the solution suggested by @lynndylanhurley is not helping - in the mobile app we are not allowed to make redirections.

@Liampronan is probably right abut the InAppBrowser Cordova plugin. I have found another repo that enables facebook registration also for Cordova apps: https://github.com/ccoenraets/OpenFB
We can read in the readme:

"The library works for both browser-based apps and Cordova/PhoneGap apps. When running in a browser, the OAuth URL redirection workflow happens in a popup window. When running in Cordova, it happens inside an "In-App Browser"."

[Liampronan]

@rajaaa92 Agreed. I actually was able to get a quick, working solution using the IAB plugin and some slight workarounds. The login flow is:

1. Set up an IAB browser directed at your auth URL (instead of using the ng-token-auth $auth.authenticate)

2. Configure the rails omniauth success callback to send the auth info inside the success template (you can set css display: hidden so that the template still only shows the user "Redirecting...")
   [note: I didn't spend much time looking into it, but could not get the ng-token-auth postMessage JS to fire inside the IAB, which is why I included the auth info in the template)

3. Set up an event handler on the IAB browser to:
   i) grab the auth info from the template
   ii) manually call $auth.handleValidAuth with that auth info
   iii) close the window
   [note: http://stackoverflow.com/questions/23930744/how-to-use-google-login-api-with-cordova-phonegap/23931392#23931392 is an example of similar oauth and IAB login/window closing]

This will pass the auth info to ng-token-auth and allows it to work with devise-token-auth to make authenticated requests. However, this just handles the initial login, so I will probably have to update it for re-authentication..

Any thoughts on this approach?

@lynndylanhurley thank you for the suggestion! that did not work, but it's really more of an issue with cordova than this library. ng-token-auth and devise-token-auth are extremely useful and awesome!

[lynndylanhurley]

@Liampronan - thank you for posting this.

I'm obviously not very familiar with Cordova. In your experience, is there anything that this module can do to provide better support?

[RobGoretsky]

@Liampronan - I'm also working on a Cordova app (using the Ionic framework) and was hoping to use ng-token-auth (client side) and devise-token-auth (server side) but realized that i'd hit the same issues you are describing when trying to get through an oauth flow like the one required for facebook login. The approach you described sounded promising - did you end up getting it all to work?

[Liampronan]

@RobGoretsky yes, it did! it's a bit of a non-perfect workaround, but definitely works..

https://gist.github.com/Liampronan/9ca625d33e987f0be0f8 -> link to gist to give you a better idea of the implementation. I'd really love to fork ng-token-auth with a more robust fix for cordova, but am a bit busy atm. definitely reach out with any questions -- I'm happy to help

[lynndylanhurley]

@Liampronan - if you send me a PR for this (with tests!) I'll merge ASAP.

[RobGoretsky]

@Liampronan - Thanks for passing along this Gist, it's incredibly helpful! You mentioned that in addition to this code on the client side, you also configured the 'rails omniauth success callback to send the auth info inside the success template'. I'm guessing you mean that you overrode, within devise token auth on the server side, either app/views/devise_token_auth/omniauth_success.html.erb and/or app/views/layouts/omniauth_response.html.erb .. How did you manage to get those overridden templates to be applied without rewriting much of the controller code? Can you share a sample from that end as well? Thanks again!

[Liampronan]

@RobGoretsky Yup, I overrode the omniauth_response.html.erb view. I just put the following code in the view in a p tag:
<%= @auth_origin_url %>

the instance var, @auth_origin_url, is built in the devise token auth omniauth_callbacks_controller and is a url containing the token, client id, uuid, and token expiry for the user -- no controller code needs to be re-written, hooray!! (unless you want to send extra info)

you can then just regex the params from that url that is included in the response. if you're feeling extra nifty, you can even hide the @auth_origin_url with css, so the user doesn't see it in the response.

@lynndylanhurley added to my todo list!

[dtelaroli]

+1

[davidtlee]

@Liampronan - really appreciate you sharing your approach. I'm trying to do the same thing and having trouble. Was wondering if you'd be willing to help me see if I'm missing something. The following things seem to be working:

• A new browser window is launching
• I see the auth_origin_url after signing in (which looks something like: http://localhost:3000/#?client_id=8lzlsqazJhmGtSNu--YUbA&expiry=1426822518&token=6w3ZIV0kw_WCGq7ZBe4SUQ&uid=108633578503144270402)

However, the window doesn't close and the signin information doesn't get passed. Some simple logging indicates that the eventListener is never firing (I have a console.log statement within the eventListener which isn't going off). Not sure if there's something simple I'm missing. Here's my code:

I added the following in omniauth_response.html.erb:

    <p>
      <%= @auth_origin_url %>  
    </p>

I used the gist you provided with small modifications (not sure if I did the stubUrl correctly):

      //stubUrl to get around angular url '#' check on the backend (via devise_token_auth)
      this.stubUrl = "http://localhost:3000/";
      this.authUrl = $auth.apiUrl() + '/auth/google_oauth2/?auth_origin_url=' + _this.stubUrl;


      this.login = function(){
        var deferred = $q.defer();
        //open IAB window
        var browserWindow = $window.open(_this.authUrl, '_blank', 'location=no');
        console.log("just opened");

        // listen for IAB window finish loading
        browserWindow.addEventListener( "loadstop", function() {
          console.log("In loadstop callback");
          //grab linkedin authcode from url response
          getAuthCodeFromResponse(browserWindow)
            .then(function(success){
              deferred.resolve();
            }, function(err){

            })
        });
        return deferred.promise
      }

Really appreciate any advice you can give!

@RobGoretsky - did you end up getting it to work too?

[RobGoretsky]

@davidtlee - I did end up getting this to work! I was stuck around the same spot as you (seemed that the eventListener was not firing) but then I realized that the In App Browser plugin only fires that even when running within the emulator (not within the web browser on desktop).. Have you tried running this within the iOS emulator?

[davidtlee]

Hey @RobGoretsky, thanks for the help!

I gradually realized the same thing as you and did end up running it on the iOS emulator, but have been getting another strange problem. It sometimes launches the inappbrowser, but sometimes doesn't. I tried tracking it down, but sometimes it's working and then stops working after just commenting out a console.log statement....

When it's working, this is what I see in the console.log file:

2015-03-06 08:49:45.420 HelloWorld[22930:3829995] Resetting plugins due to page load.
2015-03-06 08:49:45.643 HelloWorld[22930:3829995] Finished load of: file:///
2015-03-06 08:49:47.379 HelloWorld[22930:3829995] Setting the WebView's frame to {{0, 0}, {375, 623}}
2015-03-06 08:49:47.386 HelloWorld[22930:3829995] THREAD WARNING: ['InAppBrowser'] took '190.662109' ms. Plugin should use a background thread.
2015-03-06 08:49:47.402 HelloWorld[22930:3829995] just opened
2015-03-06 08:49:48.895 HelloWorld[22930:3829995] In loadstop callback
2015-03-06 08:51:06.584 HelloWorld[23158:3830878] Apache Cordova native platform version 3.8.0 is starting.
2015-03-06 08:51:06.586 HelloWorld[23158:3830878] Multi-tasking -> Device: YES, App: YES
2015-03-06 08:51:06.588 HelloWorld[23158:3830878] Unlimited access to network resources
2015-03-06 08:51:06.590 HelloWorld[23158:3830878]

When it's not working, this is what I see:

2015-03-06 08:51:06.973 HelloWorld[23158:3830878] Resetting plugins due to page load.
2015-03-06 08:51:07.186 HelloWorld[23158:3830878] Finished load of: file:///
2015-03-06 08:51:08.836 HelloWorld[23158:3830878] Resetting plugins due to page load.
2015-03-06 08:51:10.288 HelloWorld[23158:3830878] Finished load of: http://synapp-chat-prod-123.herokuapp.com/api/auth/google_oauth2/callback
2015-03-06 08:51:36.444 HelloWorld[23378:3831486] Apache Cordova native platform version 3.8.0 is starting.
2015-03-06 08:51:36.446 HelloWorld[23378:3831486] Multi-tasking -> Device: YES, App: YES
2015-03-06 08:51:36.449 HelloWorld[23378:3831486] Unlimited access to network resources
2015-03-06 08:51:36.453 HelloWorld[23378:3831486]

Did you ever have similar problems? When looking on stackoverflow, it seemed like there might be a problem related to XCode 6?

[krk324]

I'm also having same issue. Have anyone figured out the solution?

[davidpatrick]

I was able to solve this using the InAppBrowser's executeScript. Then I handle the return from the executeScript to store the user into $auth and I then emit a successful login. The way I set it up allows my web app and my mobile app to both talk to the same OAuth endpoint.

login_controller.js

angular.module('app.controllers.home', [])
.controller('HomeCtrl', function(loginService){
  $scope.login = function(){
    loginService.authenticate()
  };
});

login_service.js

angular.module('app.services.login', [])
.service('loginService', ['$rootScope', '$q', 'RESOURCES', '$window', '$auth',
  function ($rootScope, $q, RESOURCES, $window, $auth) {
    var _this = this;

    this.originUrl = $window.location.origin;
    this.authUrl = RESOURCES.baseUrl + RESOURCES.signInUrl + _this.originUrl

    this.authenticate = function() {
      var defer = $q.defer();
      var browserWindow = $window.open(_this.authUrl, '_blank', 'location=no');

      browserWindow.addEventListener('loadstop', function(event) {
        if (event.url.match(RESOURCES.baseUrl)) {
          browserWindow.executeScript(
            { code:'getCredentials()' },

            function(response){
              var rsp = response[0];

              if (rsp.message == 'deliverCredentials') {
                var user = rsp.data;

                // Set the user in ng-token-auth
                $auth.initDfd();
                $auth.handleValidAuth(user, true);

                // emit a successful login
                $rootScope.$emit('auth:login-success', user)
                defer.resolve(user);
              } else {
                $rootScope.$emit('auth:login-error', rsp.error)
                defer.reject(rsp.error);
              };

              // Finished with InAppBrowser
              browserWindow.close();
            }
          );
        };
      });

      return defer.promise;
    };
  }
]);

index.html.erb

<!DOCTYPE html>
<html>
  <head>
    <script>
        var getCredentials = function(){
          return {
            message: "deliverCredentials", // required
            auth_token: '<%= @user.authentication_token %>', // required
            uid: '<%= @user.uid %>', // required
            data: <%= raw UserSerializer.new(@user, root: false).to_json %>
          };
        };

        window.addEventListener("message", function(ev) {
          if (ev.data === "requestCredentials") {
            ev.source.postMessage(getCredentials(), '*');
            window.close();
          }
        });
    </script>
  </head>
  <body>
    <h3>
      Thanks you for signing up! Please close this window if it does not close automatically.  
    </h3>
  </body>
</html>