How to Customize Devise Views in Ruby on Rails

To customize Devise views in Ruby on Rails, run rails generate devise:views to copy all default views into your app's app/views/devise folder. Then edit these copied files to change the look and content of sign in, sign up, and other authentication pages.

Syntax

Use the Rails generator command to copy Devise's default views into your application for customization.

• rails generate devise:views: Copies all Devise views into app/views/devise.
• Optionally, specify a scope like rails generate devise:views users to copy views for a specific model.
• Edit the copied files directly to customize HTML, CSS, and content.

bash

rails generate devise:views

Output

Copied devise views to app/views/devise

Example

This example shows how to generate Devise views and customize the sign in page.

After running the generator, open app/views/devise/sessions/new.html.erb and add a welcome message or change the form layout.

bash+erb

rails generate devise:views

# Then edit app/views/devise/sessions/new.html.erb

<!-- Add a welcome message above the form -->
<h2>Welcome Back! Please Sign In</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div>
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div>
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "current-password" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div>
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end %>

  <div>
    <%= f.submit "Log in" %>
  </div>
<% end %>

Output

<h2>Welcome Back! Please Sign In</h2> plus the sign in form rendered in the browser

Common Pitfalls

Common mistakes when customizing Devise views include:

• Editing views directly in vendor or gem folders instead of copying them into app/views/devise.
• Not restarting the Rails server after adding or changing views, so changes don't appear.
• Forgetting to update routes or helpers if you customize paths or add new views.
• Overwriting your custom views by running the generator again without backing up changes.

bash

### Wrong: Editing gem views directly (do NOT do this)
# No code, just a note

### Right: Copy views and edit in your app
rails generate devise:views
# Then edit files in app/views/devise/

Quick Reference

Summary tips for customizing Devise views:

• Run rails generate devise:views once to copy views.
• Edit files inside app/views/devise only.
• Restart your Rails server after changes.
• Use partials and layouts to keep views clean.
• Test your changes by visiting sign in, sign up, and password pages.

Key Takeaways

Run 'rails generate devise:views' to copy Devise views into your app for editing.

Always edit views inside 'app/views/devise' to customize authentication pages safely.

Restart your Rails server after changing views to see updates.

Avoid editing Devise gem files directly to prevent losing changes on updates.

Test all authentication pages after customization to ensure they work correctly.