Add passkeys (WebAuthn): register from the profile, log in without email

New library dependency: lbuchs/webauthn (^2.2, MIT, zero transitive deps
beyond PHP+OpenSSL+Mbstring, both already required). 'none' attestation --
this only confirms "the same device that registered", not hardware
provenance, the standard trust model for a public site's own passkey login.

Backend
- migrations/010: `passkeys` (one row per registered credential: owner,
  credential_id, public_key, sign_count, label) and `webauthn_challenges`
  (short-lived, single-use, bridging each ceremony's "options" and "verify"
  calls -- user_id set for a registration, null for a login since who's
  signing in isn't known until the credential comes back).
- Config: WEBAUTHN_RP_ID (defaults to APP_URL's host) and WEBAUTHN_RP_NAME.
- PasskeyRepository, WebAuthnChallengeRepository, PasskeyController:
  GET/POST /api/passkeys, POST /api/passkeys/options, DELETE
  /api/passkeys/{id} (all auth), plus the public POST /api/auth/passkey/
  options and /verify for login. Registration always asks for a
  discoverable, user-verified credential -- what makes login usernameless:
  the browser offers whatever passkeys it has for the site, no email first.
- SessionPayload now also exposes `has_passkey` on every user object
  (PasskeyRepository::countForUser() > 0), reused by both the profile page
  and the dismissible notice.
- PasskeyTest: auth guards, options response shape, challenge single-use/
  expiry/purpose/cross-user rules, malformed-input handling, list/remove
  CRUD (seeded rows) -- everything short of a real signature, which isn't
  practical from PHPUnit. 73 tests pass.

Frontend
- lib/webauthn.ts: base64url <-> ArrayBuffer conversion and the two
  ceremonies (registerPasskey, loginWithPasskey), matching the API's wire
  format exactly.
- ProfileView: a Passkeys section -- list with Remove buttons, an "Add a
  passkey" form (label pre-filled from a UA guess).
- LoginView: a "Log in with a passkey" button above the email form, shown
  only when the browser supports WebAuthn.
- PasskeyNotice.vue: dismissible banner across the top of the page
  (`user.has_passkey === false`); dismissal is a week-long localStorage
  timestamp.

Verified against the rebuilt container using a Chrome DevTools Protocol
*virtual authenticator* (real ECDSA signing, no human interaction) end to
end: notice shown -> register a passkey -> notice gone (same page and after
navigating) -> log out -> "Log in with a passkey" with no email typed ->
correct account, notice still gone -> remove the passkey -> notice back ->
dismiss -> stays hidden for ~7 days across pages. Along the way, caught and
fixed a real bug: AuthenticatorData::getCredentialId() returns a raw binary
string, not a ByteBuffer like most of this library's other binary fields --
bin2hex() it directly rather than calling ->getHex().

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 19:34:53 +01:00
co-authored by Claude Sonnet 5
parent 7da881bb78
commit afdd53ec4c
22 changed files with 1366 additions and 22 deletions
+25 -1
View File
@@ -9,6 +9,7 @@ use App\Http\Controllers\AuthController;
use App\Http\Controllers\CardController;
use App\Http\Controllers\CardStatusController;
use App\Http\Controllers\EmailVerificationController;
use App\Http\Controllers\PasskeyController;
use App\Http\Controllers\ProjectController;
use App\Http\JsonErrorHandler;
use App\Mail\EmailVerifier;
@@ -18,10 +19,13 @@ use App\Mail\PhpMailerMailer;
use App\Repository\CardRepository;
use App\Repository\CardStatusRepository;
use App\Repository\EmailVerificationRepository;
use App\Repository\PasskeyRepository;
use App\Repository\ProjectRepository;
use App\Repository\UserRepository;
use App\Repository\WebAuthnChallengeRepository;
use App\Support\Config;
use App\Support\Database;
use lbuchs\WebAuthn\WebAuthn;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;
use Slim\Factory\AppFactory;
@@ -47,8 +51,10 @@ $projects = new ProjectRepository($database->pdo());
$cards = new CardRepository($database->pdo());
$cardStatuses = new CardStatusRepository($database->pdo());
$verificationTokens = new EmailVerificationRepository($database->pdo());
$passkeys = new PasskeyRepository($database->pdo());
$webauthnChallenges = new WebAuthnChallengeRepository($database->pdo());
$jwt = new JwtService($config->jwtSecret, $config->jwtTtl);
$session = new SessionPayload($jwt, $verificationTokens);
$session = new SessionPayload($jwt, $verificationTokens, $passkeys);
/** @var Mailer $mailer */
$mailer = $config->mail->transport === 'log'
@@ -56,11 +62,19 @@ $mailer = $config->mail->transport === 'log'
: new PhpMailerMailer($config->mail);
$verifier = new EmailVerifier($verificationTokens, $users, $mailer, $config->appUrl);
// 'none' attestation: verify the credential is a legitimate WebAuthn response
// without checking authenticator provenance against a root CA -- the usual
// choice for "log in with the same device you registered", not a fleet of
// company-issued security keys. useBase64UrlEncoding=true so the challenge/
// ids in getCreateArgs()/getGetArgs() JSON straight to the frontend.
$webAuthn = new WebAuthn($config->webauthnRpName, $config->webauthnRpId, ['none'], true);
$authController = new AuthController($users, $session, $verifier, $config->allowRegistration);
$emailController = new EmailVerificationController($users, $verificationTokens, $verifier, $session);
$projectController = new ProjectController($projects, $cardStatuses);
$cardController = new CardController($projects, $cards, $cardStatuses);
$cardStatusController = new CardStatusController($projects, $cardStatuses);
$passkeyController = new PasskeyController($webAuthn, $passkeys, $webauthnChallenges, $users, $session);
$authMiddleware = new AuthMiddleware($jwt, $users);
// --- Routes ---------------------------------------------------------------
@@ -71,6 +85,7 @@ $app->group('/api', function (RouteCollectorProxy $group) use (
$projectController,
$cardController,
$cardStatusController,
$passkeyController,
$authMiddleware,
) {
$group->get('/health', function (Request $request, Response $response): Response {
@@ -80,10 +95,19 @@ $app->group('/api', function (RouteCollectorProxy $group) use (
$group->post('/auth/magic-link', [$authController, 'requestLoginLink']);
$group->post('/auth/verify-email', [$emailController, 'verify']);
$group->post('/auth/passkey/options', [$passkeyController, 'loginOptions']);
$group->post('/auth/passkey/verify', [$passkeyController, 'loginVerify']);
$group->get('/me', [$authController, 'me'])->add($authMiddleware);
$group->post('/email/change', [$emailController, 'requestChange'])->add($authMiddleware);
$group->group('/passkeys', function (RouteCollectorProxy $passkeys) use ($passkeyController) {
$passkeys->get('', [$passkeyController, 'index']);
$passkeys->post('', [$passkeyController, 'store']);
$passkeys->post('/options', [$passkeyController, 'registerOptions']);
$passkeys->delete('/{passkeyId:[0-9]+}', [$passkeyController, 'destroy']);
})->add($authMiddleware);
$group->group('/projects', function (RouteCollectorProxy $projects) use (
$projectController,
$cardController,