Ionic 2 and Devise Token Auth Facebook Login

[seanmiddaugh]

How would one go about getting this to work with an Ionic 2 application? It seems everything is working through the browser but fails when I try to proceed with Facebook login through Ionic. Here's my Ionic 2 code to Login:

doFacebookLogin() {
    let objThis = this;
    this.fb.login(['public_profile', 'email'])
      .then(function (response) {
        objThis.authService.tryFacebookLogin(response.authResponse).subscribe(
          responseNow => objThis.loginSuccess(responseNow),
          error => console.log(error)
        );
      }, function (error) {
        console.log(error);
      });
  }

tryFacebookLogin(objParams) {
    return this.http.get(
      this.apiService.createUrl('auth/facebook'),
      this.apiService.getGetOptions(objParams)
    ).map((res) => this.apiService.extractData(res)).catch(this.apiService.handleError);
  }

And my logs from Heroku:

[d9350f73-4cbc-400c-8296-0248b2454a64] Started GET "/api/auth/facebook?accessToken=EAAFDh9WxI34BAEpTy54mVhiZCUtGDcCdQgHg8yYxIfHCk0iciDUZCsrkZAdu9SJ8vCLMZChgt7QoGZBkzvWzNkFFLhwJEcCrxtRo9dJ8ioOsErwM8h2Kv8dileZAjACZAheVg7nIxd7gKX1kZALdY2Ve7rwFxLeg0eKCYfZBBHGkjaZALkwLY1tEktsKYfrBNAR6wii2LZBoQtUEKe0Acc8ZD&expiresIn=5107217&session_key=true&sig=...&userID=xxx" for 184.145.16.206 at 2017-09-27 17:08:41 +0000
2017-09-27T17:08:41.505526+00:00 app[web.1]: [3c08d61c-4c30-4361-902a-cee8e15b63bc] Started GET "/omniauth/facebook?accessToken=EAAFDh9WxI34BAEpTy54mVhiZCUtGDcCdQgHg8yYxIfHCk0iciDUZCsrkZAdu9SJ8vCLMZChgt7QoGZBkzvWzNkFFLhwJEcCrxtRo9dJ8ioOsErwM8h2Kv8dileZAjACZAheVg7nIxd7gKX1kZALdY2Ve7rwFxLeg0eKCYfZBBHGkjaZALkwLY1tEktsKYfrBNAR6wii2LZBoQtUEKe0Acc8ZD&expiresIn=5107217&namespace_name=api&resource_class=User&session_key=true&sig=...&userID=xxx" for 184.145.16.206 at 2017-09-27 17:08:41 +0000
2017-09-27T17:08:41.507171+00:00 app[web.1]: I, [2017-09-27T17:08:41.506900 #4]  INFO -- omniauth: (facebook) Request phase initiated.

Through the app, it seems to die at INFO -- omniauth: (facebook) Request phase initiated. every single time. It never proceeds to the callback.

Any ideas? Thanks!

[zachfeldman]

Hey @seanmiddaugh - have you tried setting this up locally before deploying to Heroku? If you do, you might be able to override the devise_token_auth controller methods and get a much better idea of why things are failing for you.

[seanmiddaugh]

@zachfeldman thanks for the response. Maybe this will lead to something. I'm now seeing the following which is the cause of it not hitting the callback:

Failed to load https://www.facebook.com/v2.6/dialog/oauth?client_id=xxx&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fomniauth%2Ffacebook%2Fcallback&response_type=code&scope=email&state=38692a16e5be09675fgfca5a7e5522adf3a5283c724ed418f6: Response for preflight is invalid (redirect)

I've tested this on my Heroku server too and I'm getting the exact same response. Any ideas? I think I'm closer.

[seanmiddaugh]

@zachfeldman am I approaching this social login correctly?

[zachfeldman]

@seanmiddaugh sorry but I don't write Ionic apps so I'm not sure I can help you much further :(. Have you tried looking for sample Ionic 2 implementations for social login?