Cannot get ng-token-auth, devise-token-auth and Rails to work for facebook login

[prakash-alpine]

I apologize if this question has been answered before. If it is, please point to the solution. But for the life of it I can not figure out how to get an AngularJS client (using ng-token-auth) and Rails 4.2 server (using devise-token-auth) to work with Facebook for login/signup, etc. I have googled this topic and read through a lot of suggestions and ideas but NOT a concrete solution. So I finally decided to ask the experts. Here it goes:

THE SYMPTOM:
When I initiate a $auth.authenticate('facebook') call on client, I get the HTTP request from facebook to
the redirect_url on rails server, at http://localhost:3008/api/v1/auth/facebook/callback which map to
'devise_token_auth/omniauth_callbacks#redirect_callbacks' in routes.rb

GET /api/v1/auth/:provider/callback(.:format) devise_token_auth/omniauth_callbacks#redirect_callbacks

I also have another route defined in when I do 'rake routes'

GET /v1/auth/:provider/callback(.:format) devise_token_auth/omniauth_callbacks#omniauth_success

I am not sure why I have two routes defined, but only the first one (redirect_callbacks) gets called.

snippet from config/routes.rb

  mount Api::Engine, at: '/api'

    devise_for :users

    # token auth routes available at /api/v1/auth
     namespace :v1, defaults: { format: :json } do
       mount_devise_token_auth_for 'User', at: 'auth'
       resources :users, only: [:index, :show, :create, :update, :destroy]
     end

Snippet from config/devise_token_auth.rb

  # This route will be the prefix for all oauth2 redirect callbacks. For
  # example, using the default '/omniauth', the github oauth2 provider will
  # redirect successful authentications to '/omniauth/github/callback'
  #config.omniauth_prefix = "/omniauth"

  config.omniauth_prefix = "/api/v1/auth"

The Application Controller:

module Api
  module V1
    class ApplicationController < ActionController::Base
      # required by devise_token_auth
      include DeviseTokenAuth::Concerns::SetUserByToken
      respond_to :json

      before_filter :authenticate_user!, except: [:new, :create]

      # protect_from_forgery with: :exception
      # Prevent CSRF attacks by using :null_session
      protect_from_forgery with: :null_session
      before_action :configure_permitted_parameters, if: :devise_controller?

      def set_csrf_cookie_for_ng
        cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
      end

      def configure_permitted_parameters
        devise_parameter_sanitizer.for(:sign_in) << :session
        devise_parameter_sanitizer.for(:sign_up) << :favorite_color
        devise_parameter_sanitizer.for(:account_update) << :favorite_color
        devise_parameter_sanitizer.for(:account_update) << :nickname
      end

      def verified_request?
        super || valid_authenticity_token?(session, request.headers['X-XSRF-TOKEN'])
      end

    end
  end
end

My request from facbook to server raises an exception "No resource_class found" at line 184 in devise_token_auth/omniauth_controller_callback.rb:

Note: If I am logged into Facebook from browser, I get the Facebook login page in a new tab. After logging into to Facebook, I get the same exception as above.

    def resource_class(mapping = nil)
      if omniauth_params['resource_class']
        omniauth_params['resource_class'].constantize
      elsif params['resource_class']
        params['resource_class'].constantize
      else
           raise "No resource_class found"
      end
    end

In a debug session the omniauth_params has only following two things:

auth_original_url => http://3000/#/pages/auth/login
omniauth_window_type => sameWindow

As you can see there is no "access_token", "resource_class" or any other fields available in omniauth.params which is causing this exception. I have checked both client and server configuration multiple times and compared it with documentation for both ng-token-auth and devise-token-auth and it seems to be correct. I somehow can't get this to work. So I am asking for your help.

Following is my client and server configuration if that helps.

Client Configuration:

• AngularJS 1.4.8
• ng-token-auth (0.0.28)
• angular-cookie (4.0.10)
• Client runs on http://localhost:3000

Server Configuration

• Rails (4.2.4)
• devise (3.5.2)
• devise_token_auth (0.1.33)
• oauth2 (1.1.0)
• omniauth-oauth2 (1.4.0)
• omniauth-facebook (3.0.0)
• Server runs on http://localhost:3008

NOTE: I need devise and devise_token_auth to co-exist to support legacy application.

[akshaygoyal88]

+1

[augustosamame]

I have the exact same problem. Were you able to solve it?

[Bdejong30]

I solved this by making the following change
$auth.authenticate(provider)
to
$auth.authenticate(provider, {params: {resource_class: 'User'}}

[akshaygoyal88]

I managed by overriding omniauth_callbacks_controller and token_validations_controller.
The resource class was missing in controllers so I globally declare .
var $resource = @resource
in omniauth_success method of omniauth_callbacks_controller and also use same resource for token_validations_controller .
you can find fully configured app at here
As it is working fine for me.

[zachfeldman]

Sounds like we have a proposed solution here, closing for now.