Authentication/Devise

Overview

Overview

Prerequisites

In the version 3 of Rails UI, direct integration with Devise was dropped in favor of a more flexible approach that is based on code snippets you copy and paste into your app.

If you use Devise, these snippets should give you a head start on all the views generated when running/having run rails generate devise:views. Not using Devise? Check out the static version.

Here are the pages you'll find in the Devise authentication system:

Main Layout

Consider extracting the layout partial to a reusable partial. For the examples shown it's assumed you've added this partial in the app/views/devise directory.

<!-- app/views/devise/_auth_layout.html.erb -->
<div class="sm:h-[calc(100vh_-_52px)] pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('railsui/fusion.png') %>')" >
  <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
    <div>
      <div class="flex justify-center">
        <%= link_to root_path do %>
          <%= icon "logo", custom_path: "/railsui/logo.svg", class: "w-10 h-auto" %>
        <% end %>
      </div>

      <div class="mt-6">
        <%= yield :masthead %>
      </div>

      <div class="bg-white shadow-xs rounded-lg p-8 border border-slate-300/60">

        <!-- Add or yield form content here -->
        <%= yield %>

        <!--
        Add additional provider SVG icons in app/assets/images/railsui/omniauth as necessary.
        Default options include: Google, LinkedIn, X, Facebook, GitHub, YouTube, Instagram.

        **You will need to install additional dependencies
        not included in Rails UI for omniauth support.**
        -->

        <% if devise_mapping.omniauthable? && %w{ registrations sessions }.include?(controller_name) %>
          <hr class="my-6"/>
          <% resource_class.omniauth_providers.each do |provider| %>
            <div class="my-2">
            <%= button_to omniauth_authorize_path(resource_name, provider), class: "btn btn-white w-full", data: { turbo: false } do %>
              <%= icon "#{provider.gsub(/\s+/, '').downcase}", custom_path: "/railsui/omniauth/#{provider.gsub(/\s+/, '').downcase}.svg", class: "mr-2 size-5" %>
              <span>"Sign in with <%= OmniAuth::Utils.camelize(provider) %></span>
            <% end %>
            </div>
          <% end %>
        <% end %>
      </div>

      <div class="mt-4">
        <%= render "devise/shared/links" %>
      </div>
    </div>
  </div>
</div>
/ app/views/devise/_auth_layout.html.erb
.sm:h-[calc(100vh_-_52px)].pt-10.sm:pt-0.flex.flex-col.items-center.justify-center.bg-cover.bg-center.px-4{style: "background-image: url('#{asset_url('railsui/fusion.png')}')"}
  .sm:flex-1.flex.flex-col.justify-center.w-full{class: "sm:w-[428px]"}
    %div
      .flex.justify-center
        = link_to root_path do
          = icon "logo", custom_path: "/railsui/logo.svg", class: "w-10 h-auto"
      .mt-6
        = yield :masthead
      .bg-white.shadow-xs.rounded-lg.p-8.border{class: "border-slate-300/60"}
        = yield
        - if devise_mapping.omniauthable? && %w{ registrations sessions }.include?(controller_name)
          %hr.my-6/
          - resource_class.omniauth_providers.each do |provider|
            .my-2
              = button_to omniauth_authorize_path(resource_name, provider), class: "btn btn-white w-full", data: { turbo: false } do
                = icon "#{provider.gsub(/\s+/, '').downcase}", custom_path: "/railsui/omniauth/#{provider.gsub(/\s+/, '').downcase}.svg", class: "mr-2 size-5"
                %span
                  Continue with #{OmniAuth::Utils.camelize(provider)}
      .mt-4
        = render "devise/shared/links"

Then in dedicated Devise views you can render the main meat and potatoes.

<%= render "devise/auth_layout" do %>
  <!-- Add or yield form content here -->
<%% end %>

OmniAuth

The Hound theme has support for themed and branded Omniauth provider icons. Icons for those providers are rendered from app/assets/images/railsui/omniauth.

OmniAuth will need to be installed and configured to work with the Hound theme.

Here's an example of the UI with various providers:

_error_messages partial

By default Rails UI copies over a pre-styled error partial made to work out of the box and save you time during development.

The Hound theme leverages this partial for all form error rendering to keep the error/validation handling experience consistent.

You may optionally swap the default Devise error_messages partial for this one.

Fleet Management

Forget your password?

Reset it in an instant

Authentication Overview

Sign up

On this page