b1c0a2ede7
Multi-Factor Authentication (MFA), more commonly known as Two-Factor Authentication (2FA), is a method used to require additional verification from users to access a system. It provides an additional layer of security and is an essential feature for any legitimate software. The most commonly used 2FA methods include Time-Based One-Time Passwords (TOTP), SMS codes, WebAuthn (such as physical security keys and Apple passkeys), and recovery codes. We use the rodauth library for authentication, which offers built-in, first-party plugins for popular 2FA methods. Upon enabling these plugins, they function seamlessly without any additional configuration. It was like a miracle. My 2FA commits mostly contain HTML template overwrites for our console UI, some wording changes, and a few UX improvements. No changes were made to the core. We prioritize the use of TOTP or WebAuthn as primary 2FA methods. If the user doesn't have access to these, we offer recovery codes as a backup. The following blog posts heavily inspired my UX improvements: - https://janko.io/adding-multifactor-authentication-in-rails-with-rodauth/ - https://janko.io/passkey-authentication-with-rodauth/ The `two_factor_manage_*` configurations related to managing 2FA methods. Users need to be authenticated already to access this. We display this under the "My Account > Multifactor Auth" section. The `two_factor_auth_*` configurations are for authenticating the user with 2FA. If the user has any 2FA method enabled, they are redirected to the 2FA authentication page after login. They must authenticate using one of the enabled 2FA methods.
13 lines
511 B
Plaintext
13 lines
511 B
Plaintext
<% @page_title = "Two-factor Authentication" %>
|
|
|
|
<% @page_message = "Select a two-factor authentication method" %>
|
|
|
|
<div class="rodauth space-y-6 flex flex-col text-center">
|
|
<% if rodauth.otp_exists? %>
|
|
<%== render("components/button", locals: { text: rodauth.otp_auth_link_text, link: rodauth.otp_auth_path }) %>
|
|
<% end %>
|
|
<% if rodauth.webauthn_setup? %>
|
|
<%== render("components/button", locals: { text: rodauth.webauthn_auth_link_text, link: rodauth.webauthn_auth_path }) %>
|
|
<% end %>
|
|
</div>
|