How to display Devise login form errors when using Hotwire Rails

Question

I've followed this GoRails video to get Devise working with hotwire-rails. I'm at a loss as to why my login error messages do not work the same way as in the video. The error messages work great on the registration form but on the login form I get this error:

Processing by Devise::SessionsController#create as TURBO_STREAM
Parameters: {"authenticity_token"=>"[FILTERED]", "user"=>{"email"=>"elvis@example.com", "password"=>"[FILTERED]", "remember_me"=>"0"}, "commit"=>"Log in"}
Completed 401 Unauthorized in 2ms (ActiveRecord: 0.0ms | Allocations: 406)

As Chris suggests in the video I've edited my Devise initializer to look like this.

My package.json has @hotwired/turbo-rails": "^7.0.0-beta.5, but in Chris's source code for the episode it's beta.3 so that does not seem to be the problem.

What am I missing here?

@ThomasVanHolder Just updated this with what is working for me now. FYI, I'm also now on `Rails 6.1.3.2` with `hotwire-rails (0.1.3)` and `devise (4.8.0)`. — Lee McAlilly, May 20 '21 at 19:01

score 2 · Answer 1 · answered Apr 23 '21 at 09:54

2

I was having the same problem and it turns out there is no trigger to navigate. Appending :turbo_stream to this line in initializers/devise.rb solved it for me:

Devise.setup do |config|
  [...]
  config.navigational_formats = ['*/*', :html, :turbo_stream]
  [...]
end

answered Apr 23 '21 at 09:54

Loran

111
3
5

1

Hmm... I already had that in my Devise initializer, so doesn't seem to be my problem. Hoping this gets fixed in Devise / Rails new versions soon. I expect this to be a very common problem. – Lee McAlilly Apr 23 '21 at 17:11

score 1 · Accepted Answer · answered May 20 '21 at 18:59

I got this working by unifying all of my flash errors / notices into one partial rather than having a flash notice partial and a separate block for form errors:

I put this in my layouts/application.rb:

<%= render "shared/notices" %>

That partial looks like this:

<% flash.each do |msg_type, message| %>
  <div class="alert">
    <div class="container">
      <button class="close" data-dismiss="alert"><span>×</span></button>
      <%= message %>
    </div>
  </div>
<% end %>

Then, my form_for in views/devise/sessions/new.html.erb looks like this: <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

score 0 · Answer 3 · answered Nov 12 '21 at 02:17

My solution is that you don't use app/javascript/packs/your_application.js in the layout of sign_in page.

Instead, you can write a new js like app/javascript/packs/blank.js, in this blank.js, don't add import "@hotwired/turbo-rails".

And use the blank.js in the new layout file app/views/layouts/blank.html.erb for the Devise sign_in page , like these:

<head>
    <%= javascript_pack_tag 'blank' %>
    <%= stylesheet_pack_tag 'blank' %>
</head>

How to display Devise login form errors when using Hotwire Rails

3 Answers3