Search code examples
ruby-on-railsreact-nativecsrf

Can't verify CSRF token in Rails API from a React Native app call

I am trying to make a post request from a React Native app to a Rails app (API)

Some settings that I have followings:

I am using the gem rack-cors to handle CSRF issue.

In application.rb

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*',
    headers: :any,
    methods: [:get, :post, :patch, :delete, :options],
    expose: ['access-token', 'expiry', 'token-type', 'uid', 'client']
  end
end

I am allowing everything for the time being, because for now I am just doing API calls, later on I will put the domain.

Also, I deactivated protect from forgery, so that the CSRF check is not made, and requests are just checked through the access token

class ApplicationController < ActionController::Base
  include DeviseTokenAuth::Concerns::SetUserByToken

  # protect_from_forgery

In devise_token_auth.rb I added:

config.change_headers_on_each_request = false

In my controller, I added:

class Api::V1::TrainingsController < ApplicationController
  before_action :authenticate_user!

I am using the gem 'devise_token_auth', so in my User model I have:

class User < ActiveRecord::Base
  has_many :trainings

  extend Devise::Models
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
  include DeviseTokenAuth::Concerns::User
end

The routes are following, but just the import one is the important:

Rails.application.routes.draw do
  mount_devise_token_auth_for 'User', at: 'auth'
  root to: 'pages#home'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  namespace :api, defaults: { format: :json } do
    namespace :v1 do
      resources :trainings, only: [ :index, :show, :create ]
      post 'import', to: "trainings#import"
    end
  end
end

I could login, since no token is required, you get the token. Here it begins the React Native story. I have the token that the server sends, and I do the call:

    const rawResponse = await fetch('https://plankorailsfour.herokuapp.com/api/v1/import', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Access-Token': auth.accessToken,
      'token-type': 'Bearer',
      'client': auth.client,
      'uid': '1',
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: JSON.stringify(bodyRequest)
  })
  const headers = await rawResponse.headers
  const data = await rawResponse.json()

I've tried to pass the authentication token sent from the backend to the call, but I keep getting same error message when I do the import call:

Started POST "/api/v1/import" for 46.128.35.112 at 2019-07-23 05:04:32 +0000
2019-07-23T05:04:32.586008+00:00 app[web.1]: I, [2019-07-23T05:04:32.585930 #4]  INFO -- : [dd02c2bc-1367-474a-81a3-f60740e7a661] Processing by Api::V1::TrainingsController#import as JSON
2019-07-23T05:04:32.586079+00:00 app[web.1]: I, [2019-07-23T05:04:32.586010 #4]  INFO -- : [dd02c2bc-1367-474a-81a3-f60740e7a661]   Parameters: {"uid"=>"1", "training"=>{}}
2019-07-23T05:04:32.586319+00:00 app[web.1]: W, [2019-07-23T05:04:32.586199 #4]  WARN -- : [dd02c2bc-1367-474a-81a3-f60740e7a661] Can't verify CSRF token authenticity.
2019-07-23T05:04:32.586567+00:00 app[web.1]: I, [2019-07-23T05:04:32.586508 #4]  INFO -- : [dd02c2bc-1367-474a-81a3-f60740e7a661] Completed 422 Unprocessable Entity in 0ms (ActiveRecord: 0.0ms)
2019-07-23T05:04:32.587644+00:00 app[web.1]: F, [2019-07-23T05:04:32.587566 #4] FATAL -- : [dd02c2bc-1367-474a-81a3-f60740e7a661]
2019-07-23T05:04:32.587718+00:00 app[web.1]: F, [2019-07-23T05:04:32.587648 #4] FATAL -- : [dd02c2bc-1367-474a-81a3-f60740e7a661] ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
2019-07-23T05:04:32.587796+00:00 app[web.1]: F, [2019-07-23T05:04:32.587726 #4] FATAL -- : [dd02c2bc-1367-474a-81a3-f60740e7a661]
2019-07-23T05:04:32.587928+00:00 app[web.1]: F, [2019-07-23T05:04:32.587827 #4] FATAL -- : [dd02c2bc-1367-474a-81a3-f60740e7a661] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_controller/metal/request_forgery_protection.rb:211:in `handle_unverified_request'
2019-07-23T05:04:32.587930+00:00 app[web.1]: [dd02c2bc-1367-474a-81a3-f60740e7a661] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_controller/metal/request_forgery_protection.rb:243:in `handle_unverified_request'
2019-07-23T05:04:32.587931+00:00 app[web.1]: [dd02c2bc-1367-474a-81a3-f60740e7a661] vendor/bundle/ruby/2.4.0/gems/devise-4.6.2/lib/devise/controllers/helpers.rb:255:in `handle_unverified_request'
2019-07-23T05:04:32.587932+00:00 app[web.1]: [dd02c2bc-1367-474a-81a3-f60740e7a661] vendor/bundle/ruby/2.4.0/gems/actionpack-5.2.1/lib/action_controller/metal/request_forgery_protection.rb:238:in `verify_authenticity_token'

Why is Rails still checking the CSRF token if I deactivated the check, commenting out the protect_from_forgery method?

Why do I have a ActionController::InvalidAuthenticityToken if I am passing in the header the Access-Token. The name of the key I think is right.

Solution

  • I would say this is happening because you are sending the access token in the CSRF token header. If I am not wrong, there are two completely different tokens on the table:

    1. Access Token. Handled by the devise_token_auth gem and passed inside Access-Token header. Is used to authenticate the users.

    2. CSRF Token. Handled by Rails, and passed inside X-CSRF-Token header. Is used to prevent CSRF attacks.

    You will need to send each value in its correspondent header.