Clearance is a simple authentication system with email and password built by the team at Thoughtbot. It has opinionated defaults but is intended to be easy to override. The system is actively maintained, and you can follow up on GitHub.
In this tutorial, you will see how to integrate Clearance into a Rails application. We will make use of a miniature application. Let's begin!
You'll start by generating your Rails application. For the purpose of this tutorial, I'll name mine tutsplus-clearance.
rails new tutsplus-clearance -T
That will do the magic.
You'll need bootstrap to make your application look good. Add the Bootstrap gem to your Gemfile.
#Gemfile ... gem 'bootstrap-sass'
Install the gem by running bundle install.
Now modify application.scss to look like this:
#app/assets/stylesheets/application.scss @import 'bootstrap-sprockets'; @import 'bootstrap';
Open your Gemfile to add the Clearance gem.
#Gemfile gem 'clearance'
Now install the gem.
bundle install
At this point, run the generator command to install clearance.
rails generate clearance:install
This will generate some outputs on your terminal, which look like what I have below:
create config/initializers/clearance.rb
insert app/controllers/application_controller.rb
create app/models/user.rb
create db/migrate/20161115101323_create_users.rb
*******************************************************************************
Next steps:
1. Configure the mailer to create full URLs in emails:
# config/environments/{development,test}.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }
In production it should be your app's domain name.
2. Display user session and flashes. For example, in your application layout:
<% if signed_in? %>
Signed in as: <%= current_user.email %>
<%= button_to 'Sign out', sign_out_path, method: :delete %>
<% else %>
<%= link_to 'Sign in', sign_in_path %>
<% end %>
<div id="flash">
<% flash.each do |key, value| %>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
</div>
3. Migrate:
rake db:migrate
*******************************************************************************When you ran the command, a couple of files were generated in your application. One such file is clearance.rb, which you can find in the config/initializers directory. A User model was also generated, and along with that you also have a migration file that looks like this:
class CreateUsers < ActiveRecord::Migration
def change
create_table :users do |t|
t.timestamps null: false
t.string :email, null: false
t.string :encrypted_password, limit: 128, null: false
t.string :confirmation_token, limit: 128
t.string :remember_token, limit: 128, null: false
end
add_index :users, :email
add_index :users, :remember_token
end
endAccording to the output, the first thing you want to do is edit your config environment. To do that, navigate to config/environments/development.rb and add the line below, just above the end delimiter.
...
config.action_mailer.default_url_options = { host: 'localhost:3000' }
endNext, navigate to config/initializers/clearance.rb to edit it, and when you're there, change the sender email address from the default to any of your choosing. This is what you will see when you open the file.
#config/initializers/clearance.rb Clearance.configure do |config| config.mailer_sender = "reply@example.com" end
You can override the default configuration by pasting in the following code snippet and configuring it to your requirements.
#config/initializers/clearance.rb
Clearance.configure do |config|
config.allow_sign_up = true
config.cookie_domain = ".example.com"
config.cookie_expiration = lambda { |cookies| 1.year.from_now.utc }
config.cookie_name = "remember_token"
config.cookie_path = "/"
config.routes = true
config.httponly = false
config.mailer_sender = "reply@example.com"
config.password_strategy = Clearance::PasswordStrategies::BCrypt
config.redirect_url = "/"
config.secure_cookie = false
config.sign_in_guards = []
config.user_model = User
endRun the command to migrate your database.
rake db:migrate
Open your PagesController and add an index action.
#app/controllers/pages_controller.rb class PagesController < ApplicationController def index end end
Next, create a view for the index action you just created.
Add the code snippet below:
#app/views/pages/index.html.erb <h1>Tutsplus Clearance</h1> <p>Welcome to our Clearance Page.</p>
Edit your routes to:
#config/routes.rb Rails.application.routes.draw do root to: "pages#index" end
Create a partial named _navigation.html.erb inside the layouts directory. This will be used to handle everything that has to do with navigation on your application.
Paste the following code and save.
#app/views/layouts/_navigation.html.erb
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<%= link_to 'Tutsplus-Clearance', root_path, class: 'navbar-brand' %>
</div>
<div id="navbar">
<% if signed_in? %>
<ul class="nav navbar-nav">
<li><%= link_to 'Add Page', new_page_path %></li>
</ul>
<% end %>
<ul class="nav navbar-nav pull-right">
<% if signed_in? %>
<li><span><%= current_user.email %></span></li>
<li><%= link_to 'Sign out', sign_out_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Sign in', sign_in_path %></li>
<% end %>
</ul>
</div>
</div>
</nav>
<div class="container">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>">
<%= value %>
</div>
<% end %>
</div>With Clearance, you can be able to create restricted access to specific pages of your choice in your application. Let's see how it is done.
Create a view for a new action in app/views/pages, the name of the file should be new.html.erb. Paste in the code below.
#app/views/pages/new.html.erb <h1>Restricted Page</h1> <p>This page is restricted to authenticated users, if you can see this it means you are a superstar!</p>
Now you need to add the line below to config/routes.rb.
#config/routes.rb ... resources :pages, only: :new ...
Finally, go to your PagesController make it like what I have below.
#apps/controllers/pages_controller.rb class PagesController < ApplicationController before_action :require_login, only: [:new] def index end def new end end
In the above code, we are making use of the Clearance helper, require_login, to restrict access to the new action. To see how it works, start up your rails server by running rails server from your terminal. Point your browser to http://locahost:3000/pages/new and it should redirect you to the sign in page.
Clearance also provides routing constraints that can be used to control access.
#config/routes.rb
Rails.application.routes.draw do
constraints Clearance::Constraints::SignedOut.new do
root to: 'pages#index'
end
constraints Clearance::Constraints::SignedIn.new do
root to: "pages#new', as: :signed_in_root
end
endIn the code above, a different route has been created for authenticated users.
A lot of things happen behind the scenes when you start using Clearance, things you cannot see. There might come a time when you want to customize things differently, depending on the specification of your application. Clearance allows you to override the default configuration it comes with.
To override (or generate) Clearance routes, run this command from your terminal.
rails generate clearance:routes
Your routes file should now look like this:
#config/routes.rb
Rails.application.routes.draw do
resources :passwords, controller: "clearance/passwords", only: [:create, :new]
resource :session, controller: "clearance/sessions", only: [:create]
resources :users, controller: "clearance/users", only: [:create] do
resource :password,
controller: "clearance/passwords",
only: [:create, :edit, :update]
end
get "/sign_in" => "clearance/sessions#new", as: "sign_in"
delete "/sign_out" => "clearance/sessions#destroy", as: "sign_out"
get "/sign_up" => "clearance/users#new", as: "sign_up"
root to: "pages#index"
resources :pages, only: :new
endThe command will also set the config.routes setting to false in your config/initializers/clearance.rb file. This means that the custom file which has just been generated will be used.
To generate views for modification, run:
rails generate clearance:views
Some of the files that will be generated include:
app/views/passwords/create.html.erb app/views/passwords/edit.html.erb app/views/passwords/new.html.erb app/views/sessions/_form.html.erb app/views/sessions/new.html.erb app/views/users/_form.html.erb app/views/users/new.html.erb config/locales/clearance.en.yml
You will see a prompt in your terminal asking to overwrite your app/views/layouts/application.html.erb file. Choose the option you want.
By default, Clearance uses your application's default layout. If you would like to change the layout that Clearance uses when rendering its views, simply specify the layout in an initializer.
Clearance::PasswordsController.layout "my_passwords_layout" Clearance::SessionsController.layout "my_sessions_layout" Clearance::UsersController.layout "my_admin_layout"
Clearance provides you with helper methods that can be used in your controllers, views, and helpers. These methods include signed_in?, signed_out?, and current_user. For example:
<% if signed_in? %> <%= current_user.email %> <%= button_to "Sign out", sign_out_path, method: :delete %> <% else %> <%= link_to "Sign in", sign_in_path %> <% end %>
Clearance has a lot to offer you when it comes to authentication, so be sure to try it out in your next project. You can learn more by checking out the GitHub page.
The Best Small Business Web Designs by DesignRush
/
1Create Modern Vue Apps Using Create-Vue and Vite
/
9How to Fix the “There Has Been a Critical Error in Your Website” Error in WordPress
/
4How To Fix The “There Has Been A Critical Error in Your Website” Error in WordPress
How to Create a Privacy Policy Page in WordPress
/
6WordPress Website Maintenance Guide For Beginners
/
6How Long Does It Take to Learn JavaScript?
/
-1How Long Does it Take to Learn JavaScript
/
1The Best Way to Deep Copy an Object in JavaScript
/
-3
5
-5Adding and Removing Elements From Arrays in JavaScript
/
-3Create a JavaScript AJAX Post Request: With and Without jQuery
/
95 Real-Life Uses for the JavaScript reduce() Method
/
-7How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla
/
4How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla
/
-5Confirm Yes or No With JavaScript
/
-4How to Change the URL in JavaScript: Redirecting
/
-327 Best Tab and Accordion Widget Plugins for WordPress (Free & Premium)
/
1321 Best Tab and Accordion Widget Plugins for WordPress (Free & Premium)
/
-1130 HTML Best Practices for Beginners
/
-731 Best WordPress Calendar Plugins and Widgets (With 5 Free Plugins)
25 Ridiculously Impressive HTML5 Canvas Experiments
/
-1
1How to Create a Simple Web-Based Chat Application
/
630 Popular WordPress User Interface Elements
/
-2Top 18 Best Practices for Writing Super Readable Code
/
-1Best Affiliate WooCommerce Plugins Compared
/
-1118 Best WordPress Star Rating Plugins
/
1410+ Best WordPress Twitter Widgets
/
220+ Best WordPress Booking and Reservation Plugins
/
4Working With Tables in React: Part Two
/
-3Best CSS Animations and Effects on CodeCanyon
/
-1730 CSS Best Practices for Beginners
/
3How to Create a Custom WordPress Plugin From Scratch
/
310 Best Responsive HTML5 Sliders for Images and Text… and 3 Free Options
/
-616 Best Tab and Accordion Widget Plugins for WordPress
/
-818 Best WordPress Membership Plugins and 5 Free Plugins
/
425 Best WooCommerce Plugins for Products, Pricing, Payments and More
/
110 Best WordPress Twitter Widgets
1 /
1012 Best Contact Form PHP Scripts for 2020
/
-220 Popular WordPress User Interface Elements
/
-410 Best WordPress Star Rating Plugins
/
-412 Best CSS Animations on CodeCanyon
/
-212 Best WordPress Booking and Reservation Plugins
/
-120 Best WordPress Calendar Plugins and Widgets
/
-312 Elegant CSS Pricing Tables for Your Latest Web Project
/
924 Best WordPress Form Plugins for 2020
/
114 Best PHP Event Calendar and Booking Scripts
/
2Getting Started With Django: Newly Updated Course
/
-3Create a Blog for Each Category or Department in Your WooCommerce Store
/
58 Best WordPress Booking and Reservation Plugins
/
-15Best Exit Popups for WordPress Compared
/
19Best Exit Popups for WordPress Compared
/
-311 Best Tab & Accordion WordPress Widgets & Plugins
/
-912 Best Tab & Accordion WordPress Widgets & Plugins
1 /
3New Course: Practical React Fundamentals
/
2Short Course: Better Angular App Architecture With Modules
/
2Preview Our New Course on Angular Material
/
5Build Your Own CAPTCHA and Contact Form in PHP
/
-2Object-Oriented PHP With Classes and Objects
/
-1Best Practices for ARIA Implementation
/
-3Accessible Apps: Barriers to Access and Getting Started With Accessibility
/
-4Dramatically Speed Up Your React Front-End App Using Lazy Loading
/
1615 Best Modern JavaScript Admin Templates for React, Angular, and Vue.js
/
-1615 Best Modern JavaScript Admin Templates for React, Angular and Vue.js
/
219 Best JavaScript Admin Templates for React, Angular, and Vue.js
/
2New Course: Build an App With JavaScript and the MEAN Stack
/
9Hands-on With ARIA: Accessibility Recipes for Web Apps
/
410 Best WordPress Facebook Widgets
13Hands-on With ARIA: Accessibility for eCommerce
/
4New eBooks Available for Subscribers
/
-8Hands-on With ARIA: Homepage Elements and Standard Navigation
/
11
-5Site Accessibility: Getting Started With ARIA
/
5How Secure Are Your JavaScript Open-Source Dependencies?
/
-2New Course: Secure Your WordPress Site With SSL
/
-5Testing Components in React Using Jest and Enzyme
/
-9Testing Components in React Using Jest: The Basics
/
-515 Best PHP Event Calendar and Booking Scripts
/
-1Create Interactive Gradient Animations Using Granim.js
/
11How to Build Complex, Large-Scale Vue.js Apps With Vuex
1 /
-3Examples of Dependency Injection in PHP With Symfony Components
/
-6Set Up Routing in PHP Applications Using the Symfony Routing Component
1 /
9A Beginner’s Guide to Regular Expressions in JavaScript
/
7Introduction to Popmotion: Custom Animation Scrubber
/
-8Introduction to Popmotion: Pointers and Physics
/
-12New Course: Connect to a Database With Laravel’s Eloquent ORM
/
-7How to Create a Custom Settings Panel in WooCommerce
/
-15Building the DOM faster: speculative parsing, async, defer and preload
1 /
420 Useful PHP Scripts Available on CodeCanyon
3 /
49How to Find and Fix Poor Page Load Times With Raygun
/
-1Introduction to the Stimulus Framework
/
-10Single-Page React Applications With the React-Router and React-Transition-Group Modules
/
1
712 Best Contact Form PHP Scripts
1 /
-3Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules
Getting Started With the Mojs Animation Library: The Shape Module
/
-1Getting Started With the Mojs Animation Library: The HTML Module
/
3Project Management Considerations for Your WordPress Project
/
-98 Things That Make Jest the Best React Testing Framework
/
5Creating an Image Editor Using CamanJS: Layers, Blend Modes, and Events
/
1New Short Course: Code a Front-End App With GraphQL and React
/
1Creating an Image Editor Using CamanJS: Applying Basic Filters
/
-11Creating an Image Editor Using CamanJS: Creating Custom Filters and Blend Modes
/
-1Modern Web Scraping With BeautifulSoup and Selenium
/
-1Challenge: Create a To-Do List in React
1Deploy PHP Web Applications Using Laravel Forge
/
-4Getting Started With the Mojs Animation Library: The Burst Module
/
4
-910 Things Men Can Do to Support Women in Tech
/
-2A Gentle Introduction to Higher-Order Components in React: Best Practices
/
-5A Gentle Introduction to HOC in React: Learn by Example
/
1A Gentle Introduction to Higher-Order Components in React
/
-7Creating Pretty Popup Messages Using SweetAlert2
/
5Creating Stylish and Responsive Progress Bars Using ProgressBar.js
/
1618 Best Contact Form PHP Scripts for 2022
/
-2How to Make a Real-Time Sports Application Using Node.js
/
-4Creating a Blogging App Using Angular & MongoDB: Delete Post
/
-18Set Up an OAuth2 Server Using Passport in Laravel
/
-1Creating a Blogging App Using Angular & MongoDB: Add Post
/
-1Introduction to Mocking in Python
/
1Creating a Blogging App Using Angular & MongoDB: Show Post
/
9Creating a Blogging App Using Angular & MongoDB: Home
/
5
3Creating a Blogging App Using Angular & MongoDB: Login
/
11Creating Your First Angular App: Implement Routing
/
10Persisted WordPress Admin Notices: Part 4
/
-2Creating Your First Angular App: Components, Part 2
/
1Persisted WordPress Admin Notices: Part 3
/
4Creating Your First Angular App: Components, Part 1
/
-2How Laravel Broadcasting Works
/
-1
7Persisted WordPress Admin Notices: Part 2
/
-2Create Your First Angular App: Storing and Accessing Data
/
5Persisted WordPress Admin Notices: Part 1
/
-1Error and Performance Monitoring for Web & Mobile Apps Using Raygun
/
5Using Luxon for Date and Time in JavaScript
7 /
-2How to Create an Audio Oscillator With the Web Audio API
/
-820 Essential WordPress Utilities to Manage Your Site
/
-4Introduction to API Calls With React and Axios
/
11Beginner’s Guide to Angular 4: HTTP
/
13Rapid Web Deployment for Laravel With GitHub, Linode, and RunCloud.io
/
7Beginners Guide to Angular 4: Routing
/
-10Beginner’s Guide to Angular 4: Services
/
1Beginner’s Guide to Angular 4: Components
/
3Creating a Drop-Down Menu for Mobile Pages
/
9Introduction to Forms in Angular 4: Writing Custom Form Validators
/
510 Best WordPress Booking & Reservation Plugins
/
-1Getting Started With Redux: Connecting Redux With React
/
12Getting Started With Redux: Learn by Example
/
13Getting Started With Redux: Why Redux?
/
11Understanding Recursion With JavaScript
/
2How to Auto Update WordPress Salts
/
-4How to Download Files in Python
/
-2
-19Eloquent Mutators and Accessors in Laravel
1 /
15
-11
1310 Best HTML5 Sliders for Images and Text
/
8
4Introduction to Forms in Angular 4: Template-Driven Forms
/
224 Essential WordPress Utilities to Manage Your Site
/
125 Essential WordPress Utilities to Manage Your Site
/
-8Get Rid of Bugs Quickly Using BugReplay
1 /
-16Manipulating HTML5 Canvas Using Konva: Part 1, Getting Started
/
710 Must-See Easy Digital Downloads Extensions for Your WordPress Site
/
-222 Best WordPress Booking and Reservation Plugins
/
-5Understanding ExpressJS Routing
/
-615 Best WordPress Star Rating Plugins
/
12Creating Your First Angular App: Basics
/
1Inheritance and Extending Objects With JavaScript
/
-11Introduction to the CSS Grid Layout With Examples
1 /
1
5Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes
/
-7Performant Animations Using KUTE.js: Part 4, Animating Text
/
-11Performant Animations Using KUTE.js: Part 3, Animating SVG
/
-9New Course: Code a Quiz App With Vue.js
/
-2Performant Animations Using KUTE.js: Part 2, Animating CSS Properties
/
1
8Performant Animations Using KUTE.js: Part 1, Getting Started
/
110 Best Responsive HTML5 Sliders for Images and Text (Plus 3 Free Options)
/
-3Single-Page Applications With ngRoute and ngAnimate in AngularJS
/
-14Deferring Tasks in Laravel Using Queues
/
-3
2Site Authentication in Node.js: User Signup and Login
/
8Working With Tables in React, Part Two
/
-17Working With Tables in React, Part One
/
1How to Set Up a Scalable, E-Commerce-Ready WordPress Site Using ClusterCS
/
-3New Course on WordPress Conditional Tags
/
2
-11Building With Vue.js 2 and Firebase
6 /
11
-8Best Unique Bootstrap JavaScript Plugins
/
-6
-1Essential JavaScript Libraries and Frameworks You Should Know About
/
5
3Vue.js Crash Course: Create a Simple Blog Using Vue.js
/
-16Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API
/
2API Authentication With Node.js
/
-4Beginner’s Guide to Angular: HTTP
/
8Beginner’s Guide to Angular: Routing
/
-4Beginners Guide to Angular: Routing
/
-4Beginner’s Guide to Angular: Services
/
2Beginner’s Guide to Angular: Components
/
1How to Create a Custom Authentication Guard in Laravel
/
3Learn Computer Science With JavaScript: Part 3, Loops
/
-4Build Web Applications Using Node.js
/
1Learn Computer Science With JavaScript: Part 4, Functions
/
4Learn Computer Science With JavaScript: Part 2, Conditionals
/
13Learn Computer Science With JavaScript: Part 1, The Basics
/
-1Create Interactive Charts Using Plotly.js, Part 5: Pie and Gauge Charts
/
-8Create Interactive Charts Using Plotly.js, Part 4: Bubble and Dot Charts
/
15Create Interactive Charts Using Plotly.js, Part 3: Bar Charts
/
-12Awesome JavaScript Libraries and Frameworks You Should Know About
/
-7Create Interactive Charts Using Plotly.js, Part 2: Line Charts
/
-10Bulk Import a CSV File Into MongoDB Using Mongoose With Node.js
/
-6Build a To-Do API With Node, Express, and MongoDB
/
-6Getting Started With End-to-End Testing in Angular Using Protractor
/
10TypeScript for Beginners, Part 4: Classes
/
-13Object-Oriented Programming With JavaScript
/
410 Best Affiliate WooCommerce Plugins Compared
/
8Stateful vs. Stateless Functional Components in React
/
6Build a To-Do API With Node and Restify
/
7Testing Components in Angular Using Jasmine: Part 2, Services
/
3Testing Components in Angular Using Jasmine: Part 1
/
-1Creating a Blogging App Using React, Part 6: Tags
/
-10React Crash Course for Beginners, Part 3
/
4React Crash Course for Beginners, Part 2
/
5React Crash Course for Beginners, Part 1
/
3Set Up a React Environment, Part 4
1 /
9Set Up a React Environment, Part 3
/
-9New Course: Get Started With Phoenix
/
-7Set Up a React Environment, Part 2
/
2Command Line Basics and Useful Tricks With the Terminal
/
8How to Create a Real-Time Feed Using Phoenix and React
/
-4Build a React App With a Laravel RESTful Back End: Part 1, Laravel 9 API
/
-4Creating a Blogging App Using React, Part 5: Profile Page
/
-1Pagination in CodeIgniter: The Complete Guide
/
22JavaScript-Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG
JavaScript-Based Animations Using Anime.js, Part 3: Values, Timeline, and Playback
Learn to Code With JavaScript: Part 1, The Basics
/
310 Elegant CSS Pricing Tables for Your Latest Web Project
/
-10Getting Started With the Flux Architecture in React
/
-4Getting Started With Matter.js: The Composites and Composite Modules
/
1Getting Started With Matter.js: The Engine and World Modules
/
1310 More Popular HTML5 Projects for You to Use and Study
/
-19Understand the Basics of Laravel Middleware
/
-1Iterating Fast With Django & Heroku
/
10Creating a Blogging App Using React, Part 4: Update & Delete Posts
/
5Creating a jQuery Plugin for Long Shadow Design
/
-12How to Register & Use Laravel Service Providers
2 /
-11Unit Testing in React: Shallow vs. Static Testing
/
4Creating a Blogging App Using React, Part 3: Add & Display Post
/
13Creating a Blogging App Using React, Part 2: User Sign-Up
20 /
-5Creating a Blogging App Using React, Part 1: User Sign-In
/
59 More Popular HTML5 Projects for You to Use and Study
/
12Creating a Grocery List Manager Using Angular, Part 2: Managing Items
/
89 Elegant CSS Pricing Tables for Your Latest Web Project
/
-4Dynamic Page Templates in WordPress, Part 3
/
-2Angular vs. React: 7 Key Features Compared
/
6Creating a Grocery List Manager Using Angular, Part 1: Add & Display Items
/
2New eBooks Available for Subscribers in June 2017
/
5Create Interactive Charts Using Plotly.js, Part 1: Getting Started
/
10The 5 Best IDEs for WordPress Development (And Why)
/
-433 Popular WordPress User Interface Elements
/
1New Course: How to Hack Your Own App
/
-11How to Install Yii on Windows or a Mac
/
5What Is a JavaScript Operator?
/
-7How to Register and Use Laravel Service Providers
/
9
waly Good blog post. I absolutely love this…