Help getting Auth data after callback on Ionic InAppBrowser window

[rameerez]

First of all, thank you (thank you!) for creating and developing angular2-token. It works flawlessly and it makes my life so much easier.

I'm using a RoR backend with devise_token_auth as recommended. I'm writing an Ionic 3 (Angular 4) application for the frontend, and everything works wonderfully with email signup/login.

I now want to add Instagram OAuth login for my app, which should be a no brainer in a regular Angular web app, but here in Ionic I don't have control over routing or URLs, so the strategy to go is to launch an InAppBrowser and set events on it to detect when it reaches the callback URL.

Everything ok up to this point. I detect the callback URL (http://myapi.com/omniauth/instagram/callback?code=57...) being loaded on the browser and at this point the backend has successfully created my user. The problem is, how do I get angular2-token to store and manage the auth-token, client, uid and all that?

I've tried calling processOAuthCallback() after detecting the callback URL, but it raises an error: TypeError: null is not an object (evaluating 'this.activatedRoute.queryParams').

Does the callback URL response carry the auth-token, client, uid and expiry fields in the header? I don't mind implementing my own processOAuthCallback function or tweaking angular2-token to make it work, but I feel really lost with this issue 😓

I would appreciate any help or ideas. Thanks!

[chadnaylor]

We just spent the last week working through this. I ended up forking angular2-token and adding a bit of my own logic.

Due to the peculiarities of the inAppBrowser, when you get to the callback url you need to grab the auth params from the browser window with requestCredentials(). Angular2-token doesn't handle this by default yet...I might submit a PR with fixes soon if people are interested, but here's a snippet that might help you: (I think getAuthDataFromPostMessage is a private method in angular2-token, you may need to do some tweaking as necessary to make things work for you)

let browser = this.inAppBrowser.create(
        authUrl,
        '_blank',
        'location=no'
      );
browser.on('loadstop').subscribe((ev: InAppBrowserEvent) => {
        if (0 === ev.url.indexOf('<<YOUR API CALLBACK URL HERE>>')) {
          browser.executeScript({code: 'requestCredentials();'})
            .then((credentials) => {
              // alert(JSON.stringify(credentials[0]));
              this.getAuthDataFromPostMessage(credentials[0]);

              let pollerObserv = Observable.interval(400);

              let pollerSubscription = pollerObserv.subscribe(() => {
                if(this.userSignedIn()){
                  pollerSubscription.unsubscribe();
                  browser.close();
                }
              });

            })
        }

      });

[hrangel]

Just made a PR with the updated version of angular-token: #488