Enable Two-Factor Authentication

Scan the QR code below with your authenticator app, then enter the verification code to confirm.

Step 1: Scan QR Code

<%= @qr_code.as_svg( module_size: 4, color: "000", shape_rendering: "crispEdges", standalone: true ).html_safe %>

Use an authenticator app like Google Authenticator, Authy, or 1Password to scan this code.

Can't scan the QR code?

Enter this key manually in your authenticator app:

<%= @totp_secret %>

Step 2: Verify

<%= form_with url: totp_path, method: :post, class: "space-y-4" do |form| %> <%= hidden_field_tag :totp_secret, @totp_secret %>

<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700" %> <%= text_field_tag :code, nil, placeholder: "000000", maxlength: 6, required: true, autofocus: true, autocomplete: "off", class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono" %>

Enter the 6-digit code from your authenticator app

<%= form.submit "Verify and Enable 2FA", class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %> <%= link_to "Cancel", profile_path, class: "inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>

<% end %>

Important: Save your backup codes

After verifying, you'll be shown backup codes. Save these in a safe place - they can be used to access your account if you lose your device.