RailsでOmniAuth-GitHubを利用してログインをしようとした時に、turboが邪魔をしてgithubのログイン画面にいけなかった現象について。Not found. Authentication passthru.

読んで欲しい人

• 下記の記事を参考に開発を進めていてNot found. Authentication passthru.の表示になった人
  • https://fuga-ch85.hatenablog.com/entry/2021/04/10/075536
  • https://github.com/heartcombo/devise/wiki/OmniAuth:-Overview
• 過去の俺

動作環境

• ruby 3.3.0
• Rails 7.1.3.3

ハマった現象

• 上記で紹介した「omniauthを使ってgithub認証を実装する」の設定が一通り終わり、いざuser_github_omniauth_authorize_pathリンクを設置して、ボタンを押した時にNot found. Authentication passthru.という文言が出てきて、githubの認証画面に遷移できない状態

ボタンの画面

遷移後の画面

リンクを設置したファイル

%div
  %p　下記のボタンを押してログインしてください
  = link_to 'GitHubでログインする', user_github_omniauth_authorize_path, class: 'btn'

解決

• link_toではなくbutton_toにした
• turboをオフにした

- = link_to 'GitHubでログインする', user_github_omniauth_authorize_path, class: 'btn'
+ = button_to 'GitHubでログインする', user_github_omniauth_authorize_path, class: 'btn', data: { turbo: false }

解説

• link_toではなくbutton_toにした

ドキュメントにpostメソッドを使用してくれと書いてあった

OmniAuth 2.0+ requires using HTTP POST as the request method to initiate the authentication, so your link should be configured with method: :post: (this requires rails-ujs or similar to create POST requests)

OmniAuth 2.0+ では認証を開始するためのリクエストメソッドとして HTTP POST を使用する必要があります

• turboをオフにした

ドキュメントに書いてあった

If you're using Turbo you'll likely get a CORS error, and must disable it:
<%= button_to "Sign in with Facebook", user_facebook_omniauth_authorize_path, data: { turbo: false } %>

Turboを使用している場合、CORSエラーが発生する可能性が高いので、無効にする必要があります

なぜCORSエラーが発生するのか？

• Turboが非同期的に通信をめっちゃするので、異なるオリジンからのリクエストが増えて、サーバー側で適切なCORSポリシーの設定が求められるから

そもそもCORSとは？
そもそもturboとは？

turboは色々なオリジンへリクエストを投げて早くサイトの変更をしてくれる。一方、CORSのオリジンポリシーというルールに違反するのでエラーが発生しちゃう

↑

間違っていればご指摘ください

感想・学んだこと

• 全く未知の状態から学んだので、大変だった。
• ドキュメント大事だなぁ
• CORSやturboなど意識しなければわからない部分を理解することで視野が広がった。