Multi-Factor Authentication for Rails with WebAuthn and Devise

• Devise

  93 23,706 7.1 Ruby

  Flexible authentication solution for Rails with Warden.

  

In this article, I will demonstrate how to implement WebAuthn with Devise, a popular authentication library for Rails. All the mentioned options (security keys, Windows Hello, and Apple Touch/Face ID) will be available to use within the application.

• webauthn-with-devise

  1 16 0.0 Ruby

  The companion app for the article "Secure authentication for Rails with WebAuthn and Devise"

I created a GitHub repository with all of the code used in this article. The application uses Rails 6.1 with Turbo and Stimulus. When I use Turbo, I will also inform you of an option that can be used when Turbo is not available in your application.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• vite_ruby

  25 1,146 7.1 Ruby

  ⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience

The main difference in this application compared to Rails defaults is the use of Vite instead of Webpacker. Vite is just a modern alternative to Webpack. If you are already using Webpacker, you only need to change the path for the Stimulus controllers (probably app/javascript/controllers instead of app/frontend/controllers/, which is used with Vite).

• webauthn-ruby

  5 617 5.9 Ruby

  WebAuthn ruby server library ― Make your Ruby/Rails web server become a conformant WebAuthn Relying Party

  

Luckily, there is a WebAuthn gem for Ruby (thanks!) that will do all the hard work for us. Just run bundle add webauthn.

• webauthn-json

  1 719 1.5 TypeScript

  🔏 A small WebAuthn API wrapper that translates to/from pure JSON using base64url.

  

First, we will add the necessary NPM packages. We will use @github/webauthn-json as a nice wrapper for the WebAuthn API and @rails/request.js for easier requests to the backend (with built-in Turbo Stream support).

• request.js

  11 362 5.3 JavaScript
  

First, we will add the necessary NPM packages. We will use @github/webauthn-json as a nice wrapper for the WebAuthn API and @rails/request.js for easier requests to the backend (with built-in Turbo Stream support).

• Tailwind CSS

  1,276 78,166 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

For some styling and icons, I used Tailwind CSS 2 and Font Awesome 5 in a free version.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Ruby on Rails

  467 54,865 10.0 Ruby

  Ruby on Rails

  

There are several ways to add multi-factor authentication (MFA) for safer user authentication. Let’s look at how to add a modern MFA approach to a Rails application with WebAuthn.

• Font-Awesome

  211 72,999 5.0 JavaScript

  The iconic SVG, font, and CSS toolkit

  

For some styling and icons, I used Tailwind CSS 2 and Font Awesome 5 in a free version.

• Bitwarden

  1,055 14,286 9.8 C#

  The core infrastructure backend (API, database, Docker, etc). (by bitwarden)

  

The most common MFA methods utilize OTPs via SMS (which are not as secure as they seem to be) or an authenticator application, such as the Google Authenticator app, or a modern password manager (such as Bitwarden or 1Password).

Suggest a related project