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

Question

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

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

該当のソースコード

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

Processing by Users::SessionsController#create as JS
Parameters: {"authenticity_token"=>"wazm/tOfHnL0Qgpg7nkuHDc+IwQJ9hDnP8HtjS9WWqnOzNPyGK4YU4FUkx0tHGvXZCUeXU9gfgKUmirpD7wRFg==", "user"=>{"email"=>"[e-mail]", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"メールアドレスでログイン"}
User Load (2.8ms)  SELECT `users`.* FROM `users` WHERE `users`.`email` = '[e-mail]' 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

= form_with(model: resource, as: resource_name, url: session_path(resource_name)) do |f|
  - resource_class.omniauth_providers.each do |provider|
    - if provider == :facebook
      = link_to omniauth_authorize_path(resource_name, provider), class: "registration__facebook_button", method: :post
    - if provider == :google_oauth2
      = link_to omniauth_authorize_path(resource_name, provider), class: "registration__google_button", method: :post
  p.login__choice_text
    = render "users/shared/error_messages", resource: resource
    .field.registration__input_form
      = f.email_field :email, autofocus: false, placeholder: 'メールアドレス', autocomplete: "email", size: 32
    .field.registration__input_form
      = f.password_field :password, placeholder: 'パスワード', autocomplete: "current-password", size: 32
    - if devise_mapping.rememberable?
      .field__input_area_remember_inner
        = f.check_box :remember_me
        = f.label :remember_me
    = 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

Comments

[shinoharat]

【１】
不正なメールアドレスorパスワードを入力してログインボタンを押下したとき、ログに

Processing by Devise::SessionsController#create as JS

みたいなメッセージ出てないですか？
もし出てたら、その辺りのログを（できればHTTPステータスコードまで）コピペで貼ってほしいです。

[shinoharat]

【２】
質問文に貼ってある controller のコードは gem 内部のコードに見えますが、コントローラーは自作していないっていう認識で合ってますか？

または、 rails generate devise:controllers 的なコマンドでコントローラーを生成してカスタマイズしていますか？

[shinoharat]

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

もしそうなら、その部分のコードも貼ってください。

[takuya_nendo]

ログインボタン押下時のログを追加しました！

controllerは自作はしておりますが、カスタマイズはしておりません。
原因特定のため、一時的にsessions#createの中身を記述していますが、普段はsuperにしております。

フラッシュメッセージのテンプレートも追加しました！

[shinoharat]

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

Answer 1

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

- flash.each do |name, message|
  = tag.div(message, class: "flash flash-#{name}")

.flash {
  margin: 4px;
  padding: 10px;
}
.flash-notice { background-color: #b9edc2; }
.flash-alert  { background-color: #f2c2c2; }

 %html
   ...
   ...

   %body

+    #flash_message
+      = render('/flash')

     = yield

     ...
     ...

--

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

【方法１】ajax を使わない

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

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

- = form_with(model: resource, ...) do |f|
+ = form_with(model: resource, ..., local: true) do |f|
    - resource_class.omniauth_providers.each do |provider|
      ...
      ...

【方法２】ajax を使う

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

var messageArea = document.querySelector("#flash_message");
messageArea.innerHTML = '<%=j render('/flash') %>';

Comments

[takuya_nendo]

ありがとうございます！
上記追加したのですが、フラッシュメッセージがでませんでした。

locale: trueを追記すると、as HTMLになるかと思うのですが、as JSにのままでした。
これは別の箇所の影響がある可能性がありますでしょうか？

[shinoharat]

すみません、回答にスペルミスがありました。（現在は修正済み）

誤 locale
正 local

ですので、オプションを local: true で試していただけますでしょうか？

[takuya_nendo]

local: trueを追加して、今までのテンプレートでフラッシュメッセージが表示できました！
ありがとうございました！

[shinoharat]

無事に動いたようで良かったです。
ajax を使うバージョンも回答欄に追記したので、気が向いたら試してみてください。