Issue with devise_token_auth and logging in with Facebook?

Question

I'm using devise and devise_token_auth along side each other. I have an Ionic 2 application that I'm attempting to login via Facebook with. Right now, the email/password authentication is working fine. Here's some of my code.

# initializers/devise_token_auth.rb
config.enable_standard_devise_support = true

# initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, 'xxxxx', 'xxxxx', scope: 'email', info_fields: 'email,first_name,last_name'
end

# app/models/user.rb
devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,
         :omniauthable, :omniauth_providers => [:facebook, :google]
include DeviseTokenAuth::Concerns::User
devise :omniauthable

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session, if: -> { request.format.json? }
  include DeviseTokenAuth::Concerns::SetUserByToken
  # Allow other fields to be passed up on registration.
  before_action :configure_permitted_parameters, if: :devise_controller?
  def after_sign_in_path_for(resource)
    users_path
  end
  def authenticate_admin
    unless current_user && current_user.role == 'admin'
      flash[:error] = "Not Authorized"
      redirect_to root_path
    end
  end
  protected
  # Allow other fields to be passed up on registration.
  def configure_permitted_parameters
    # Permit the default plus the following.
    devise_parameter_sanitizer.permit(:sign_up, keys: [:subscribed])
  end
end

# config/routes.rb
devise_for :users, controllers: { :sessions => "users/sessions" }

namespace :api do
    namespace :v1 do
      mount_devise_token_auth_for 'User', at: 'auth'
    end
end

user_facebook_omniauth_authorize_path | GET\|POST | /omniauth/facebook(.:format) | devise/omniauth_callbacks#passthru
-- | -- | -- | --
user_facebook_omniauth_callback_path | GET\|POST | /omniauth/facebook/callback(.:format) | devise/omniauth_callbacks#facebook
user_google_omniauth_authorize_path | GET\|POST | /omniauth/google(.:format) | devise/omniauth_callbacks#passthru
user_google_omniauth_callback_path | GET\|POST | /omniauth/google/callback(.:format) | devise/omniauth_callbacks#google
GET | /api/v1/auth/:provider/callback(.:format) | devise_token_auth/omniauth_callbacks#omniauth_success
-- | -- | --
  | GET\|POST | /omniauth/:provider/callback(.:format) | devise_token_auth/omniauth_callbacks#redirect_callbacks
omniauth_failure_path | GET\|POST | /omniauth/failure(.:format) | devise_token_auth/omniauth_callbacks#omniauth_failure
  | GET | /api/v1/auth/:provider(.:format) | redirect(301)

And in my Ionic 2 app is the following

doFbLogin() {
    let permissions = ["public_profile"];
    let objThis = this;
    Facebook.login(permissions)
      .then(function (response) {
        objThis.authService.tryFacebookLogin(response.authResponse).subscribe(
          responseNow => console.log(responseNow),
          error => console.log(error)
        );
      }, function (error) {
        console.log(error);
      });


tryFacebookLogin(objParams) {
    return this.http.get(
      'https://example.com/api/v1/auth/facebook',
      this.apiService.getGetOptions(objParams)
    ).map((res) => this.apiService.extractData(res)).catch(this.apiService.handleError);
  }

I've tried to modify and mess around with several configuration settings but have had no luck. When I check my server logs I consistently see this. It doesn't create a Facebook user or anything.

Seans-MacBook-Air:app-s sean$ heroku logs
2017-08-30T17:19:19.354023+00:00 app[web.1]: [d3b2de6b-3404-4f26-a29b-094630260afc]   Parameters: {"token_validation"=>{}}
2017-08-30T17:19:20.089604+00:00 heroku[router]: at=info method=GET path="/api/v1/auth/validate_token" host=myherokuapp.herokuapp.com request_id=d3b2de6b-3404-4f26-a29b-094630260afc fwd="70.51.192.141" dyno=web.1 connect=0ms service=762ms status=401 bytes=1982 protocol=https
2017-08-30T17:19:20.086908+00:00 app[web.1]: [d3b2de6b-3404-4f26-a29b-094630260afc] Completed 401 Unauthorized in 733ms (Views: 0.3ms | ActiveRecord: 0.0ms)
2017-08-30T17:19:23.299874+00:00 heroku[router]: at=info method=GET path="/api/v1/auth/facebook?accessToken=EAAFDh9WxI34BACq4ZBJcZBRKOn0wTHJioXequZBlKNN6CzP1rChH7a14SZBOw6mEkhoIXPBXVqET37ANMRMKkk17ErOp4qDMC8JEUWKIT3ph1GhRYFyWLzUQrPmSRTnEICFCkmac4tPMeptO2rHcZCKJwvOnQB0K8TENdR1a3IJZAaiWfXisjSFy01qSWM3sdXxuftkcjgLHxXYLHTEIXll3D5hMf2uOAZD&expiresIn=5180219&session_key=true&sig=...&userID=10156547461238276&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb" host=myherokuapp.herokuapp.com request_id=382104a1-2279-4d14-8bc9-0eefe57f3a45 fwd="70.51.192.141" dyno=web.1 connect=1ms service=6ms status=301 bytes=1463 protocol=https
2017-08-30T17:19:23.293472+00:00 app[web.1]: [382104a1-2279-4d14-8bc9-0eefe57f3a45] Started GET "/api/v1/auth/facebook?accessToken=EAAFDh9WxI34BACq4ZBJcZBRKOn0wTHJioXequZBlKNN6CzP1rChH7a14SZBOw6mEkhoIXPBXVqET37ANMRMKkk17ErOp4qDMC8JEUWKIT3ph1GhRYFyWLzUQrPmSRTnEICFCkmac4tPMeptO2rHcZCKJwvOnQB0K8TENdR1a3IJZAaiWfXisjSFy01qSWM3sdXxuftkcjgLHxXYLHTEIXll3D5hMf2uOAZD&expiresIn=5180219&session_key=true&sig=...&userID=10156547461238276&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb" for 70.51.192.141 at 2017-08-30 17:19:23 +0000
2017-08-30T17:19:23.356264+00:00 app[web.1]: [65adeff7-ebb7-4b9a-8c83-6d0154a4b19d] Started GET "/omniauth/facebook?accessToken=EAAFDh9WxI34BACq4ZBJcZBRKOn0wTHJioXequZBlKNN6CzP1rChH7a14SZBOw6mEkhoIXPBXVqET37ANMRMKkk17ErOp4qDMC8JEUWKIT3ph1GhRYFyWLzUQrPmSRTnEICFCkmac4tPMeptO2rHcZCKJwvOnQB0K8TENdR1a3IJZAaiWfXisjSFy01qSWM3sdXxuftkcjgLHxXYLHTEIXll3D5hMf2uOAZD&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb&expiresIn=5180219&namespace_name=api&resource_class=User&session_key=true&sig=...&userID=10156547461238276" for 70.51.192.141 at 2017-08-30 17:19:23 +0000
2017-08-30T17:19:23.356815+00:00 app[web.1]: I, [2017-08-30T17:19:23.356739 #4]  INFO -- omniauth: (facebook) Request phase initiated.
2017-08-30T17:19:23.367474+00:00 heroku[router]: at=info method=GET path="/omniauth/facebook?accessToken=EAAFDh9WxI34BACq4ZBJcZBRKOn0wTHJioXequZBlKNN6CzP1rChH7a14SZBOw6mEkhoIXPBXVqET37ANMRMKkk17ErOp4qDMC8JEUWKIT3ph1GhRYFyWLzUQrPmSRTnEICFCkmac4tPMeptO2rHcZCKJwvOnQB0K8TENdR1a3IJZAaiWfXisjSFy01qSWM3sdXxuftkcjgLHxXYLHTEIXll3D5hMf2uOAZD&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb&expiresIn=5180219&namespace_name=api&resource_class=User&session_key=true&sig=...&userID=10156582648249377" host=myherokuapp.herokuapp.com request_id=65adeff7-ebb7-4b9a-8c83-6d0154a4b19d fwd="70.51.192.141" dyno=web.1 connect=1ms service=11ms status=302 bytes=2283 protocol=https
2017-08-30T17:39:04.311735+00:00 heroku[router]: at=info method=GET path="/api/v1/auth/facebook?accessToken=df978g6hd78fg6h78d6fghaUOlH2X3NMRhbZCsiXjSbrpaSEaZBImkIzQXVeR5uqctZBBYjW0C9XSRqzXuuEz5ZCEOvkktSqJnjmJMgl7ZB4aEQDMRkACPzcSaKxZCHwV9saMLPEkgEYivJ5jWdfghdfghdfghdfghtJBJUw9ZAPkaPo6tXt1CwyCAxoCUJKjapXn4ZAGvyKnxUPCUMrRZBQSvMMZD&expiresIn=5179039&session_key=true&sig=...&userID=10156582648249377&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb" host=myherokuapp.herokuapp.com request_id=d5f155e0-624e-4ed8-b169-3e6f481b23ca fwd="70.51.192.141" dyno=web.1 connect=1ms service=4ms status=301 bytes=1471 protocol=https
2017-08-30T17:39:04.307596+00:00 app[web.1]: [d5f155e0-624e-4ed8-b169-3e6f481b23ca] Started GET "/api/v1/auth/facebook?accessToken=df978g6hd78fg6h78d6fghaUOlH2X3NMRhbZCsiXjSbrpaSEaZBImkIzQXVeR5uqctZBBYjW0C9XSRqzXuuEz5ZCEOvkktSqJnjmJMgl7ZB4aEQDMRkACPzcSaKxZCHwV9saMLPEkgEYivJ5jWdfghdfghdfghdfghtJBJUw9ZAPkaPo6tXt1CwyCAxoCUJKjapXn4ZAGvyKnxUPCUMrRZBQSvMMZD&expiresIn=5179039&session_key=true&sig=...&userID=10156582648249377&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb" for 70.51.192.141 at 2017-08-30 17:39:04 +0000
2017-08-30T17:39:04.502963+00:00 app[web.1]: [ae1670c5-1246-4566-bdf5-24724ba98520] Started GET "/omniauth/facebook?accessToken=df978g6hd78fg6h78d6fghaUOlH2X3NMRhbZCsiXjSbrpaSEaZBImkIzQXVeR5uqctZBBYjW0C9XSRqzXuuEz5ZCEOvkktSqJnjmJMgl7ZB4aEQDMRkACPzcSaKxZCHwV9saMLPEkgEYivJ5jWdfghdfghdfghdfghtJBJUw9ZAPkaPo6tXt1CwyCAxoCUJKjapXn4ZAGvyKnxUPCUMrRZBQSvMMZD&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb&expiresIn=5179039&namespace_name=api&resource_class=User&session_key=true&sig=...&userID=10156582648249377" for 70.51.192.141 at 2017-08-30 17:39:04 +0000
2017-08-30T17:39:04.503515+00:00 app[web.1]: I, [2017-08-30T17:39:04.503429 #4]  INFO -- omniauth: (facebook) Request phase initiated.
2017-08-30T17:39:04.515926+00:00 heroku[router]: at=info method=GET path="/omniauth/facebook?accessToken=df978g6hd78fg6h78d6fghaUOlH2X3NMRhbZCsiXjSbrpaSEaZBImkIzQXVeR5uqctZBBYjW0C9XSRqzXuuEz5ZCEOvkktSqJnjmJMgl7ZB4aEQDMRkACPzcSaKxZCHwV9saMLPEkgEYivJ5jWdfghdfghdfghdfghtJBJUw9ZAPkaPo6tXt1CwyCAxoCUJKjapXn4ZAGvyKnxUPCUMrRZBQSvMMZD&deviceToken=foQhl4DYPVI:APA91bFV1L_DM-YcciCPSj3XudUfu8hiThoR2T_uwl0-xSjSNE865tZ36tm4X1mp7Z9z8QzqFVmEpgW2bKRKRmguOVYNFMiORtR7DKo8NsQoCQmb&expiresIn=5179039&namespace_name=api&resource_class=User&session_key=true&sig=...&userID=10156582648249377" host=myherokuapp.herokuapp.com request_id=ae1670c5-1246-4566-bdf5-24724ba98520 fwd="70.51.192.141" dyno=web.1 connect=1ms service=17ms status=302 bytes=2283 protocol=https

EDIT

Still can't figure out this one. I do know though that when I try to log in via Facebook through my Ionic app, my Heroku logs show that Omniauth just dies at INFO -- omniauth: (facebook) Request phase initiated.. It never reaches or tries to hit the callback because otherwise it would say INFO -- omniauth: (facebook) Callback phase initiated., which it doesn't ever say. All of that being said, this process works and the Facebook user gets saved if I do it manually through my Rails site. Any ideas at all why that callback is not being triggered though the app? I'm lost.

EDIT

At this point I'm not even sure if its the correct implementation of Ionic 2 and devise_token_auth Facebook omniauth login. Could be an issue on the Ionic side of things? Like I said, through the browser it seems to work. I literally take the /api/auth/facebook?..... code below in my logs and paste it in the browser and it inserts the user.

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.

Answer 1

I know it sounds weird but, please try to switch your devise_for :users routes below the namespace :api

Like this:

namespace :api do
    namespace :v1 do
      mount_devise_token_auth_for 'User', at: 'auth'
    end
end

# config/routes.rb
devise_for :users, controllers: { :sessions => "users/sessions" }

Also, add skip: [:registrations] to exclude conflicts:

devise_for :users, controllers: {sessions: "users/sessions"}, skip: [:registrations]

And go to initializers/devise_token_auth.rb and make sure that config.enable_standard_devise_support is set to true

After trying this, can you override registrations controller and simply add a pry or some debug puts with your incoming params? thanks