RoR deviseでログイン失敗時にフラッシュメッセージがでない

発生している問題・エラーメッセージ

Completed 401 Unauthorizedが出ており、デベロッパーツールのNetworkのResponseにはメールアドレスもしくはパスワードが不正です。が表示されているがフラッシュメッセージが表示されない

該当のソースコード

ログインボタン押下時のログ

Processing by Users::SessionsController#create as JS
Parameters: {"authenticity_token"=>"wazm/tOfHnL0Qgpg7nkuHDc+IwQJ9hDnP8HtjS9WWqnOzNPyGK4YU4FUkx0tHGvXZCUeXU9gfgKUmirpD7wRFg==", "user"=>{"email"=>"test@mail.com", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"メールアドレスでログイン"}
User Load (2.8ms)  SELECT `users`.* FROM `users` WHERE `users`.`email` = 'test@mail.com' ORDER BY `users`.`id` ASC LIMIT 1
Completed 401 Unauthorized in 920ms (ActiveRecord: 49.8ms | Allocations: 16317)

sessions_controller.rb

def create
  self.resource = warden.authenticate!(auth_options)
  set_flash_message!(:notice, :signed_in)
  sign_in(resource_name, resource)
  yield resource if block_given?
  respond_with resource, location: after_sign_in_path_for(resource)
end

view
1= form_with(model: resource, as: resource_name, url: session_path(resource_name)) do |f|
2  - resource_class.omniauth_providers.each do |provider|
3    - if provider == :facebook
4      = link_to omniauth_authorize_path(resource_name, provider), class: "registration__facebook_button", method: :post
5    - if provider == :google_oauth2
6      = link_to omniauth_authorize_path(resource_name, provider), class: "registration__google_button", method: :post
7  p.login__choice_text
8    = render "users/shared/error_messages", resource: resource
9    .field.registration__input_form
10      = f.email_field :email, autofocus: false, placeholder: 'メールアドレス', autocomplete: "email", size: 32
11    .field.registration__input_form
12      = f.password_field :password, placeholder: 'パスワード', autocomplete: "current-password", size: 32
13    - if devise_mapping.rememberable?
14      .field__input_area_remember_inner
15        = f.check_box :remember_me
16        = f.label :remember_me
17    = f.submit "メールアドレスでログイン"

フラッシュメッセージのテンプレートファイル

- if resource.errors.any?
  #error_explanation
    h2
      = I18n.t("errors.messages.not_saved",
                        count: resource.errors.count,
                        resource: resource.class.model_name.human.downcase)
    ul
      - resource.errors.full_messages.each do |message|
        li
          = message

試したこと

warden.authenticate!(auth_options)の処理で401エラーが返って以降の処理が実行されていないのが原因かと思い調べていたのですが解決方法がわからず難航しています。
Completed 401 Unauthorizedが出た後、本来であればsession#newへリダイレクトするのがdeviseの仕様とわかったのですがnewアクションにリダイレクトできていないのが原因かと思います。

下記の内容を別のアクションへ飛ばすようにしたが、そのアクションも呼び出されなかった。

変更前

def auth_options
    { scope: resource_name, recall: "#{controller_path}#new" }
end

変更後

def failed
  binding.pry
end

def auth_options
  { scope: resource_name, recall: "#{controller_path}#failed" }
end

別の部分の影響で401エラー後に止まってしまっているのかと思い調べたのですが、原因がわからず、どなたかご教示いただけると幸いです。

補足情報（FW/ツールのバージョンなど）

ruby 2.6.5
rails 6.1.6

shinoharat

2022/12/19 07:58 編集

【１】不正なメールアドレスorパスワードを入力してログインボタンを押下したとき、ログに Processing by Devise::SessionsController#create as JS みたいなメッセージ出てないですか？もし出てたら、その辺りのログを（できればHTTPステータスコードまで）コピペで貼ってほしいです。

shinoharat

2022/12/19 07:59 編集

【２】質問文に貼ってある controller のコードは gem 内部のコードに見えますが、コントローラーは自作していないっていう認識で合ってますか？または、 rails generate devise:controllers 的なコマンドでコントローラーを生成してカスタマイズしていますか？

shinoharat

2022/12/19 07:59 編集

【３】 flash メッセージを出力するためのコードが見当たりませんが、 application.html.erb など共通部分に実装されているのでしょうか？もしそうなら、その部分のコードも貼ってください。

takuya_nendo

2022/12/19 07:59

ログインボタン押下時のログを追加しました！ controllerは自作はしておりますが、カスタマイズはしておりません。原因特定のため、一時的にsessions#createの中身を記述していますが、普段はsuperにしております。フラッシュメッセージのテンプレートも追加しました！

shinoharat

2022/12/19 08:00

ありがとうございます！確認します！

回答1件

ベストアンサー

質問文に載せていただいたテンプレートファイルでは、フラッシュメッセージを表示できません。
以下のコードを追加してみてください。

haml:app/views/_flash.html.haml
1- flash.each do |name, message|
2  = tag.div(message, class: "flash flash-#{name}")

css
1.flash {
2  margin: 4px;
3  padding: 10px;
4}
5.flash-notice { background-color: #b9edc2; }
6.flash-alert  { background-color: #f2c2c2; }

diff:app/views/layouts/application.html.haml
1 %html
2   ...
3   ...
4
5   %body
6
7+    #flash_message
8+      = render('/flash')
9
10     = yield
11
12     ...
13     ...

ここから2通りの解決方法があります。

【方法１】ajax を使わない

ログに **** as JS と表示されていることから、リクエストが ajax になっているものと思われます。

ajax を off にするには、 form_with メソッドに local: true オプションを加えます。

diff
1- = form_with(model: resource, ...) do |f|
2+ = form_with(model: resource, ..., local: true) do |f|
3    - resource_class.omniauth_providers.each do |provider|
4      ...
5      ...

【方法２】ajax を使う

以下のファイルを新規作成します。

js:app/views/devise/sessions/new.js.haml
1var messageArea = document.querySelector("#flash_message");
2messageArea.innerHTML = '<%=j render('/flash') %>';