Rails+Devise+omniauth facebookのログインでCSRF detectedエラーを解消する方法


エラー内容

Facebookログインでcallbackされた後の挙動がうまくいかなくて、URLも hoge.com/login_=_ みたいな変な形式になってしまうエラーが発生しました。ログを確認すると以下のエラーを吐き出していました。

(facebook) Callback phase initiated.
(facebook) Callback phase initiated.
(facebook) Authentication failure! csrf_detected: OmniAuth::Strategies::OAuth2::CallbackError, csrf_detected | CSRF detected

実行環境

  • ruby 2.6.3
  • Rails 6.0.3.2
  • Devise 4.7.2
  • omniauth 1.9.1
  • Omniauth-facebook 6.0.0

エラーの解消方法

config/initializers/devise.rb と config/initializers/omniauth.rb に同じ内容を二重で記載していたので、片方を削除します。以上です。

原因

ネット上の投稿にはOmuniauthの設定をdevise.rbに書く方法と、別途omniauth.rbを作成してそこに設定を書く方法の2種類が上がっています(以下に参考URLを添付)。

どうやら色々な方の記事を参考にするうちに誤って2箇所に記載してしまった様です。

参考:
DeviseとOmniauthでtwitter,facebook ログイン機能
※devise.rbに直接記載する方法で説明されている記事
[Rails]SNSアカウントログイン機能の実装かつ既存userモデルと衝突しない方法
※omniauth.rbを別途作成する方法で説明されている記事

devise.rbの場合は、270行目くらいにOmniAuthの設定を書くところがあります。

config/initializers/devise.rb
  # ==> OmniAuth
  # Add a new OmniAuth provider. Check the wiki for more information on setting
  # up on your models and hooks.
  # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'
  config.omniauth :facebook, ENV['FACEBOOK_APP_ID'],ENV['FACEBOOK_SECRET_KEY']

omniauth.rbは自動では作成されない(はず)なので、自ら touch config/omniauth.rbする必要があります。 ただし、initializers以下にomniauth.rbを作成したら特にrequireなどをしなくても自動で読みに行ってくれるみたいです。

config/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
provider :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_SECRET_KEY']
end

どちらのファイルも書いてあることは同じなので、片方を削除して再度実行してみてください。どなたかのお役に立てたならば幸いです。