dkam/clinch
1
0
Fork 0
Code Issues 2 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add webauthn
Some checks failed
CI / scan_ruby (push) Has been cancelled
Details
CI / scan_js (push) Has been cancelled
Details
CI / lint (push) Has been cancelled
Details
CI / test (push) Has been cancelled
Details
CI / system-test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Dan Milne
2025-11-04 16:20:11 +11:00
parent 19bfc21f11
commit 57abc0b804
14 changed files with 1211 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
app/views/profiles/show.html.erb
View File

@@ -181,6 +181,128 @@
</div>
</div>
<!-- Passkeys (WebAuthn) -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6" data-controller="webauthn" data-webauthn-challenge-url-value="/webauthn/challenge" data-webauthn-create-url-value="/webauthn/create">
<h3 class="text-lg font-medium leading-6 text-gray-900">Passkeys</h3>
<div class="mt-2 max-w-xl text-sm text-gray-500">
<p>Use your fingerprint, face recognition, or security key to sign in without passwords.</p>
</div>
<!-- Add Passkey Form -->
<div class="mt-5">
<div id="add-passkey-form" class="space-y-4">
<div>
<label for="passkey-nickname" class="block text-sm font-medium text-gray-700">Passkey Name</label>
<input type="text"
id="passkey-nickname"
data-webauthn-target="nickname"
placeholder="e.g., MacBook Touch ID, iPhone Face ID"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
<p class="mt-1 text-sm text-gray-500">Give this passkey a memorable name so you can identify it later.</p>
</div>
<div>
<button type="button"
data-action="click->webauthn#register"
data-webauthn-target="submitButton"
class="inline-flex items-center rounded-md border border-transparent bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Add New Passkey
</button>
</div>
<!-- Status Messages -->
<div data-webauthn-target="status" class="hidden mt-2 p-3 rounded-md text-sm"></div>
<div data-webauthn-target="error" class="hidden mt-2 p-3 rounded-md text-sm"></div>
</div>
</div>
<!-- Existing Passkeys List -->
<div class="mt-8">
<h4 class="text-md font-medium text-gray-900 mb-4">Your Passkeys</h4>
<% if @user.webauthn_credentials.exists? %>
<div class="space-y-3">
<% @user.webauthn_credentials.order(created_at: :desc).each do |credential| %>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<% if credential.platform_authenticator? %>
<!-- Platform authenticator icon -->
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<% else %>
<!-- Roaming authenticator icon -->
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
</svg>
<% end %>
</div>
<div>
<div class="text-sm font-medium text-gray-900">
<%= credential.nickname %>
</div>
<div class="text-sm text-gray-500">
<%= credential.authenticator_type.humanize %> •
Last used <%= credential.last_used_ago %>
<% if credential.backed_up? %>
• <span class="text-green-600">Synced</span>
<% end %>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<% if credential.created_recently? %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
New
</span>
<% end %>
<%= link_to webauthn_credential_path(credential),
method: :delete,
data: {
confirm: "Are you sure you want to delete '#{credential.nickname}'? You'll need to set it up again to sign in with this device.",
turbo_method: :delete
},
class: "text-red-600 hover:text-red-800 text-sm font-medium" do %>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
<% end %>
</div>
</div>
<% end %>
</div>
<div class="mt-4 p-3 bg-blue-50 rounded-lg">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-blue-800">
<strong>Tip:</strong> Add passkeys on multiple devices for easy access. Platform authenticators (like Touch ID) are synced across your devices if you use iCloud Keychain or Google Password Manager.
</p>
</div>
</div>
</div>
<% else %>
<div class="text-center py-8">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">No passkeys</h3>
<p class="mt-1 text-sm text-gray-500">Get started by adding your first passkey for passwordless sign-in.</p>
</div>
<% end %>
</div>
</div>
</div>
<script>
function showDisable2FAModal() {
document.getElementById('disable-2fa-modal').classList.remove('hidden');

136
app/views/sessions/new.html.erb
View File

@@ -1,4 +1,4 @@
<div class="mx-auto md:w-2/3 w-full">
<div class="mx-auto md:w-2/3 w-full" data-controller="webauthn" data-webauthn-check-url-value="/webauthn/check">
<div class="mb-8">
<h1 class="font-bold text-4xl">Sign in to Clinch</h1>
</div>
@@ -13,26 +13,138 @@
autocomplete: "username",
placeholder: "your@email.com",
value: params[:email_address],
data: { action: "blur->webauthn#checkWebAuthnSupport change->webauthn#checkWebAuthnSupport" },
class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= form.label :password, class: "block font-medium text-sm text-gray-700" %>
<%= form.password_field :password,
required: true,
autocomplete: "current-password",
placeholder: "Enter your password",
maxlength: 72,
class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
<!-- WebAuthn section - initially hidden -->
<div id="webauthn-section" class="my-5 hidden">
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<p class="text-sm text-green-800">
<strong>Passkey detected!</strong> You can sign in without a password.
</p>
</div>
</div>
<button type="button"
data-action="click->webauthn#authenticate"
class="w-full rounded-md px-3.5 py-2.5 bg-green-600 hover:bg-green-500 text-white font-medium cursor-pointer flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
</svg>
Continue with Passkey
</button>
</div>
<div class="my-5">
<%= form.submit "Sign in",
class: "w-full rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium cursor-pointer" %>
<!-- Password section - shown by default, hidden if WebAuthn is required -->
<div id="password-section">
<div class="my-5">
<%= form.label :password, class: "block font-medium text-sm text-gray-700" %>
<%= form.password_field :password,
required: true,
autocomplete: "current-password",
placeholder: "Enter your password",
maxlength: 72,
class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= form.submit "Sign in",
class: "w-full rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white font-medium cursor-pointer" %>
</div>
</div>
<div class="mt-4 text-sm text-gray-600 text-center">
<%= link_to "Forgot your password?", new_password_path, class: "text-blue-600 hover:text-blue-500 underline" %>
</div>
<% end %>
<!-- Loading overlay -->
<div id="loading-overlay" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 flex items-center">
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Authenticating...</span>
</div>
</div>
<!-- Status messages -->
<div id="status-message" class="hidden mt-4 p-3 rounded-md"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const webauthnController = document.querySelector('[data-controller="webauthn"]');
if (webauthnController) {
// Listen for WebAuthn availability events
webauthnController.addEventListener('webauthn:webauthn-available', function(event) {
console.debug("Received webauthn-available event:", event.detail);
const detail = event.detail;
const webauthnSection = document.getElementById('webauthn-section');
const passwordSection = document.getElementById('password-section');
if (detail.hasWebauthn) {
console.debug("Showing WebAuthn section");
webauthnSection.classList.remove('hidden');
// If WebAuthn is required, hide password section
if (detail.requiresWebauthn) {
passwordSection.classList.add('hidden');
} else {
// Show both options
passwordSection.classList.add('border-t pt-4 mt-4');
// Add an "or" divider
const orDiv = document.createElement('div');
orDiv.className = 'relative my-4';
orDiv.innerHTML = `
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">Or</span>
</div>
`;
webauthnSection.parentNode.insertBefore(orDiv, webauthnSection);
}
} else {
console.debug("WebAuthn not available, keeping section hidden");
}
});
// Listen for WebAuthn registration events (from profile page)
webauthnController.addEventListener('webauthn:passkey-registered', function(event) {
// Show success message
const statusMessage = document.getElementById('status-message');
statusMessage.className = 'mt-4 p-3 rounded-md bg-green-50 text-green-800 border border-green-200';
statusMessage.textContent = 'Passkey registered successfully!';
statusMessage.classList.remove('hidden');
// Hide after 3 seconds
setTimeout(() => {
statusMessage.classList.add('hidden');
}, 3000);
});
}
// Loading overlay management
function showLoading() {
document.getElementById('loading-overlay').classList.remove('hidden');
}
function hideLoading() {
document.getElementById('loading-overlay').classList.add('hidden');
}
// Show loading when WebAuthn authentication starts
document.addEventListener('webauthn:authenticate-start', showLoading);
document.addEventListener('webauthn:authenticate-end', hideLoading);
});
</script>