Exploring Devise, Part 2

Introduction

In the first part of the tutorial, we learned how to install Devise and set it up in our Rails application. In this part, we will look at how to integrate DeviseInvitable.

DeviseInvitable is an extension that works with Devise. With DeviseInvitable in your application, your users can invite their friends via emails. This is a great feature to include in your application if you are building a collaboration app.

Setting Up DeviseInvitable

Open your Gemfile and add the gem:

#Gemfile
...
gem 'devise_invitable'

Run the command to install bundle install.

Run the generator command to add DeviseInvitable's configuration option to the Devise configuration file.

rails generate devise_invitable:install

You can see the new changes by checking out config/initializers/devise.rb with your text editor.

Next, let's add DeviseInvitable to our User model.

rails generate devise_invitable User

This will add the :invitable flag to your model, thus your User model will look like this:

#app/models/user.rb

class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :invitable, :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

Running the above command also generated a migration file that looks like what I have below:

class DeviseInvitableAddToUsers < ActiveRecord::Migration
  def up
    change_table :users do |t|
      t.string     :invitation_token
      t.datetime   :invitation_created_at
      t.datetime   :invitation_sent_at
      t.datetime   :invitation_accepted_at
      t.integer    :invitation_limit
      t.references :invited_by, polymorphic: true
      t.integer    :invitations_count, default: 0
      t.index      :invitations_count
      t.index      :invitation_token, unique: true # for invitable
      t.index      :invited_by_id
    end
  end

  def down
    change_table :users do |t|
      t.remove_references :invited_by, polymorphic: true
      t.remove :invitations_count, :invitation_limit, :invitation_sent_at, :invitation_accepted_at, :invitation_token, :invitation_created_at
    end
  end
end

Now migrate your database by running rake db:migrate.

Configuring the Controller for DeviseInvitable

DeviseInvitable is required to pass some parameters when sending an invite. For this to work, we need to whitelist the necessary parameter that will be used. Using your text editor, navigate to app/controllers/application_controller.rb and make yours look like what I have below:

#app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    added_attrs = [:username, :email, :password, :password_confirmation, :remember_me]
    devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
    devise_parameter_sanitizer.permit :account_update, keys: added_attrs
    devise_parameter_sanitizer.permit :accept_invitation, keys: [:email]
  end
end

From the above, you can see that :email  has been whitelisted for DeviseInvitable.

Now let's see what we have via our console. On your terminal, run rails console and enter what you have below.

[1] pry(main)> User.invite!(:email => "[email protected]")

It should produce the output that looks like what I have below, though there will be differences.

[2] pry(main)> User Load (78.3ms)  SELECT  "users".* FROM "users" WHERE "users"."email" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["email", "[email protected]"]]
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."invitation_token" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["invitation_token", "658da470d5fcbb2275f30bc1fb66f5771b889cec2f1e56f536319d2fd1ef4a92"]]
   (0.1ms)  begin transaction
  SQL (67.8ms)  INSERT INTO "users" ("email", "encrypted_password", "invitation_token", "invitation_created_at", "invitation_sent_at", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?)  [["email", "[email protected]"], ["encrypted_password", "$2a$11$0sLfqvfFDsebcmcQTUXzlOuqNIooL5z8niXeza8OUwNK3gZY/iRum"], ["invitation_token", "658da470d5fcbb2275f30bc1fb66f5771b889cec2f1e56f536319d2fd1ef4a92"], ["invitation_created_at", "2016-10-07 07:41:51.254047"], ["invitation_sent_at", "2016-10-07 07:41:51.254047"], ["created_at", "2016-10-07 07:41:51.255700"], ["updated_at", "2016-10-07 07:41:51.255700"]]
   (220.5ms)  commit transaction
  Rendered /home/kinsomicrote/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/devise_invitable-1.7.0/app/views/devise/mailer/invitation_instructions.html.erb (2.5ms)
  Rendered /home/kinsomicrote/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/devise_invitable-1.7.0/app/views/devise/mailer/invitation_instructions.text.erb (88.0ms)

Devise::Mailer#invitation_instructions: processed outbound mail in 247.1ms

Sent mail to [email protected] (74.3ms)
Date: Fri, 07 Oct 2016 08:41:51 +0100
From: [email protected]
Reply-To: [email protected]
To: [email protected]
Message-ID: <[email protected]>
Subject: Invitation instructions
Mime-Version: 1.0
Content-Type: multipart/alternative;
 boundary="--==_mimepart_57f751bfcc725_18022ac6c272b12840524";
 charset=UTF-8
Content-Transfer-Encoding: 7bit


----==_mimepart_57f751bfcc725_18022ac6c272b12840524
Content-Type: text/plain;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

Hello [email protected]

Someone has invited you to https://localhost:3000/, you can accept it through the link below.

https://localhost:3000/users/invitation/accept?invitation_token=xmW9uRfyafptmeFMmFBy


If you don't want to accept the invitation, please ignore this email.
Your account won't be created until you access the link above and set your password.

----==_mimepart_57f751bfcc725_18022ac6c272b12840524
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: 7bit

<p>Hello [email protected]</p>

<p>Someone has invited you to https://localhost:3000/, you can accept it through the link below.</p>

<p><a href="https://localhost:3000/users/invitation/accept?invitation_token=xmW9uRfyafptmeFMmFBy">Accept invitation</a></p>


<p>If you don't want to accept the invitation, please ignore this email.<br />
Your account won't be created until you access the link above and set your password.</p>

----==_mimepart_57f751bfcc725_18022ac6c272b12840524--

=> #<User:0x00558d875fa798
 id: 4,
 email: "[email protected]",
 encrypted_password: "$2a$11$0sLfqvfFDsebcmcQTUXzlOuqNIooL5z8niXeza8OUwNK3gZY/iRum",
 reset_password_token: nil,
 reset_password_sent_at: nil,
 remember_created_at: nil,
 sign_in_count: 0,
 current_sign_in_at: nil,
 last_sign_in_at: nil,
 current_sign_in_ip: nil,
 last_sign_in_ip: nil,
 created_at: Fri, 07 Oct 2016 07:41:51 UTC +00:00,
 updated_at: Fri, 07 Oct 2016 07:41:51 UTC +00:00,
 username: nil,
 invitation_token: "658da470d5fcbb2275f30bc1fb66f5771b889cec2f1e56f536319d2fd1ef4a92",
 invitation_created_at: Fri, 07 Oct 2016 07:41:51 UTC +00:00,
 invitation_sent_at: Fri, 07 Oct 2016 07:41:51 UTC +00:00,
 invitation_accepted_at: nil,
 invitation_limit: nil,
 invited_by_id: nil,
 invited_by_type: nil,
 invitations_count: 0>
[3] pry(main)> 

That worked as planned.

You do not want our users to send invitations via the command line, so it is important we set up DeviseInvitable to work on the front end. Doing this is very simple; run the generator command to generate the views for DeviseInvitable.

rails generate devise_invitable:views users

You will also need to add a link somewhere in your application that points to the page for sending invites (app/views/users/invitations/new.html.erb).

For this application, you can go ahead and add the link to your navigation file. Here is how I did mine:

#app/views/shared/_navigation.html.erb

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <%= link_to 'Tutsplus Devise', root_path, class: 'navbar-brand' %>
    </div>
    <div id="navbar">
      <ul class="nav navbar-nav">
        <li><%= link_to 'Home', root_path %></li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <% if user_signed_in? %>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <%= current_user.username %>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><%= link_to 'Invite', new_user_invitation_path %></li>
              <li><%= link_to 'Profile', edit_user_registration_path %></li>
              <li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to 'Log In', new_user_session_path %></li>
          <li><%= link_to 'Sign Up', new_user_registration_path %></li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

To see the routes made available by DeviseInvitable, run the command rake routes | invit. Here is what the output will look like.

cancel_user_registration GET    /users/cancel(.:format)            devise_invitable/registrations#cancel
       user_registration POST   /users(.:format)                   devise_invitable/registrations#create
   new_user_registration GET    /users/sign_up(.:format)           devise_invitable/registrations#new
  edit_user_registration GET    /users/edit(.:format)              devise_invitable/registrations#edit
                         PATCH  /users(.:format)                   devise_invitable/registrations#update
                         PUT    /users(.:format)                   devise_invitable/registrations#update
                         DELETE /users(.:format)                   devise_invitable/registrations#destroy
  accept_user_invitation GET    /users/invitation/accept(.:format) devise/invitations#edit
  remove_user_invitation GET    /users/invitation/remove(.:format) devise/invitations#destroy
         user_invitation POST   /users/invitation(.:format)        devise/invitations#create
     new_user_invitation GET    /users/invitation/new(.:format)    devise/invitations#new
                         PATCH  /users/invitation(.:format)        devise/invitations#update
                         PUT    /users/invitation(.:format)        devise/invitations#update

Let us see what we have at this moment. Run the command to start your server; rails server.

Point your browser to https://localhost:3000/users/invitation/new. Enter an email address in the form shown, and click on the button. That should work! If you go to the logs of your server, you should see an output that was created when you sent the invite. In the output, you will see a link to accept the invite.

You will agree with me that it will be better if you can view the email sent in your browser. Let us see how to make that work.

Integrating Letter_Opener

Letter Opener allows you preview emails in your default browser. With it, you do not have to set up a mail delivery system while working in the development environment.

Open your Gemfile and add the gem below:

gem 'letter_opener'

Run bundle install.

Using your text editor, navigate to config/environments/development.rb and add the line below.

#config/environments/development.rb
...
  config.action_mailer.delivery_method = :letter_opener
end

Restart your rails server. Now point your browser to https://localhost:3000/users/invitation/new. Fill and submit the form displayed. This time, a new page pops up containing the invite email.

Change Default Sign In and Sign Out Routes

By default, the sign_in and sign_out routes when using Devise look like this:

sign_in: https://localhost:3000/users/sign_in

sign_out: https://localhost:3000/users/sign_out

To change it, go to config/routes.rb and add the following:

#config/routes.rb
  as :user do
    get 'signin' => 'devise/sessions#new'
    post 'signin' => 'devise/sessions#create'
    delete 'signout' => 'devise/sessions#destroy'
  end

You can point your browser to https://localhost:3000/signin.

Conclusion

Now you know how to make use of DeviseInvitable. You also learned about the gem letter_opener. There are lots of things you can do with Devise, so check out the Wiki to learn more. Thanks for staying with me.