Devise

Devise is one of the most popular gems for authentication. Find out more about Devise here.
In order to integrate it fully in Matestack apps and pages we need to adjust a few things. This guide explains what exactly needs to be adjusted.
Devise helpers
We can access devise helper methods inside our controllers, apps, pages and components like we would normally do. In case of our user model this means we could access current_user or user_signed_in? in apps, pages and components.
For example:
class ExamplePage < Matestack::Ui::Page
​
  def response
    plain "Logged in as #{current_user.email}" if user_signed_in?
    plain "Hello World!"
  end
​
end
In our controller we also use devise like it is described by devise documentation. For example checking a user is authenticated before he can access a specific controller by calling authenticate_user! in a before action.
class ExampleController < ApplicationController
  before_action :authenticate_user!
​
  def index
    render ExamplePage
  end
​
end
Devise sign in
Using the default devise sign in views should work without a problem, but you can't use Matestack's features on the. If we want to take advantage of them, you can setup the views like shown below:
First we create a custom sign in page containing a form with email and password inputs.
app/matestack/sessions/sign_in.rb
class Sessions::SignIn < Matestack::Ui::Page
​
  def response
    h1 'Sign in'
    matestack_form form_config do
      form_input label: 'Email', key: :email, type: :email
      form_input label: 'Password', key: :password, type: :password
      button text: 'Sign in', type: :submit
    end
    toggle show_on: 'sign_in_failure' do
      plain 'Your email or password is not valid.'
    end
  end
​
  private
​
  def form_config
    {
      for: :user,
      method: :post,
      path: user_session_path(format: :json),
      success: {
        redirect: { # or transition, if your app layout does not change
          follow_response: true # or static path
        }
      },
      failure: {
        emit: 'sign_in_failure'
      }
    }
  end
​
end
and a minimal layout:
app/matestack/sessions/layout.rb
class Sessions::Layout < Matestack::Ui::Layout
​
  def response
    matestack_vue_js_app do
      page_switch do
        yield
      end
    end
  end
​
end
​
This page displays a form with an email and password input. The default required parameters for a devise sign in. It also contains a toggle component which gets shown when the event sign_in_failure is emitted. This event gets emitted in case our form submit was unsuccessful as we specified it in our form_config hash. If the form is successful our app will make a transition to the page the server would redirect to.
In order to render our sign in page when someone tries to access a route which needs authentication or visits the sign in page we must override devise session controller in order to render our page. We do this by configuring our routes to use a custom controller.
app/config/routes.rb
Rails.application.routes.draw do
​
  devise_for :users, controllers: {
    sessions: 'users/sessions'
  }
​
end
Override the new action in order to render our sign in page and set the correct Matestack app in the controller.
app/controllers/users/sessions_controller.rb
class Users::SessionsController < Devise::SessionsController
​
  respond_to :html, :json
​
  # override in order to render a page
  def new
    render Sessions::SignIn, matestack_layout: Sessions::Layout
  end
​
end
You can adpat the above shown example in order to implement all other Devise views in Matestack if you need them.
Devise sign out
Creating a sign out button in Matestack is very straight forward. We use matestacks action component to create a sign out button. See the example below:
action sign_out_config do
  button 'Sign out'
end
def sign_out_config
  {
     method: :get,
     path: destroy_admin_session_path,
     success: {
       redirect: {
         follow_response: true
       }
     }
  }
end
Notice the method: :get in the configuration hash. We use a http GET request to sign out, because the browser will follow the redirect send from devise session controller and then Matestack tries to load the page where we have been redirected to. When we would use a DELETE request the action we would be redirected to from the browser will be also requested with a http DELETE request, which will result in a rails routing error. Therefore we use GET and need to configure devise accordingly by changing the sign_out_via configuration parameter.
config/initializers/devise.rb
# The default HTTP method used to sign out a resource. Default is :delete.
config.sign_out_via = :get

Integrations - Previous

Action Cable

Contribute

Last modified 3mo ago

Copy link

Outline

Devise helpers

Devise sign in

Devise sign out