spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update docs and AI assistant for passkey biometric login

Browse Source 
- HelpKnowledgeBase: passkey entry under USER PROFILE section with
  full how-it-works detail (setup, login flow, browser requirements,
  account-lock enforcement, per-device management)
- UserProfile help article: new Passkeys & Biometrics section between
  Two-Factor Auth and Appearance, with setup steps, login steps,
  browser compatibility note, and lost-device warning
- TOC nav link added to UserProfile article sidebar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-04-25 15:08:46 -04:00
parent 0bb96a502a
commit 90a5a028ad
2 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/Views/Help/UserProfile.cshtml
+59
View File
@@ -169,6 +169,64 @@
</div>
</section>
<section id="passkeys" class="mb-5">
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
<i class="bi bi-fingerprint text-primary me-2"></i>Passkeys &amp; Biometric Login
</h2>
<p>
Passkeys let you sign in using your device's built-in biometrics — Face ID or Touch ID on iPhone and Mac,
fingerprint or face unlock on Android, or Windows Hello on a PC — without ever typing your password.
This is especially useful for shop floor workers who may have dirty or gloved hands.
</p>
<h5 class="fw-semibold mt-3 mb-2">Setting Up a Passkey</h5>
<ol class="mb-3">
<li class="mb-1">Log in with your password as normal.</li>
<li class="mb-1">
A prompt appears in the bottom-right corner of the screen after login. Click
<strong>Enable</strong> and follow the device prompt (Face ID, fingerprint, Windows Hello PIN, etc.).
</li>
<li class="mb-1">The passkey is saved to that device. Repeat on each device you want to use biometrics on.</li>
</ol>
<p>
Alternatively, go to <a href="/Passkey/Manage">Passkeys &amp; Biometrics</a> from the user
menu (top-right) at any time to add a new passkey for the current device.
</p>
<h5 class="fw-semibold mt-3 mb-2">Signing In with a Passkey</h5>
<ol class="mb-3">
<li class="mb-1">Open the login page.</li>
<li class="mb-1">
Click the <strong>Use Face ID / Biometric</strong> button (the label matches your device —
"Use Windows Hello", "Use Touch ID", etc.).
</li>
<li class="mb-1">Follow the device prompt. You are signed in immediately — no password required.</li>
</ol>
<div class="alert alert-permanent alert-info d-flex gap-2 mb-3" role="alert">
<i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
<div>
The biometric button only appears if your browser and device support passkeys
(Safari 16+, Chrome 108+, Edge 108+, or any modern Android browser over HTTPS).
On unsupported browsers it is hidden automatically.
</div>
</div>
<h5 class="fw-semibold mt-3 mb-2">Managing Passkeys</h5>
<p>
Go to <a href="/Passkey/Manage">Passkeys &amp; Biometrics</a> (user menu → Passkeys &amp; Biometrics)
to see all devices you have enrolled. Each entry shows the device name, the date it was added,
and when it was last used. Click <strong>Remove</strong> to revoke a passkey from a specific device —
useful if you lose a phone or change devices.
</p>
<div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
<i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
<div>
Removing a passkey does not log you out — it just means that device will require a password
on the next login. If you lose a device, remove its passkey here as soon as possible.
</div>
</div>
</section>
<section id="appearance" class="mb-5">
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
<i class="bi bi-palette text-primary me-2"></i>Appearance
@@ -224,6 +282,7 @@
<a class="nav-link py-1 px-3 small text-body" href="#changing-password">Changing Your Password</a>
<a class="nav-link py-1 px-3 small text-body" href="#profile-photo">Profile Photo</a>
<a class="nav-link py-1 px-3 small text-body" href="#two-factor-auth">Two-Factor Auth</a>
<a class="nav-link py-1 px-3 small text-body" href="#passkeys">Passkeys &amp; Biometrics</a>
<a class="nav-link py-1 px-3 small text-body" href="#appearance">Appearance</a>
</nav>
</div>