feat(auth): вход по ключу доступа (passkeys, WebAuthn)

Фаза 7, AGENT.md 7.1: регистрация ключа в настройках безопасности с
обязательным step-up, вход по ключу без пароля (в т.ч. без ввода почты —
обнаруживаемый ключ), несколько ключей на аккаунт, отзыв и переименование,
события безопасности и аудит.

Сервер: github.com/go-webauthn/webauthn (BSD-3-Clause), RP ID и Origin
берутся из конфига домена; если домен — IP-адрес (стенд без домена),
passkeys честно выключены (auth.passkey_unsupported). Церемонии живут в
памяти процесса 5 минут и одноразовые: повторная отправка challenge
отклоняется. Миграция 00018 пересобирает неиспользуемую таблицу
webauthn_credentials под полную запись credential в JSON. Новые ручки
входа ограничены по IP (10/мин).

Клиент: тонкая обёртка над navigator.credentials без тяжёлых SDK,
раздел «Ключи доступа» в настройках безопасности и кнопка «Войти по ключу»
на экране входа; понятные сообщения для браузеров без поддержки WebAuthn
и при отмене диалога.

Тесты: Go — регистрация/вход с эмулятором аутентификатора (реальная
проверка подписи P-256), отказ при чужом challenge, одноразовость
церемонии, обязательный step-up при управлении ключами, запрет входа
забаненному, ограничение allowCredentials при входе с почтой, лимит и
валидация имени; web — 12 vitest с моком navigator.credentials;
Playwright — живой сценарий с виртуальным аутентификатором Chromium.

web/src/pages/LoginPage.tsx

@@ -1,15 +1,18 @@
 import { useState, type FormEvent } from 'react';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useNavigate, useSearchParams } from 'react-router';
 
 import { login } from '@/api/auth';
+import { fetchMeta, metaQueryKey } from '@/api/meta';
+import { loginWithPasskey } from '@/api/passkeys';
 import { ErrorNotice } from '@/components/ui/ErrorNotice';
 import { Field } from '@/components/ui/Field';
 import { Button, Card } from '@/components/ui/primitives';
 import { getQueryClient } from '@/lib/queryClient';
 import { useInstance } from '@/lib/hooks';
 import { errorCode } from '@/lib/format';
+import { isPasskeySupported, WebAuthnClientError } from '@/lib/webauthn';
 import { useGatewayStore } from '@/stores/gateway';
 
 interface LocationState {
@@ -20,6 +23,8 @@ interface LocationState {
  * Форма входа. Поле кода 2FA показывается всегда: сервер принимает и код из
  * приложения (6 цифр), и резервный код вида `a8eh-pshp-t8st`, а при попытке
  * входа без кода отвечает `auth.2fa_required` — тогда подсказываем про код.
+ *
+ * Дополнительно (Фаза 7): вход по ключу доступа (passkeys).
  */
 export default function LoginPage() {
   const { t } = useTranslation();
@@ -39,19 +44,30 @@ export default function LoginPage() {
   const stateFrom = (location.state as LocationState | null)?.from ?? null;
   const from = next !== null && next.startsWith('/') ? next : (stateFrom ?? '/app');
 
+  // Признак доступности passkeys берём из меты инстанса: на IP-адресе (стенд
+  // без домена) WebAuthn невозможен, и кнопку показывать нельзя.
+  const meta = useQuery({
+    queryKey: metaQueryKey,
+    queryFn: ({ signal }) => fetchMeta(signal),
+    staleTime: 60_000,
+  });
+  const passkeySupported = isPasskeySupported() && meta.data?.features.passkeys_enabled === true;
+
+  const finishLogin = async (): Promise<void> => {
+    // Профиль перечитываем заново: cookie уже выставлена сервером. Признак
+    // отозванной сессии снимаем — иначе AuthGuard увёл бы обратно на /login.
+    useGatewayStore.getState().reset();
+    await getQueryClient().invalidateQueries();
+    void navigate(from === '/login' ? '/app' : from, { replace: true });
+  };
+
   const submit = useMutation({
     mutationFn: () => {
       // Пустое поле — вход без кода: сервер сам скажет, нужен ли он.
       const code = totpCode.trim();
       return login(code === '' ? { email, password } : { email, password, totp_code: code });
     },
-    onSuccess: async () => {
-      // Профиль перечитываем заново: cookie уже выставлена сервером. Признак
-      // отозванной сессии снимаем — иначе AuthGuard увёл бы обратно на /login.
-      useGatewayStore.getState().reset();
-      await getQueryClient().invalidateQueries();
-      void navigate(from === '/login' ? '/app' : from, { replace: true });
-    },
+    onSuccess: finishLogin,
     onError: (error: unknown) => {
       if (errorCode(error) === 'auth.2fa_required') {
         // Логин, пароль и уже введённый код остаются в форме.
@@ -60,6 +76,11 @@ export default function LoginPage() {
     },
   });
 
+  const passkey = useMutation({
+    mutationFn: () => loginWithPasskey(email.trim() === '' ? undefined : email.trim()),
+    onSuccess: finishLogin,
+  });
+
   const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
     setNeedsTotp(false);
@@ -68,6 +89,14 @@ export default function LoginPage() {
 
   const registrationEnabled = instance.data?.registration_enabled === true;
 
+  // Ошибка клиента WebAuthn важнее серверной: она объясняет, что делать.
+  const passkeyErrorKey =
+    passkey.error instanceof WebAuthnClientError && passkey.error.code === 'cancelled'
+      ? 'auth.login.passkeyCancelled'
+      : passkey.error instanceof WebAuthnClientError && passkey.error.code === 'unsupported'
+        ? 'auth.login.passkeyUnsupported'
+        : null;
+
   return (
     <main className="gl-page mx-auto flex min-h-full w-full max-w-md flex-col justify-center gap-5 px-4 py-10">
       <header>
@@ -120,6 +149,29 @@ export default function LoginPage() {
           </Button>
         </form>
 
+        {passkeySupported ? (
+          <div className="mt-4 flex flex-col gap-2">
+            <Button
+              variant="ghost"
+              data-testid="passkey-login"
+              disabled={passkey.isPending}
+              onClick={() => {
+                setNeedsTotp(false);
+                passkey.mutate();
+              }}
+            >
+              {t(passkey.isPending ? 'auth.login.passkeyPending' : 'auth.login.passkeySubmit')}
+            </Button>
+            {passkeyErrorKey === null ? (
+              <ErrorNotice error={passkey.error} />
+            ) : (
+              <p className="text-sm text-danger" role="alert" data-testid="passkey-error">
+                {t(passkeyErrorKey)}
+              </p>
+            )}
+          </div>
+        ) : null}
+
         <p className="mt-4 text-sm text-fg-muted">
           {t('auth.login.noAccount')}{' '}
           {registrationEnabled ? (

web/src/pages/settings/PasskeysSection.tsx

@@ -0,0 +1,267 @@
+import { useCallback, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { stepUp } from '@/api/auth';
+import {
+  deletePasskey,
+  fetchPasskeys,
+  passkeysQueryKey,
+  registerPasskey,
+  renamePasskey,
+  type Passkey,
+} from '@/api/passkeys';
+import { ErrorNotice } from '@/components/ui/ErrorNotice';
+import { Field } from '@/components/ui/Field';
+import { Button, Card } from '@/components/ui/primitives';
+import { errorCode } from '@/lib/format';
+import { isPasskeySupported, WebAuthnClientError } from '@/lib/webauthn';
+
+/** Ключ i18n для ошибки клиента WebAuthn (AGENT.md 7.1, Фаза 7). */
+function passkeyErrorKey(error: unknown): string | null {
+  if (error instanceof WebAuthnClientError) {
+    switch (error.code) {
+      case 'unsupported':
+        return 'settings.security.passkeysUnsupported';
+      case 'cancelled':
+        return 'settings.security.passkeysCancelled';
+      case 'timeout':
+        return 'settings.security.passkeysTimeout';
+      case 'invalid_state':
+        return 'settings.security.passkeysAlreadyRegistered';
+      default:
+        return 'settings.security.passkeysFailed';
+    }
+  }
+  if (errorCode(error) === 'auth.passkey_name_invalid') {
+    return 'settings.security.passkeysNameRequired';
+  }
+  return null;
+}
+
+/**
+ * Ключи доступа (passkeys): список, добавление, переименование и отзыв.
+ * Управление ключами — чувствительное действие, поэтому сервер требует
+ * свежий step-up: пароль (и код 2FA) спрашиваем прямо в разделе.
+ *
+ * Если браузер не поддерживает WebAuthn, раздел честно сообщает об этом и не
+ * показывает форму добавления (AGENT.md 7.1: понятные ошибки для браузеров
+ * без поддержки).
+ */
+export function PasskeysSection({ twoFactorEnabled }: { twoFactorEnabled: boolean }) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const supported = isPasskeySupported();
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [code, setCode] = useState('');
+  const [notice, setNotice] = useState<string | null>(null);
+  const [removeTarget, setRemoveTarget] = useState<Passkey | null>(null);
+
+  const passkeys = useQuery({
+    queryKey: passkeysQueryKey,
+    queryFn: ({ signal }) => fetchPasskeys(signal),
+    enabled: supported,
+  });
+
+  const refresh = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: passkeysQueryKey });
+  }, [queryClient]);
+
+  const clearCredentials = useCallback(() => {
+    setPassword('');
+    setCode('');
+  }, []);
+
+  const add = useMutation({
+    mutationFn: () => registerPasskey(name.trim(), password, twoFactorEnabled ? code : undefined),
+    onSuccess: (passkey) => {
+      setNotice(t('settings.security.passkeysAdded', { name: passkey.name }));
+      setName('');
+      clearCredentials();
+      refresh();
+    },
+  });
+
+  const remove = useMutation({
+    mutationFn: async () => {
+      if (removeTarget === null) {
+        return;
+      }
+      // Свежий step-up, затем отзыв ключа.
+      await stepUp(password, twoFactorEnabled ? code : undefined);
+      await deletePasskey(removeTarget.id);
+    },
+    onSuccess: () => {
+      setNotice(t('settings.security.passkeysRemoved'));
+      setRemoveTarget(null);
+      clearCredentials();
+      refresh();
+    },
+  });
+
+  const rename = useMutation({
+    mutationFn: (payload: { passkey: Passkey; next: string }) =>
+      renamePasskey(payload.passkey.id, payload.next),
+    onSuccess: () => {
+      setNotice(t('settings.security.passkeysRenamed'));
+      refresh();
+    },
+  });
+
+  const errorKey = passkeyErrorKey(add.error ?? remove.error ?? rename.error);
+  const canSubmit = supported && name.trim() !== '' && password !== '' && !add.isPending;
+
+  return (
+    <Card>
+      <h2 className="text-lg font-semibold">{t('settings.security.passkeysTitle')}</h2>
+      <p className="mt-1 text-sm text-fg-muted">{t('settings.security.passkeysDescription')}</p>
+
+      {!supported ? (
+        <p className="mt-3 text-sm text-warning" role="status" data-testid="passkeys-unsupported">
+          {t('settings.security.passkeysUnsupported')}
+        </p>
+      ) : (
+        <>
+          <ul className="mt-4 flex flex-col gap-2" data-testid="passkeys-list">
+            {(passkeys.data ?? []).map((passkey) => (
+              <li
+                key={passkey.id}
+                className="flex flex-wrap items-center justify-between gap-2 rounded-[var(--radius-md)] border border-border/60 bg-surface-2/60 p-3"
+              >
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium" data-testid="passkey-name">
+                    {passkey.name}
+                  </p>
+                  <p className="text-xs text-fg-muted">
+                    {t('settings.security.passkeysCreated', {
+                      date: new Date(passkey.created_at).toLocaleDateString(),
+                    })}
+                    {passkey.last_used_at === undefined
+                      ? ` · ${t('settings.security.passkeysNeverUsed')}`
+                      : ` · ${t('settings.security.passkeysLastUsed', {
+                          date: new Date(passkey.last_used_at).toLocaleString(),
+                        })}`}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    onClick={() => {
+                      const next = window.prompt(
+                        t('settings.security.passkeysRenamePrompt'),
+                        passkey.name,
+                      );
+                      if (next !== null && next.trim() !== '') {
+                        rename.mutate({ passkey, next: next.trim() });
+                      }
+                    }}
+                  >
+                    {t('settings.security.passkeysRename')}
+                  </Button>
+                  <Button variant="ghost" onClick={() => setRemoveTarget(passkey)}>
+                    {t('settings.security.passkeysRemove')}
+                  </Button>
+                </div>
+              </li>
+            ))}
+            {passkeys.data !== undefined && passkeys.data.length === 0 ? (
+              <li className="text-sm text-fg-muted" data-testid="passkeys-empty">
+                {t('settings.security.passkeysEmpty')}
+              </li>
+            ) : null}
+          </ul>
+
+          <form
+            className="mt-4 flex flex-col gap-3 rounded-[var(--radius-md)] border border-border/60 p-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              setNotice(null);
+              if (canSubmit) {
+                add.mutate();
+              }
+            }}
+          >
+            <h3 className="text-sm font-semibold">{t('settings.security.passkeysAddTitle')}</h3>
+            <p className="text-xs text-fg-muted">{t('settings.security.passkeysAddHint')}</p>
+            <Field
+              label={t('settings.security.passkeysName')}
+              name="passkey_name"
+              maxLength={64}
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t('settings.security.passkeysNamePlaceholder')}
+              required
+            />
+            <Field
+              label={t('settings.security.stepUpPassword')}
+              type="password"
+              name="passkey_step_up_password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              required
+            />
+            {twoFactorEnabled ? (
+              <Field
+                label={t('auth.login.totp')}
+                hint={t('auth.login.totpHint')}
+                name="passkey_step_up_totp"
+                inputMode="numeric"
+                autoComplete="one-time-code"
+                maxLength={8}
+                value={code}
+                onChange={(event) => setCode(event.target.value)}
+              />
+            ) : null}
+            {notice === null ? null : (
+              <p className="text-sm text-success" role="status">
+                {notice}
+              </p>
+            )}
+            {errorKey === null ? (
+              <ErrorNotice error={add.error ?? remove.error ?? rename.error} />
+            ) : (
+              <p className="text-sm text-danger" role="alert" data-testid="passkeys-error">
+                {t(errorKey)}
+              </p>
+            )}
+            <div className="flex justify-end">
+              <Button type="submit" disabled={!canSubmit}>
+                {t(add.isPending ? 'common.saving' : 'settings.security.passkeysAdd')}
+              </Button>
+            </div>
+          </form>
+
+          {removeTarget === null ? null : (
+            <div className="mt-3 rounded-[var(--radius-md)] border border-warning/50 bg-warning/10 p-3">
+              <p className="text-sm">
+                {t('settings.security.passkeysRemoveConfirm', { name: removeTarget.name })}
+              </p>
+              <div className="mt-2 flex justify-end gap-2">
+                <Button
+                  variant="ghost"
+                  onClick={() => {
+                    setRemoveTarget(null);
+                    remove.reset();
+                  }}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  disabled={remove.isPending || password === ''}
+                  onClick={() => {
+                    setNotice(null);
+                    remove.mutate();
+                  }}
+                >
+                  {t('settings.security.passkeysRemoveConfirmButton')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </Card>
+  );
+}

web/src/pages/settings/SecuritySettingsPage.tsx

@@ -2,13 +2,14 @@ import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
 import { currentUserQueryKey, fetchCurrentUser } from '@/api/users';
+import { PasskeysSection } from '@/pages/settings/PasskeysSection';
 import { PasswordSection } from '@/pages/settings/PasswordSection';
 import { SessionsSection } from '@/pages/settings/SessionsSection';
 import { TwoFactorSection } from '@/pages/settings/TwoFactorSection';
 
 /**
  * Безопасность: смена пароля со step-up, список сессий с выходом на всех
- * устройствах и включение 2FA с показом секрета и кодов восстановления.
+ * устройствах, включение 2FA и ключи доступа (passkeys, Фаза 7).
  *
  * Состояние 2FA берём из профиля (`totp_enabled`), обновляя запрос после
  * включения: от него зависит, требовать ли код при step-up.
@@ -35,6 +36,7 @@ export default function SecuritySettingsPage() {
           void currentUser.refetch();
         }}
       />
+      <PasskeysSection twoFactorEnabled={twoFactorEnabled} />
     </div>
   );
 }