feat: implement device login approval system

Add a complete device authentication approval flow that allows users to approve login requests from new devices on their already-authenticated devices. Core features: - Create authentication requests when logging in from new devices - Display pending requests with device info, IP address, and fingerprint phrases - Approve or deny requests from web interface with real-time notifications - Support multiple auth request types (authenticate & unlock, unlock only) - Automatic expiration and cleanup of stale requests Backend changes: - Add auth_requests table with proper indexes for efficient queries - Implement full CRUD API for authentication requests - Add notification hub integration for real-time updates - Add device fingerprint phrase generation for security verification Frontend changes: - Add AuthRequestApprovalDialog component for approving/denying requests - Add PendingAuthRequestsPanel component to display and manage pending requests - Integrate panels into Security and Settings pages - Add fingerprint wordlist for generating human-readable verification phrases - Update i18n translations for all supported languages Security considerations: - Access code verification to prevent unauthorized access - Device fingerprint validation for additional security layer - IP address and country tracking for audit purposes - Automatic expiration of old requests (15 minutes) - Only most recent request per device can be approved Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-20 13:00:39 +00:00 · 2026-06-12 13:12:11 +08:00
parent e9aef72df7
commit c652cc1533
27 changed files with 9187 additions and 92 deletions
@@ -188,6 +188,33 @@ CREATE TABLE IF NOT EXISTS devices (
 CREATE INDEX IF NOT EXISTS idx_devices_user_updated ON devices(user_id, updated_at);
 CREATE INDEX IF NOT EXISTS idx_devices_user_last_seen ON devices(user_id, last_seen_at);

+CREATE TABLE IF NOT EXISTS auth_requests (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  organization_id TEXT,
+  type INTEGER NOT NULL,
+  request_device_identifier TEXT NOT NULL,
+  request_device_type INTEGER NOT NULL,
+  request_ip_address TEXT,
+  request_country_name TEXT,
+  response_device_identifier TEXT,
+  access_code TEXT NOT NULL,
+  public_key TEXT NOT NULL,
+  key TEXT,
+  master_password_hash TEXT,
+  approved INTEGER,
+  creation_date TEXT NOT NULL,
+  response_date TEXT,
+  authentication_date TEXT,
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+CREATE INDEX IF NOT EXISTS idx_auth_requests_user_created
+  ON auth_requests(user_id, creation_date);
+CREATE INDEX IF NOT EXISTS idx_auth_requests_user_pending
+  ON auth_requests(user_id, approved, response_date, authentication_date, creation_date);
+CREATE INDEX IF NOT EXISTS idx_auth_requests_device_pending
+  ON auth_requests(user_id, request_device_identifier, creation_date);
+
 CREATE TABLE IF NOT EXISTS trusted_two_factor_device_tokens (
  token TEXT PRIMARY KEY,
  user_id TEXT NOT NULL,
@@ -5,13 +5,17 @@ const SIGNALR_RECORD_SEPARATOR = 0x1e;
 const SIGNALR_HANDSHAKE_ACK = new Uint8Array([0x7b, 0x7d, SIGNALR_RECORD_SEPARATOR]);
 const SIGNALR_UPDATE_TYPE_SYNC_VAULT = 5;
 const SIGNALR_UPDATE_TYPE_LOG_OUT = 11;
-const SIGNALR_UPDATE_TYPE_DEVICE_STATUS = 12;
 const SIGNALR_UPDATE_TYPE_BACKUP_RESTORE_PROGRESS = 13;
+const SIGNALR_UPDATE_TYPE_AUTH_REQUEST = 15;
+const SIGNALR_UPDATE_TYPE_AUTH_REQUEST_RESPONSE = 16;

 type HubProtocol = 'json' | 'messagepack';
+type HubKind = 'user' | 'anonymous-auth-request';

 interface WsAttachment {
-  userId: string;
+  kind: HubKind;
+  userId: string | null;
+  authRequestId: string | null;
  handshakeComplete: boolean;
  protocol: HubProtocol;
  deviceIdentifier: string | null;
@@ -137,11 +141,12 @@ function frameSignalRBinary(payload: Uint8Array): Uint8Array {
 function buildSignalRJsonInvocation(
  updateType: number,
  payload: Record<string, unknown>,
-  contextId: string | null
+  contextId: string | null,
+  target: string = 'ReceiveMessage'
 ): string {
  return JSON.stringify({
    type: 1,
-    target: 'ReceiveMessage',
+    target,
    arguments: [
        {
          ContextId: contextId,
@@ -155,7 +160,8 @@ function buildSignalRJsonInvocation(
 function buildSignalRMessagePackInvocation(
  updateType: number,
  messagePayload: Record<string, unknown>,
-  contextId: string | null
+  contextId: string | null,
+  target: string = 'ReceiveMessage'
 ): Uint8Array {
  // SignalR MessagePack hub protocol uses an array-based invocation shape:
  // [type, headers, invocationId, target, arguments]
@@ -163,7 +169,7 @@ function buildSignalRMessagePackInvocation(
    1,
    {},
    null,
-    'ReceiveMessage',
+    target,
    [
      {
        ContextId: contextId,
@@ -213,6 +219,20 @@ export class NotificationsHub extends DurableObject<Env> {
      return new Response(null, { status: 204 });
    }

+    if (url.pathname === '/internal/auth-request-response' && request.method === 'POST') {
+      const body = (await request.json().catch(() => null)) as {
+        userId?: string;
+        authRequestId?: string;
+        contextId?: string | null;
+      } | null;
+      const userId = String(body?.userId || '').trim();
+      const authRequestId = String(body?.authRequestId || '').trim();
+      if (!userId || !authRequestId) return new Response('Invalid auth request notification', { status: 400 });
+
+      this.broadcastAuthRequestResponse(userId, authRequestId, String(body?.contextId || '').trim() || null);
+      return new Response(null, { status: 204 });
+    }
+
    if (url.pathname === '/internal/online' && request.method === 'GET') {
      return new Response(JSON.stringify({ deviceIdentifiers: this.getOnlineDeviceIdentifiers() }), {
        status: 200,
@@ -222,7 +242,7 @@ export class NotificationsHub extends DurableObject<Env> {
      });
    }

-    if (url.pathname !== '/notifications/hub') {
+    if (url.pathname !== '/notifications/hub' && url.pathname !== '/notifications/anonymous-hub') {
      return new Response('Not found', { status: 404 });
    }

@@ -232,8 +252,13 @@ export class NotificationsHub extends DurableObject<Env> {

    const requestUserId = String(url.searchParams.get('nw_uid') || '').trim();
    const requestDeviceIdentifier = String(url.searchParams.get('nw_did') || '').trim() || null;
+    const requestAuthRequestId = String(url.searchParams.get('nw_auth_request_id') || '').trim() || null;
+    const isAnonymousAuthRequestHub = url.pathname === '/notifications/anonymous-hub';

-    if (!requestUserId) {
+    if (!isAnonymousAuthRequestHub && !requestUserId) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+    if (isAnonymousAuthRequestHub && !requestAuthRequestId) {
      return new Response('Unauthorized', { status: 401 });
    }

@@ -248,7 +273,9 @@ export class NotificationsHub extends DurableObject<Env> {
    this.ctx.acceptWebSocket(server, tags);

    server.serializeAttachment({
-      userId: requestUserId,
+      kind: isAnonymousAuthRequestHub ? 'anonymous-auth-request' : 'user',
+      userId: isAnonymousAuthRequestHub ? null : requestUserId,
+      authRequestId: requestAuthRequestId,
      handshakeComplete: false,
      protocol: 'messagepack',
      deviceIdentifier: requestDeviceIdentifier,
@@ -274,7 +301,6 @@ export class NotificationsHub extends DurableObject<Env> {
          attachment.handshakeComplete = true;
          ws.serializeAttachment(attachment);
          ws.send(SIGNALR_HANDSHAKE_ACK);
-          this.broadcastDeviceStatus(attachment.userId);
          return;
        } catch {
          // Ignore malformed pre-handshake payloads.
@@ -293,26 +319,22 @@ export class NotificationsHub extends DurableObject<Env> {
  }

  async webSocketClose(ws: WebSocket, code: number, reason: string, wasClean: boolean): Promise<void> {
-    const attachment = ws.deserializeAttachment() as WsAttachment | null;
-    const shouldBroadcast = !!attachment?.handshakeComplete;
-    if (shouldBroadcast && attachment?.userId) {
-      this.broadcastDeviceStatus(attachment.userId);
-    }
+    void ws;
+    void code;
+    void reason;
+    void wasClean;
  }

  async webSocketError(ws: WebSocket, error: unknown): Promise<void> {
-    const attachment = ws.deserializeAttachment() as WsAttachment | null;
-    const shouldBroadcast = !!attachment?.handshakeComplete;
-    if (shouldBroadcast && attachment?.userId) {
-      this.broadcastDeviceStatus(attachment.userId);
-    }
+    void ws;
+    void error;
  }

  private getOnlineDeviceIdentifiers(): string[] {
    const out = new Set<string>();
    for (const ws of this.ctx.getWebSockets()) {
      const attachment = ws.deserializeAttachment() as WsAttachment | null;
-      if (!attachment?.handshakeComplete || !attachment.deviceIdentifier) continue;
+      if (!attachment?.handshakeComplete || attachment.kind !== 'user' || !attachment.deviceIdentifier) continue;
      out.add(attachment.deviceIdentifier);
    }
    return Array.from(out);
@@ -349,16 +371,45 @@ export class NotificationsHub extends DurableObject<Env> {
    }
  }

-  private broadcastDeviceStatus(userId: string): void {
-    this.broadcastMessage(
-      SIGNALR_UPDATE_TYPE_DEVICE_STATUS,
-      {
+  private broadcastAuthRequestResponse(userId: string, authRequestId: string, contextId: string | null): void {
+    for (const ws of this.ctx.getWebSockets()) {
+      const attachment = ws.deserializeAttachment() as WsAttachment | null;
+      if (
+        !attachment?.handshakeComplete ||
+        attachment.kind !== 'anonymous-auth-request' ||
+        attachment.authRequestId !== authRequestId
+      ) {
+        continue;
+      }
+
+      const payload = {
        UserId: userId,
-        Date: new Date().toISOString(),
-      },
-      null,
-      null
-    );
+        Id: authRequestId,
+      };
+      try {
+        if (attachment.protocol === 'json') {
+          ws.send(buildSignalRJsonInvocation(
+            SIGNALR_UPDATE_TYPE_AUTH_REQUEST_RESPONSE,
+            payload,
+            contextId,
+            'AuthRequestResponseRecieved'
+          ));
+        } else {
+          ws.send(buildSignalRMessagePackInvocation(
+            SIGNALR_UPDATE_TYPE_AUTH_REQUEST_RESPONSE,
+            payload,
+            contextId,
+            'AuthRequestResponseRecieved'
+          ));
+        }
+      } catch {
+        try {
+          ws.close(1011, 'Notification send failed');
+        } catch {
+          // ignore close races
+        }
+      }
+    }
  }
 }

@@ -392,13 +443,59 @@ export async function getOnlineUserDevices(env: Env, userId: string): Promise<st
  }
 }

+export async function notifyAuthRequestResponse(
+  env: Env,
+  userId: string,
+  authRequestId: string,
+  contextId?: string | null
+): Promise<void> {
+  try {
+    const id = env.NOTIFICATIONS_HUB.idFromName(authRequestId);
+    const stub = env.NOTIFICATIONS_HUB.get(id);
+    await stub.fetch('https://notifications/internal/auth-request-response', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        userId,
+        authRequestId,
+        contextId: contextId || null,
+      }),
+    });
+  } catch (error) {
+    console.error('Failed to broadcast auth request response notification:', error);
+  }
+}
+
+export function notifyUserAuthRequest(
+  env: Env,
+  userId: string,
+  authRequestId: string,
+  contextId?: string | null
+): void {
+  waitUntil(notifyUserUpdate(
+    env,
+    userId,
+    SIGNALR_UPDATE_TYPE_AUTH_REQUEST,
+    new Date().toISOString(),
+    contextId ?? null,
+    null,
+    {
+      UserId: userId,
+      Id: authRequestId,
+    }
+  ));
+}
+
 async function notifyUserUpdate(
  env: Env,
  userId: string,
  updateType: number,
  revisionDate: string,
  contextId: string | null,
-  targetDeviceIdentifier: string | null
+  targetDeviceIdentifier: string | null,
+  payloadOverride?: Record<string, unknown> | null
 ): Promise<void> {
  try {
    const id = env.NOTIFICATIONS_HUB.idFromName(userId);
@@ -414,7 +511,7 @@ async function notifyUserUpdate(
        contextId: contextId || null,
        updateType,
        targetDeviceIdentifier: targetDeviceIdentifier || null,
-        payload: {
+        payload: payloadOverride || {
          UserId: userId,
          Date: revisionDate,
        },
@@ -0,0 +1,269 @@
+import type { AuthRequestRecord, AuthRequestType, Env } from '../types';
+import { StorageService } from '../services/storage';
+import { generateUUID } from '../utils/uuid';
+import { readAuthRequestDeviceInfo, readActingDeviceIdentifier } from '../utils/device';
+import { errorResponse, jsonResponse } from '../utils/response';
+import { isAuthRequestExpired } from '../services/storage-auth-request-repo';
+import { notifyAuthRequestResponse, notifyUserAuthRequest } from '../durable/notifications-hub';
+
+const AUTH_REQUEST_TYPE_AUTHENTICATE_AND_UNLOCK = 0;
+const AUTH_REQUEST_TYPE_UNLOCK = 1;
+const AUTH_REQUEST_TYPE_ADMIN_APPROVAL = 2;
+
+function normalizeText(value: unknown, maxLength: number): string {
+  return String(value ?? '').trim().slice(0, maxLength);
+}
+
+function getClientIp(request: Request): string | null {
+  return (
+    request.headers.get('CF-Connecting-IP') ||
+    request.headers.get('X-Forwarded-For')?.split(',')[0]?.trim() ||
+    null
+  );
+}
+
+function getCountryName(request: Request): string | null {
+  return request.headers.get('CF-IPCountry') || null;
+}
+
+function deviceTypeName(type: number): string {
+  const names: Record<number, string> = {
+    0: 'Android',
+    1: 'iOS',
+    2: 'Chrome Extension',
+    3: 'Firefox Extension',
+    4: 'Opera Extension',
+    5: 'Edge Extension',
+    6: 'Windows Desktop',
+    7: 'macOS Desktop',
+    8: 'Linux Desktop',
+    9: 'Chrome',
+    10: 'Firefox',
+    11: 'Opera',
+    12: 'Edge',
+    13: 'Internet Explorer',
+    14: 'Unknown Browser',
+    15: 'Android',
+    16: 'Windows UWP',
+    17: 'Safari',
+    18: 'Vivaldi',
+    19: 'Vivaldi Extension',
+    20: 'Safari Extension',
+    21: 'SDK',
+    22: 'Server',
+    23: 'Windows CLI',
+    24: 'macOS CLI',
+    25: 'Linux CLI',
+    26: 'DuckDuckGo',
+  };
+  return names[type] || `Device ${type}`;
+}
+
+function buildOrigin(request: Request): string {
+  return new URL(request.url).host;
+}
+
+function toAuthRequestResponse(request: Request, authRequest: AuthRequestRecord, requestDeviceId?: string | null) {
+  return {
+    id: authRequest.id,
+    Id: authRequest.id,
+    publicKey: authRequest.publicKey,
+    PublicKey: authRequest.publicKey,
+    requestDeviceIdentifier: authRequest.requestDeviceIdentifier,
+    RequestDeviceIdentifier: authRequest.requestDeviceIdentifier,
+    requestDeviceTypeValue: authRequest.requestDeviceType,
+    RequestDeviceTypeValue: authRequest.requestDeviceType,
+    requestDeviceType: deviceTypeName(authRequest.requestDeviceType),
+    RequestDeviceType: deviceTypeName(authRequest.requestDeviceType),
+    requestIpAddress: authRequest.requestIpAddress,
+    RequestIpAddress: authRequest.requestIpAddress,
+    requestCountryName: authRequest.requestCountryName,
+    RequestCountryName: authRequest.requestCountryName,
+    key: authRequest.key,
+    Key: authRequest.key,
+    masterPasswordHash: authRequest.masterPasswordHash,
+    MasterPasswordHash: authRequest.masterPasswordHash,
+    creationDate: authRequest.creationDate,
+    CreationDate: authRequest.creationDate,
+    responseDate: authRequest.responseDate,
+    ResponseDate: authRequest.responseDate,
+    requestApproved: authRequest.approved ?? false,
+    RequestApproved: authRequest.approved ?? false,
+    requestDeviceId: requestDeviceId ?? null,
+    RequestDeviceId: requestDeviceId ?? null,
+    origin: buildOrigin(request),
+    Origin: buildOrigin(request),
+    object: 'auth-request',
+    Object: 'auth-request',
+  };
+}
+
+function listResponse<T>(data: T[]) {
+  return {
+    data,
+    Data: data,
+    object: 'list',
+    Object: 'list',
+    continuationToken: null,
+    ContinuationToken: null,
+  };
+}
+
+async function readJsonBody(request: Request): Promise<Record<string, any> | null> {
+  try {
+    const body = await request.json();
+    return body && typeof body === 'object' ? body as Record<string, any> : null;
+  } catch {
+    return null;
+  }
+}
+
+function readBodyValue(body: Record<string, any>, names: string[]): unknown {
+  for (const name of names) {
+    if (body[name] !== undefined) return body[name];
+  }
+  return undefined;
+}
+
+function isSupportedAuthRequestType(value: number): value is AuthRequestType {
+  return value === AUTH_REQUEST_TYPE_AUTHENTICATE_AND_UNLOCK || value === AUTH_REQUEST_TYPE_UNLOCK || value === AUTH_REQUEST_TYPE_ADMIN_APPROVAL;
+}
+
+export async function handleCreateAuthRequest(request: Request, env: Env): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const body = await readJsonBody(request);
+  if (!body) return errorResponse('Invalid request payload', 400);
+
+  const email = normalizeText(readBodyValue(body, ['email', 'Email']), 320).toLowerCase();
+  const publicKey = normalizeText(readBodyValue(body, ['publicKey', 'PublicKey']), 8192);
+  const accessCode = normalizeText(readBodyValue(body, ['accessCode', 'AccessCode']), 25);
+  const requestedType = Number(readBodyValue(body, ['type', 'Type']));
+  const type = Number.isFinite(requestedType) ? requestedType : AUTH_REQUEST_TYPE_AUTHENTICATE_AND_UNLOCK;
+  const deviceInfo = readAuthRequestDeviceInfo(
+    {
+      deviceIdentifier: normalizeText(readBodyValue(body, ['deviceIdentifier', 'DeviceIdentifier']), 128),
+      deviceName: normalizeText(readBodyValue(body, ['deviceName', 'DeviceName']), 128),
+      deviceType: String(readBodyValue(body, ['deviceType', 'DeviceType']) ?? ''),
+    },
+    request
+  );
+
+  if (!email || !publicKey || !accessCode || !deviceInfo.deviceIdentifier) {
+    return errorResponse('Email, public key, device identifier, and access code are required.', 400);
+  }
+  if (!isSupportedAuthRequestType(type) || type === AUTH_REQUEST_TYPE_ADMIN_APPROVAL) {
+    return errorResponse('Invalid auth request type.', 400);
+  }
+
+  const user = await storage.getUser(email);
+  if (!user || user.status !== 'active') {
+    return errorResponse('User or known device not found.', 400);
+  }
+
+  await storage.pruneExpiredAuthRequests();
+  const now = new Date().toISOString();
+  const authRequest: AuthRequestRecord = {
+    id: generateUUID(),
+    userId: user.id,
+    organizationId: null,
+    type,
+    requestDeviceIdentifier: deviceInfo.deviceIdentifier,
+    requestDeviceType: deviceInfo.deviceType,
+    requestIpAddress: getClientIp(request),
+    requestCountryName: getCountryName(request),
+    responseDeviceIdentifier: null,
+    accessCode,
+    publicKey,
+    key: null,
+    masterPasswordHash: null,
+    approved: null,
+    creationDate: now,
+    responseDate: null,
+    authenticationDate: null,
+  };
+  await storage.createAuthRequest(authRequest);
+  notifyUserAuthRequest(env, user.id, authRequest.id, deviceInfo.deviceIdentifier);
+  return jsonResponse(toAuthRequestResponse(request, authRequest));
+}
+
+export async function handleGetAuthRequest(request: Request, env: Env, userId: string, id: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const authRequest = await storage.getAuthRequestById(id);
+  if (!authRequest || authRequest.userId !== userId) return errorResponse('Not found', 404);
+  return jsonResponse(toAuthRequestResponse(request, authRequest));
+}
+
+export async function handleGetAuthRequestResponse(request: Request, env: Env, id: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const url = new URL(request.url);
+  const accessCode = normalizeText(url.searchParams.get('code'), 25);
+  const authRequest = await storage.getAuthRequestById(id);
+  if (!authRequest || authRequest.accessCode !== accessCode || isAuthRequestExpired(authRequest)) {
+    return errorResponse('Not found', 404);
+  }
+  return jsonResponse(toAuthRequestResponse(request, authRequest));
+}
+
+export async function handleListAuthRequests(request: Request, env: Env, userId: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const authRequests = await storage.listAuthRequestsByUserId(userId);
+  return jsonResponse(listResponse(authRequests.map((authRequest) => toAuthRequestResponse(request, authRequest))));
+}
+
+export async function handleListPendingAuthRequests(request: Request, env: Env, userId: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  await storage.pruneExpiredAuthRequests();
+  const authRequests = await storage.listPendingAuthRequestsByUserId(userId);
+  const rows = await Promise.all(authRequests.map(async (authRequest) => {
+    const device = await storage.getDevice(userId, authRequest.requestDeviceIdentifier);
+    return toAuthRequestResponse(request, authRequest, device?.deviceIdentifier ?? authRequest.requestDeviceIdentifier);
+  }));
+  return jsonResponse(listResponse(rows));
+}
+
+export async function handleUpdateAuthRequest(request: Request, env: Env, userId: string, id: string): Promise<Response> {
+  const storage = new StorageService(env.DB);
+  const body = await readJsonBody(request);
+  if (!body) return errorResponse('Invalid request payload', 400);
+
+  const authRequest = await storage.getAuthRequestById(id);
+  if (!authRequest || authRequest.userId !== userId || isAuthRequestExpired(authRequest)) {
+    return errorResponse('Not found', 404);
+  }
+  if (authRequest.approved !== null || authRequest.responseDate || authRequest.authenticationDate) {
+    return errorResponse('Auth request has already been answered.', 409);
+  }
+
+  const latestForUser = await storage.listPendingAuthRequestsByUserId(userId);
+  const latestForDevice = latestForUser.find((item) => item.requestDeviceIdentifier === authRequest.requestDeviceIdentifier);
+  if (latestForDevice?.id !== authRequest.id) {
+    return errorResponse('This request is no longer valid. Make sure to approve the most recent request.', 400);
+  }
+
+  const approved = Boolean(readBodyValue(body, ['requestApproved', 'RequestApproved']));
+  const key = normalizeText(readBodyValue(body, ['key', 'Key']), 20000);
+  const masterPasswordHash = normalizeText(readBodyValue(body, ['masterPasswordHash', 'MasterPasswordHash']), 20000) || null;
+  const responseDeviceIdentifier =
+    normalizeText(readBodyValue(body, ['deviceIdentifier', 'DeviceIdentifier']), 128) ||
+    readActingDeviceIdentifier(request) ||
+    'web';
+
+  if (approved && !key) {
+    return errorResponse('Encrypted key is required to approve the request.', 400);
+  }
+
+  const updated = await storage.updateAuthRequestResponse(id, userId, {
+    approved,
+    responseDeviceIdentifier,
+    key,
+    masterPasswordHash,
+  });
+  if (!updated) return errorResponse('Auth request has already been answered.', 409);
+  const updatedRequest = await storage.getAuthRequestById(id);
+  // Match Bitwarden upstream behavior: only approval wakes the originating anonymous
+  // client. Denials are not pushed to avoid leaking that a login attempt was rejected.
+  if (approved) {
+    await notifyAuthRequestResponse(env, userId, id);
+  }
+  return jsonResponse(toAuthRequestResponse(request, updatedRequest || authRequest));
+}
@@ -19,6 +19,7 @@ import {
  assertAccountPasskeyCredential,
  buildAccountPasskeyTokenUserDecryptionOption,
 } from './account-passkeys';
+import { isAuthRequestExpired } from '../services/storage-auth-request-repo';

 const TWO_FACTOR_REMEMBER_TTL_MS = 30 * 24 * 60 * 60 * 1000;
 const TWO_FACTOR_PROVIDER_AUTHENTICATOR = 0;
@@ -237,6 +238,7 @@ export async function handleToken(request: Request, env: Env): Promise<Response>
    // Login with password
    const email = body.username?.toLowerCase();
    const passwordHash = body.password;
+    const authRequestId = readBodyValue(body, ['authRequest', 'AuthRequest']);
    const twoFactorToken = readBodyValue(body, ['twoFactorToken', 'TwoFactorToken']);
    const twoFactorProvider = readBodyValue(body, ['twoFactorProvider', 'TwoFactorProvider']);
    const twoFactorRemember = readBodyValue(body, ['twoFactorRemember', 'TwoFactorRemember']);
@@ -281,11 +283,31 @@ export async function handleToken(request: Request, env: Env): Promise<Response>
      return identityErrorResponse('Account is disabled', 'invalid_grant', 400);
    }

-    const valid = await auth.verifyPassword(passwordHash, user.masterPasswordHash, user.email);
+    let validatedAuthRequestId: string | null = null;
+    let valid = false;
+    const normalizedAuthRequestId = String(authRequestId || '').trim();
+    if (normalizedAuthRequestId) {
+      const authRequest = await storage.getAuthRequestById(normalizedAuthRequestId);
+      valid = !!(
+        authRequest &&
+        authRequest.userId === user.id &&
+        authRequest.type === 0 &&
+        authRequest.approved === true &&
+        authRequest.responseDate &&
+        !authRequest.authenticationDate &&
+        !isAuthRequestExpired(authRequest) &&
+        constantTimeEquals(authRequest.accessCode, passwordHash)
+      );
+      if (valid) {
+        validatedAuthRequestId = authRequest!.id;
+      }
+    } else {
+      valid = await auth.verifyPassword(passwordHash, user.masterPasswordHash, user.email);
+    }
    if (!valid) {
      await safeWriteAuditEvent(env, {
        actorUserId: user.id,
-        action: 'auth.login.failed.bad_password',
+        action: normalizedAuthRequestId ? 'auth.login.failed.bad_auth_request' : 'auth.login.failed.bad_password',
        category: 'auth',
        level: 'warn',
        targetType: 'user',
@@ -384,6 +406,9 @@ export async function handleToken(request: Request, env: Env): Promise<Response>

    // Successful login - clear failed attempts
    await rateLimit.clearLoginAttempts(loginIdentifier);
+    if (validatedAuthRequestId) {
+      await storage.markAuthRequestAuthenticated(validatedAuthRequestId);
+    }

    const accessToken = await auth.generateAccessToken(user, deviceSession);
    const refreshToken = await auth.generateRefreshToken(user.id, deviceSession);
@@ -56,3 +56,18 @@ export async function handleNotificationsHub(request: Request, env: Env): Promis
  }
  return stub.fetch(new Request(forwardedUrl.toString(), request));
 }
+
+export async function handleAnonymousNotificationsHub(request: Request, env: Env): Promise<Response> {
+  const url = new URL(request.url);
+  const authRequestId = String(url.searchParams.get('Token') || url.searchParams.get('token') || '').trim();
+  if (!authRequestId) return errorResponse('Token is required', 400);
+  if (request.headers.get('Upgrade')?.toLowerCase() !== 'websocket') {
+    return errorResponse('Expected websocket', 426);
+  }
+
+  const id = env.NOTIFICATIONS_HUB.idFromName(authRequestId);
+  const stub = env.NOTIFICATIONS_HUB.get(id);
+  const forwardedUrl = new URL(request.url);
+  forwardedUrl.searchParams.set('nw_auth_request_id', authRequestId);
+  return stub.fetch(new Request(forwardedUrl.toString(), request));
+}
@@ -78,6 +78,12 @@ import {
  handleGetAccountPasskeyUpdateAssertionOptions,
  handleUpdateAccountPasskeyEncryption,
 } from './handlers/account-passkeys';
+import {
+  handleGetAuthRequest,
+  handleListAuthRequests,
+  handleListPendingAuthRequests,
+  handleUpdateAuthRequest,
+} from './handlers/auth-requests';

 export async function handleAuthenticatedRoute(
  request: Request,
@@ -285,8 +291,21 @@ export async function handleAuthenticatedRoute(
    if (method === 'DELETE') return handleDeleteFolder(request, env, userId, folderId);
  }

-  if (path.startsWith('/api/auth-requests')) {
-    return jsonResponse({ data: [], object: 'list', continuationToken: null });
+  if (path === '/api/auth-requests' || path === '/api/auth-requests/') {
+    if (method === 'GET') return handleListAuthRequests(request, env, userId);
+    return errorResponse('Method not allowed', 405);
+  }
+
+  if (path === '/api/auth-requests/pending') {
+    if (method === 'GET') return handleListPendingAuthRequests(request, env, userId);
+    return errorResponse('Method not allowed', 405);
+  }
+
+  const authRequestMatch = path.match(/^\/api\/auth-requests\/([a-f0-9-]+)$/i);
+  if (authRequestMatch) {
+    if (method === 'GET') return handleGetAuthRequest(request, env, userId, authRequestMatch[1]);
+    if (method === 'PUT') return handleUpdateAuthRequest(request, env, userId, authRequestMatch[1]);
+    return errorResponse('Method not allowed', 405);
  }

  if (path === '/api/collections' || path.startsWith('/api/collections/')) {
@@ -15,9 +15,14 @@ import {
  handleGetPasswordHint,
  handleRecoverTwoFactor,
 } from './handlers/accounts';
+import {
+  handleCreateAuthRequest,
+  handleGetAuthRequestResponse,
+} from './handlers/auth-requests';
 import { handlePublicDownloadAttachment } from './handlers/attachments';
 import { handlePublicUploadAttachment } from './handlers/attachments';
 import {
+  handleAnonymousNotificationsHub,
  handleNotificationsHub,
  handleNotificationsNegotiate,
 } from './handlers/notifications';
@@ -390,6 +395,19 @@ export async function handlePublicRoute(
    return handleDownloadSendFile(request, env, sendDownloadMatch[1], sendDownloadMatch[2]);
  }

+  if ((path === '/api/auth-requests' || path === '/api/auth-requests/') && method === 'POST') {
+    const blocked = await enforcePublicRateLimit('public-sensitive', LIMITS.rateLimit.sensitivePublicRequestsPerMinute);
+    if (blocked) return blocked;
+    return handleCreateAuthRequest(request, env);
+  }
+
+  const authRequestResponseMatch = path.match(/^\/api\/auth-requests\/([a-f0-9-]+)\/response$/i);
+  if (authRequestResponseMatch && method === 'GET') {
+    const blocked = await enforcePublicRateLimit('public-sensitive', LIMITS.rateLimit.sensitivePublicRequestsPerMinute);
+    if (blocked) return blocked;
+    return handleGetAuthRequestResponse(request, env, authRequestResponseMatch[1]);
+  }
+
  if (path === '/identity/connect/token' && method === 'POST') {
    return handleToken(request, env);
  }
@@ -477,5 +495,9 @@ export async function handlePublicRoute(
  if (path === '/notifications/hub' && method === 'GET') {
    return handleNotificationsHub(request, env);
  }
+
+  if (path === '/notifications/anonymous-hub' && method === 'GET') {
+    return handleAnonymousNotificationsHub(request, env);
+  }
  return null;
 }
@@ -0,0 +1,139 @@
+import type { AuthRequestRecord, AuthRequestType } from '../types';
+
+const AUTH_REQUEST_EXPIRATION_MS = 15 * 60 * 1000;
+
+function mapAuthRequestRow(row: any): AuthRequestRecord {
+  return {
+    id: row.id,
+    userId: row.user_id,
+    organizationId: row.organization_id ?? null,
+    type: Number(row.type) as AuthRequestType,
+    requestDeviceIdentifier: row.request_device_identifier,
+    requestDeviceType: Number(row.request_device_type ?? 14),
+    requestIpAddress: row.request_ip_address ?? null,
+    requestCountryName: row.request_country_name ?? null,
+    responseDeviceIdentifier: row.response_device_identifier ?? null,
+    accessCode: row.access_code,
+    publicKey: row.public_key,
+    key: row.key ?? null,
+    masterPasswordHash: row.master_password_hash ?? null,
+    approved: row.approved == null ? null : Number(row.approved) === 1,
+    creationDate: row.creation_date,
+    responseDate: row.response_date ?? null,
+    authenticationDate: row.authentication_date ?? null,
+  };
+}
+
+export function isAuthRequestExpired(request: AuthRequestRecord, nowMs: number = Date.now()): boolean {
+  return new Date(request.creationDate).getTime() + AUTH_REQUEST_EXPIRATION_MS <= nowMs;
+}
+
+const AUTH_REQUEST_SELECT =
+  'SELECT id, user_id, organization_id, type, request_device_identifier, request_device_type, request_ip_address, request_country_name, ' +
+  'response_device_identifier, access_code, public_key, key, master_password_hash, approved, creation_date, response_date, authentication_date ' +
+  'FROM auth_requests';
+
+export async function createAuthRequest(db: D1Database, request: AuthRequestRecord): Promise<void> {
+  await db
+    .prepare(
+      'INSERT INTO auth_requests(' +
+        'id, user_id, organization_id, type, request_device_identifier, request_device_type, request_ip_address, request_country_name, ' +
+        'response_device_identifier, access_code, public_key, key, master_password_hash, approved, creation_date, response_date, authentication_date' +
+        ') VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)'
+    )
+    .bind(
+      request.id,
+      request.userId,
+      request.organizationId,
+      request.type,
+      request.requestDeviceIdentifier,
+      request.requestDeviceType,
+      request.requestIpAddress,
+      request.requestCountryName,
+      request.responseDeviceIdentifier,
+      request.accessCode,
+      request.publicKey,
+      request.key,
+      request.masterPasswordHash,
+      request.approved == null ? null : (request.approved ? 1 : 0),
+      request.creationDate,
+      request.responseDate,
+      request.authenticationDate
+    )
+    .run();
+}
+
+export async function getAuthRequestById(db: D1Database, id: string): Promise<AuthRequestRecord | null> {
+  const row = await db.prepare(`${AUTH_REQUEST_SELECT} WHERE id = ? LIMIT 1`).bind(id).first<any>();
+  return row ? mapAuthRequestRow(row) : null;
+}
+
+export async function listAuthRequestsByUserId(db: D1Database, userId: string): Promise<AuthRequestRecord[]> {
+  const res = await db.prepare(`${AUTH_REQUEST_SELECT} WHERE user_id = ? ORDER BY creation_date DESC`).bind(userId).all<any>();
+  return (res.results || []).map(mapAuthRequestRow);
+}
+
+export async function listPendingAuthRequestsByUserId(db: D1Database, userId: string, nowMs: number = Date.now()): Promise<AuthRequestRecord[]> {
+  const cutoff = new Date(nowMs - AUTH_REQUEST_EXPIRATION_MS).toISOString();
+  const res = await db
+    .prepare(
+      'SELECT ar.id, ar.user_id, ar.organization_id, ar.type, ar.request_device_identifier, ar.request_device_type, ar.request_ip_address, ar.request_country_name, ' +
+        'ar.response_device_identifier, ar.access_code, ar.public_key, ar.key, ar.master_password_hash, ar.approved, ar.creation_date, ar.response_date, ar.authentication_date ' +
+        'FROM auth_requests ar ' +
+        'JOIN (' +
+        '  SELECT request_device_identifier, MAX(creation_date) AS latest_creation_date ' +
+        '  FROM auth_requests ' +
+        '  WHERE user_id = ? AND type IN (0, 1) AND approved IS NULL AND response_date IS NULL AND authentication_date IS NULL AND creation_date >= ? ' +
+        '  GROUP BY request_device_identifier' +
+        ') latest ON latest.request_device_identifier = ar.request_device_identifier AND latest.latest_creation_date = ar.creation_date ' +
+        'WHERE ar.user_id = ? AND ar.type IN (0, 1) AND ar.approved IS NULL AND ar.response_date IS NULL AND ar.authentication_date IS NULL ' +
+        'ORDER BY ar.creation_date DESC'
+    )
+    .bind(userId, cutoff, userId)
+    .all<any>();
+  return (res.results || []).map(mapAuthRequestRow).filter((request) => !isAuthRequestExpired(request, nowMs));
+}
+
+export async function updateAuthRequestResponse(
+  db: D1Database,
+  id: string,
+  userId: string,
+  update: {
+    approved: boolean;
+    responseDeviceIdentifier: string;
+    key?: string | null;
+    masterPasswordHash?: string | null;
+    responseDate?: string;
+  }
+): Promise<boolean> {
+  const result = await db
+    .prepare(
+      'UPDATE auth_requests SET approved = ?, response_device_identifier = ?, key = ?, master_password_hash = ?, response_date = ? ' +
+        'WHERE id = ? AND user_id = ? AND approved IS NULL AND response_date IS NULL AND authentication_date IS NULL'
+    )
+    .bind(
+      update.approved ? 1 : 0,
+      update.responseDeviceIdentifier,
+      update.approved ? (update.key ?? null) : null,
+      update.approved ? (update.masterPasswordHash ?? null) : null,
+      update.responseDate || new Date().toISOString(),
+      id,
+      userId
+    )
+    .run();
+  return Number(result.meta.changes ?? 0) > 0;
+}
+
+export async function markAuthRequestAuthenticated(db: D1Database, id: string, authenticationDate: string = new Date().toISOString()): Promise<boolean> {
+  const result = await db
+    .prepare('UPDATE auth_requests SET authentication_date = ? WHERE id = ? AND authentication_date IS NULL')
+    .bind(authenticationDate, id)
+    .run();
+  return Number(result.meta.changes ?? 0) > 0;
+}
+
+export async function pruneExpiredAuthRequests(db: D1Database, nowMs: number = Date.now()): Promise<number> {
+  const cutoff = new Date(nowMs - AUTH_REQUEST_EXPIRATION_MS).toISOString();
+  const result = await db.prepare('DELETE FROM auth_requests WHERE creation_date < ?').bind(cutoff).run();
+  return Number(result.meta.changes ?? 0);
+}
@@ -109,6 +109,15 @@ const SCHEMA_STATEMENTS: readonly string[] = [
  'ALTER TABLE devices ADD COLUMN last_seen_at TEXT',
  'CREATE INDEX IF NOT EXISTS idx_devices_user_last_seen ON devices(user_id, last_seen_at)',

+  'CREATE TABLE IF NOT EXISTS auth_requests (' +
+  'id TEXT PRIMARY KEY, user_id TEXT NOT NULL, organization_id TEXT, type INTEGER NOT NULL, request_device_identifier TEXT NOT NULL, request_device_type INTEGER NOT NULL, ' +
+  'request_ip_address TEXT, request_country_name TEXT, response_device_identifier TEXT, access_code TEXT NOT NULL, public_key TEXT NOT NULL, key TEXT, master_password_hash TEXT, ' +
+  'approved INTEGER, creation_date TEXT NOT NULL, response_date TEXT, authentication_date TEXT, ' +
+  'FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE)',
+  'CREATE INDEX IF NOT EXISTS idx_auth_requests_user_created ON auth_requests(user_id, creation_date)',
+  'CREATE INDEX IF NOT EXISTS idx_auth_requests_user_pending ON auth_requests(user_id, approved, response_date, authentication_date, creation_date)',
+  'CREATE INDEX IF NOT EXISTS idx_auth_requests_device_pending ON auth_requests(user_id, request_device_identifier, creation_date)',
+
  'CREATE TABLE IF NOT EXISTS trusted_two_factor_device_tokens (' +
  'token TEXT PRIMARY KEY, user_id TEXT NOT NULL, device_identifier TEXT NOT NULL, expires_at INTEGER NOT NULL, ' +
  'FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE)',
@@ -1,4 +1,4 @@
-import { User, Cipher, Folder, Attachment, Device, Invite, AuditLog, Send, TrustedDeviceTokenSummary, RefreshTokenRecord, CustomEquivalentDomain, AccountPasskeyChallenge, AccountPasskeyChallengeScope, AccountPasskeyCredential } from '../types';
+import { User, Cipher, Folder, Attachment, Device, Invite, AuditLog, Send, TrustedDeviceTokenSummary, RefreshTokenRecord, CustomEquivalentDomain, AccountPasskeyChallenge, AccountPasskeyChallengeScope, AccountPasskeyCredential, AuthRequestRecord } from '../types';
 import { LIMITS } from '../config/limits';
 import { ensureStorageSchema } from './storage-schema';
 import {
@@ -103,6 +103,15 @@ import {
  updateDeviceKeys as updateStoredDeviceKeys,
  updateTrustedTwoFactorTokensExpiryByDevice as updateStoredTrustedTokensExpiryByDevice,
 } from './storage-device-repo';
+import {
+  createAuthRequest as createStoredAuthRequest,
+  getAuthRequestById as findStoredAuthRequestById,
+  listAuthRequestsByUserId as listStoredAuthRequestsByUserId,
+  listPendingAuthRequestsByUserId as listStoredPendingAuthRequestsByUserId,
+  markAuthRequestAuthenticated as markStoredAuthRequestAuthenticated,
+  pruneExpiredAuthRequests as pruneStoredExpiredAuthRequests,
+  updateAuthRequestResponse as updateStoredAuthRequestResponse,
+} from './storage-auth-request-repo';
 import {
  ensureUsedAttachmentDownloadTokenTable as ensureStoredAttachmentTokenTable,
  consumeAttachmentDownloadToken as consumeStoredAttachmentDownloadToken,
@@ -134,8 +143,8 @@ const STORAGE_SCHEMA_VERSION_KEY = 'schema.version';
 // Bump this whenever src/services/storage-schema.ts or migrations/0001_init.sql
 // changes. Existing D1 installs only rerun ensureStorageSchema() when this value
 // differs from config.schema.version.
-const STORAGE_SCHEMA_VERSION = '2026-06-09-account-passkeys';
-const REQUIRED_ACCOUNT_PASSKEY_TABLES = ['webauthn_credentials', 'webauthn_challenges'] as const;
+const STORAGE_SCHEMA_VERSION = '2026-06-12-auth-requests';
+const REQUIRED_SCHEMA_TABLES = ['webauthn_credentials', 'webauthn_challenges', 'auth_requests'] as const;

 // D1-backed storage.
 // Contract:
@@ -166,14 +175,14 @@ export class StorageService {
    return stmt.bind(...values.map(v => v === undefined ? null : v));
  }

-  private async hasAccountPasskeyTables(): Promise<boolean> {
-    const placeholders = REQUIRED_ACCOUNT_PASSKEY_TABLES.map(() => '?').join(', ');
+  private async hasRequiredSchemaTables(): Promise<boolean> {
+    const placeholders = REQUIRED_SCHEMA_TABLES.map(() => '?').join(', ');
    const result = await this.db
      .prepare(`SELECT name FROM sqlite_master WHERE type = 'table' AND name IN (${placeholders})`)
-      .bind(...REQUIRED_ACCOUNT_PASSKEY_TABLES)
+      .bind(...REQUIRED_SCHEMA_TABLES)
      .all<{ name: string }>();
    const found = new Set((result.results || []).map((row) => row.name));
-    return REQUIRED_ACCOUNT_PASSKEY_TABLES.every((table) => found.has(table));
+    return REQUIRED_SCHEMA_TABLES.every((table) => found.has(table));
  }

  private sqlChunkSize(fixedBindCount: number): number {
@@ -220,7 +229,7 @@ export class StorageService {
    await this.db.prepare('CREATE TABLE IF NOT EXISTS config (key TEXT PRIMARY KEY, value TEXT NOT NULL)').run();
    const schemaVersion = await getStoredConfigValue(this.db, STORAGE_SCHEMA_VERSION_KEY);
    const schemaMissingRequiredTables = schemaVersion === STORAGE_SCHEMA_VERSION
-      ? !(await this.hasAccountPasskeyTables())
+      ? !(await this.hasRequiredSchemaTables())
      : true;
    if (schemaVersion !== STORAGE_SCHEMA_VERSION || schemaMissingRequiredTables) {
      await ensureStorageSchema(this.db);
@@ -716,6 +725,45 @@ export class StorageService {
    return deleteStoredDevicesByUserId(this.db, userId);
  }

+  // --- Auth requests / Login with device ---
+
+  async createAuthRequest(request: AuthRequestRecord): Promise<void> {
+    await createStoredAuthRequest(this.db, request);
+  }
+
+  async getAuthRequestById(id: string): Promise<AuthRequestRecord | null> {
+    return findStoredAuthRequestById(this.db, id);
+  }
+
+  async listAuthRequestsByUserId(userId: string): Promise<AuthRequestRecord[]> {
+    return listStoredAuthRequestsByUserId(this.db, userId);
+  }
+
+  async listPendingAuthRequestsByUserId(userId: string): Promise<AuthRequestRecord[]> {
+    return listStoredPendingAuthRequestsByUserId(this.db, userId);
+  }
+
+  async updateAuthRequestResponse(
+    id: string,
+    userId: string,
+    update: {
+      approved: boolean;
+      responseDeviceIdentifier: string;
+      key?: string | null;
+      masterPasswordHash?: string | null;
+    }
+  ): Promise<boolean> {
+    return updateStoredAuthRequestResponse(this.db, id, userId, update);
+  }
+
+  async markAuthRequestAuthenticated(id: string): Promise<boolean> {
+    return markStoredAuthRequestAuthenticated(this.db, id);
+  }
+
+  async pruneExpiredAuthRequests(): Promise<number> {
+    return pruneStoredExpiredAuthRequests(this.db);
+  }
+
  async getTrustedDeviceTokenSummariesByUserId(userId: string): Promise<TrustedDeviceTokenSummary[]> {
    return listStoredTrustedTokenSummaries(this.db, userId);
  }
@@ -273,6 +273,28 @@ export interface DevicePendingAuthRequest {
  creationDate: string;
 }

+export type AuthRequestType = 0 | 1 | 2;
+
+export interface AuthRequestRecord {
+  id: string;
+  userId: string;
+  organizationId: string | null;
+  type: AuthRequestType;
+  requestDeviceIdentifier: string;
+  requestDeviceType: number;
+  requestIpAddress: string | null;
+  requestCountryName: string | null;
+  responseDeviceIdentifier: string | null;
+  accessCode: string;
+  publicKey: string;
+  key: string | null;
+  masterPasswordHash: string | null;
+  approved: boolean | null;
+  creationDate: string;
+  responseDate: string | null;
+  authenticationDate: string | null;
+}
+
 export interface DeviceResponse {
  id: string;
  userId?: string | null;
@@ -3,6 +3,7 @@ import { useLocation } from 'wouter';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import AppAuthenticatedShell from '@/components/AppAuthenticatedShell';
 import AppGlobalOverlays, { type AppConfirmState } from '@/components/AppGlobalOverlays';
+import AuthRequestApprovalDialog from '@/components/AuthRequestApprovalDialog';
 import AuthViews from '@/components/AuthViews';
 import NotFoundPage from '@/components/NotFoundPage';
 import PublicSendPage from '@/components/PublicSendPage';
@@ -22,6 +23,12 @@ import {
  saveSession,
  stripProfileSecrets,
 } from '@/lib/api/auth';
+import {
+  encryptSessionUserKeyForAuthRequest,
+  isPendingAuthRequest,
+  listPendingAuthRequests,
+  respondToAuthRequest,
+} from '@/lib/api/auth-requests';
 import { clearAuditLogs, getAuditLogSettings, listAdminInvites, listAdminUsers, listAuditLogs, saveAuditLogSettings, type AuditLogFilters } from '@/lib/api/admin';
 import { getDomainRules, saveDomainRules } from '@/lib/api/domains';
 import { getSends } from '@/lib/api/send';
@@ -74,7 +81,7 @@ import {
  createDemoMainRoutesProps,
 } from '@/lib/demo';
 import type { AdminBackupSettings } from '@/lib/api/backup';
-import type { AdminInvite, AdminUser, AppPhase, AuditLogSettings, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SessionState } from '@/lib/types';
+import type { AdminInvite, AdminUser, AppPhase, AuditLogSettings, AuthRequest, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SessionState } from '@/lib/types';
 import type { VaultCoreSnapshot } from '@/lib/vault-cache';

 function isBackupProgressDetail(value: unknown): value is BackupProgressDetail {
@@ -94,6 +101,8 @@ const IMPORT_ROUTE_ALIASES: ReadonlySet<string> = new Set(IMPORT_ROUTE_PATHS.fil
 const SETTINGS_HOME_ROUTE = '/settings';
 const SETTINGS_ACCOUNT_ROUTE = '/settings/account';
 const SETTINGS_DOMAIN_RULES_ROUTE = '/settings/domain-rules';
+const DEVICE_MANAGEMENT_ROUTE = '/settings/security/device-management';
+const LEGACY_DEVICE_MANAGEMENT_ROUTE = '/security/devices';
 const AUTH_ROUTE_PATHS = ['/', '/login', '/register', '/lock', '/recover-2fa'] as const;
 const APP_ROUTE_PATHS = [
  '/',
@@ -102,7 +111,8 @@ const APP_ROUTE_PATHS = [
  '/sends',
  '/admin',
  '/logs',
-  '/security/devices',
+  LEGACY_DEVICE_MANAGEMENT_ROUTE,
+  DEVICE_MANAGEMENT_ROUTE,
  '/backup',
  '/settings',
  SETTINGS_ACCOUNT_ROUTE,
@@ -213,6 +223,8 @@ export default function App() {
  const [disableTotpOpen, setDisableTotpOpen] = useState(false);
  const [disableTotpPassword, setDisableTotpPassword] = useState('');
  const [disableTotpSubmitting, setDisableTotpSubmitting] = useState(false);
+  const [authRequestDialogDismissedId, setAuthRequestDialogDismissedId] = useState<string | null>(null);
+  const [authRequestSubmittingId, setAuthRequestSubmittingId] = useState<string | null>(null);
  const [recoverValues, setRecoverValues] = useState({ email: '', password: '', recoveryCode: '' });
  const [themePreference, setThemePreference] = useState<ThemePreference>(() => readThemePreference());
  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => resolveSystemTheme());
@@ -1060,6 +1072,52 @@ export default function App() {
    enabled: !IS_DEMO_MODE && phase === 'app' && !!session?.accessToken && vaultInitialDecryptDone,
    staleTime: 30_000,
  });
+  const pendingAuthRequestsQuery = useQuery({
+    queryKey: ['auth-requests-pending', vaultCacheKey || session?.email],
+    queryFn: () => listPendingAuthRequests(authedFetch, profile?.email || session?.email || ''),
+    enabled: !IS_DEMO_MODE && phase === 'app' && !!session?.accessToken && !!session?.symEncKey && !!session?.symMacKey && !!(profile?.email || session?.email),
+    staleTime: 5_000,
+    refetchInterval: 15_000,
+    refetchIntervalInBackground: true,
+  });
+  const pendingAuthRequests = (pendingAuthRequestsQuery.data || []).filter(isPendingAuthRequest);
+  const latestPendingAuthRequest = pendingAuthRequests[0] || null;
+  const authRequestDialogOpen = !!latestPendingAuthRequest && latestPendingAuthRequest.id !== authRequestDialogDismissedId;
+
+  async function approveAuthRequest(authRequest: AuthRequest): Promise<void> {
+    if (!session) throw new Error(t('txt_vault_key_unavailable'));
+    setAuthRequestSubmittingId(authRequest.id);
+    try {
+      const key = await encryptSessionUserKeyForAuthRequest(session, authRequest);
+      await respondToAuthRequest(authedFetch, authRequest.id, {
+        key,
+        masterPasswordHash: null,
+        deviceIdentifier: getCurrentDeviceIdentifier(),
+        requestApproved: true,
+      });
+      setAuthRequestDialogDismissedId(null);
+      pushToast('success', t('txt_auth_request_approved'));
+      await pendingAuthRequestsQuery.refetch();
+    } finally {
+      setAuthRequestSubmittingId(null);
+    }
+  }
+
+  async function denyAuthRequest(authRequest: AuthRequest): Promise<void> {
+    setAuthRequestSubmittingId(authRequest.id);
+    try {
+      await respondToAuthRequest(authedFetch, authRequest.id, {
+        deviceIdentifier: getCurrentDeviceIdentifier(),
+        requestApproved: false,
+      });
+      setAuthRequestDialogDismissedId(null);
+      pushToast('success', t('txt_auth_request_denied'));
+      await pendingAuthRequestsQuery.refetch();
+    } finally {
+      setAuthRequestSubmittingId(null);
+    }
+  }
+
  function handleSaveDomainRules(customEquivalentDomains: CustomEquivalentDomain[], excludedGlobalEquivalentDomains: number[]): Promise<void> {
    const equivalentDomains = customEquivalentDomains.filter((rule) => !rule.excluded).map((rule) => rule.domains);
    const excludedGlobalTypes = new Set(excludedGlobalEquivalentDomains);
@@ -1509,7 +1567,7 @@ export default function App() {
    if (location === '/sends') return t('nav_sends');
    if (location === '/admin') return t('nav_admin_panel');
    if (location === '/logs') return t('nav_log_center');
-    if (location === '/security/devices') return t('nav_device_management');
+    if (location === LEGACY_DEVICE_MANAGEMENT_ROUTE || location === DEVICE_MANAGEMENT_ROUTE) return t('nav_device_management');
    if (location === SETTINGS_DOMAIN_RULES_ROUTE) return t('nav_domain_rules');
    if (location === '/backup') return t('nav_backup_strategy');
    if (isImportRoute) return t('nav_import_export');
@@ -1518,6 +1576,16 @@ export default function App() {
    return t('nav_my_vault');
  })();

+  useEffect(() => {
+    if (phase !== 'app') return;
+    if (!hashPath.startsWith('/')) return;
+    if (normalizedHashPath !== DEVICE_MANAGEMENT_ROUTE && normalizedHashPath !== LEGACY_DEVICE_MANAGEMENT_ROUTE) return;
+    if (typeof window !== 'undefined' && typeof window.history?.replaceState === 'function') {
+      window.history.replaceState(null, '', DEVICE_MANAGEMENT_ROUTE);
+    }
+    if (location !== DEVICE_MANAGEMENT_ROUTE) navigate(DEVICE_MANAGEMENT_ROUTE);
+  }, [phase, hashPath, normalizedHashPath, location, navigate]);
+
  useEffect(() => {
    if (phase === 'app' && location === '/' && !isPublicSendRoute) navigate('/vault');
  }, [phase, location, isPublicSendRoute, navigate]);
@@ -1624,6 +1692,13 @@ export default function App() {
    onCreateAccountPasskey: accountSecurityActions.createAccountPasskey,
    onEnableAccountPasskeyDirectUnlock: accountSecurityActions.enableAccountPasskeyDirectUnlock,
    onDeleteAccountPasskey: accountSecurityActions.deleteAccountPasskey,
+    pendingAuthRequests,
+    pendingAuthRequestsLoading: pendingAuthRequestsQuery.isFetching,
+    onRefreshPendingAuthRequests: async () => {
+      await pendingAuthRequestsQuery.refetch();
+    },
+    onApproveAuthRequest: approveAuthRequest,
+    onDenyAuthRequest: denyAuthRequest,
    onLockTimeoutChange: setLockTimeoutMinutes,
    onSessionTimeoutActionChange: setSessionTimeoutAction,
    onRefreshAuthorizedDevices: accountSecurityActions.refreshAuthorizedDevices,
@@ -1868,6 +1943,24 @@ export default function App() {
        }}
        disableTotpSubmitting={disableTotpSubmitting}
      />
+      <AuthRequestApprovalDialog
+        open={authRequestDialogOpen}
+        authRequest={latestPendingAuthRequest}
+        submitting={!!authRequestSubmittingId}
+        onApprove={() => {
+          if (!latestPendingAuthRequest) return;
+          void approveAuthRequest(latestPendingAuthRequest).catch((error) => {
+            pushToast('error', error instanceof Error ? error.message : t('txt_auth_request_update_failed'));
+          });
+        }}
+        onDeny={() => {
+          if (!latestPendingAuthRequest) return;
+          void denyAuthRequest(latestPendingAuthRequest).catch((error) => {
+            pushToast('error', error instanceof Error ? error.message : t('txt_auth_request_update_failed'));
+          });
+        }}
+        onClose={() => setAuthRequestDialogDismissedId(latestPendingAuthRequest?.id || null)}
+      />
    </>
  );
 }
@@ -47,6 +47,9 @@ function isAdminProfile(profile: Profile | null): boolean {
  return String(profile?.role || '').toLowerCase() === 'admin';
 }

+const DEVICE_MANAGEMENT_ROUTE = '/settings/security/device-management';
+const LEGACY_DEVICE_MANAGEMENT_ROUTE = '/security/devices';
+
 export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps) {
  const routeAnimationKey = props.isImportRoute ? props.importRoute : props.location;
  const isDomainRulesRoute = props.location === '/settings/domain-rules';
@@ -55,7 +58,8 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
  const vaultActive = props.location === '/vault' || props.location === '/vault/totp';
  const settingsActive = props.location === props.settingsAccountRoute || props.location === '/settings/domain-rules';
  const dataActive = props.location === '/backup' || props.isImportRoute;
-  const managementActive = props.location === '/admin' || props.location === '/security/devices' || props.location === '/logs';
+  const deviceManagementActive = props.location === DEVICE_MANAGEMENT_ROUTE || props.location === LEGACY_DEVICE_MANAGEMENT_ROUTE;
+  const managementActive = props.location === '/admin' || deviceManagementActive || props.location === '/logs';
  const [navLayoutMode, setNavLayoutMode] = useState<NavLayoutMode>(readNavLayoutMode);
  const [navLayoutPickerOpen, setNavLayoutPickerOpen] = useState(false);
  const navLayoutPickerRef = useRef<HTMLDivElement | null>(null);
@@ -177,7 +181,7 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
      {renderSideLink(props.importRoute, props.isImportRoute, <ArrowUpDown size={16} />, t('nav_import_export'))}
      {isAdmin && renderSideLink('/admin', props.location === '/admin', <Users size={16} />, t('nav_admin_panel'))}
      {isAdmin && renderSideLink('/logs', props.location === '/logs', <FileClock size={16} />, t('nav_log_center'))}
-      {renderSideLink('/security/devices', props.location === '/security/devices', <MonitorSmartphone size={16} />, t('nav_device_management'))}
+      {renderSideLink(DEVICE_MANAGEMENT_ROUTE, deviceManagementActive, <MonitorSmartphone size={16} />, t('nav_device_management'))}
    </>
  );

@@ -222,7 +226,7 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
        <>
          {isAdmin && renderSubLink('/admin', props.location === '/admin', t('nav_admin_panel'))}
          {isAdmin && renderSubLink('/logs', props.location === '/logs', t('nav_log_center'))}
-          {renderSubLink('/security/devices', props.location === '/security/devices', t('nav_device_management'))}
+          {renderSubLink(DEVICE_MANAGEMENT_ROUTE, deviceManagementActive, t('nav_device_management'))}
        </>
      )}
    </>
@@ -8,7 +8,7 @@ import type { AdminBackupImportResponse, AdminBackupRunResponse, AdminBackupSett
 import type { AuditLogFilters } from '@/lib/api/admin';
 import type { CiphersImportPayload } from '@/lib/api/vault';
 import { t } from '@/lib/i18n';
-import type { AccountPasskeyCredential, AdminInvite, AdminUser, AuditLogListResult, AuditLogSettings, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SendDraft, SessionState, VaultDraft } from '@/lib/types';
+import type { AccountPasskeyCredential, AdminInvite, AdminUser, AuditLogListResult, AuditLogSettings, AuthRequest, AuthorizedDevice, Cipher, CustomEquivalentDomain, DomainRules, Folder as VaultFolder, Profile, Send, SendDraft, SessionState, VaultDraft } from '@/lib/types';
 import type { ExportRequest } from '@/lib/export-formats';

 const VaultPage = lazy(() => import('@/components/VaultPage'));
@@ -116,6 +116,11 @@ export interface AppMainRoutesProps {
  onCreateAccountPasskey: (name: string, masterPassword: string, directUnlock: boolean) => Promise<AccountPasskeyCredential | null>;
  onEnableAccountPasskeyDirectUnlock: (id: string, masterPassword: string) => Promise<void>;
  onDeleteAccountPasskey: (id: string, masterPassword: string) => Promise<void>;
+  pendingAuthRequests: AuthRequest[];
+  pendingAuthRequestsLoading: boolean;
+  onRefreshPendingAuthRequests: () => Promise<void>;
+  onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
+  onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
  onLockTimeoutChange: (minutes: 0 | 1 | 5 | 15 | 30) => void;
  onSessionTimeoutActionChange: (action: 'lock' | 'logout') => void;
  onRefreshAuthorizedDevices: () => Promise<void>;
@@ -153,6 +158,7 @@ export interface AppMainRoutesProps {

 export default function AppMainRoutes(props: AppMainRoutesProps) {
  const importRoutePaths = [props.importRoute, '/tools/import', '/tools/import-export', '/tools/import-data', '/import', '/import-export'] as const;
+  const deviceManagementRoutePaths = ['/security/devices', '/settings/security/device-management'] as const;
  const isAdmin = String(props.profile?.role || '').toLowerCase() === 'admin';
  const importPageContent = (
    <Suspense fallback={<RouteContentFallback />}>
@@ -269,6 +275,11 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
                onCreateAccountPasskey={props.onCreateAccountPasskey}
                onEnableAccountPasskeyDirectUnlock={props.onEnableAccountPasskeyDirectUnlock}
                onDeleteAccountPasskey={props.onDeleteAccountPasskey}
+                pendingAuthRequests={props.pendingAuthRequests}
+                pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
+                onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
+                onApproveAuthRequest={props.onApproveAuthRequest}
+                onDenyAuthRequest={props.onDenyAuthRequest}
                onLockTimeoutChange={props.onLockTimeoutChange}
                onSessionTimeoutActionChange={props.onSessionTimeoutActionChange}
                onNotify={props.onNotify}
@@ -287,7 +298,7 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
                <SettingsIcon size={18} />
                <span>{t('nav_account_settings')}</span>
              </Link>
-              <Link href="/security/devices" className="mobile-settings-link">
+              <Link href="/settings/security/device-management" className="mobile-settings-link">
                <Shield size={18} />
                <span>{t('nav_device_management')}</span>
              </Link>
@@ -327,7 +338,8 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
          <LoadingState card lines={4} />
        ) : null}
      </Route>
-      <Route path="/security/devices">
+      {deviceManagementRoutePaths.map((path) => (
+        <Route key={path} path={path}>
          <div className="stack">
            {props.mobileLayout && (
              <div className="mobile-settings-subhead">
@@ -342,7 +354,12 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
                devices={props.authorizedDevices}
                loading={props.authorizedDevicesLoading}
                error={props.authorizedDevicesError}
+                pendingAuthRequests={props.pendingAuthRequests}
+                pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
                onRefresh={() => void props.onRefreshAuthorizedDevices()}
+                onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
+                onApproveAuthRequest={props.onApproveAuthRequest}
+                onDenyAuthRequest={props.onDenyAuthRequest}
                onRenameDevice={props.onRenameAuthorizedDevice}
                onRevokeTrust={props.onRevokeDeviceTrust}
                onTrustPermanently={props.onTrustDevicePermanently}
@@ -353,6 +370,7 @@ export default function AppMainRoutes(props: AppMainRoutesProps) {
            </Suspense>
          </div>
        </Route>
+      ))}
      <Route path="/settings/domain-rules">
        <div className="stack domain-rules-route">
          {props.mobileLayout && (
@@ -0,0 +1,74 @@
+import { ShieldCheck, ShieldX } from 'lucide-preact';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import { t } from '@/lib/i18n';
+import type { AuthRequest } from '@/lib/types';
+
+interface AuthRequestApprovalDialogProps {
+  open: boolean;
+  authRequest: AuthRequest | null;
+  submitting: boolean;
+  onApprove: () => void;
+  onDeny: () => void;
+  onClose: () => void;
+}
+
+function formatDateTime(value: string | null | undefined): string {
+  if (!value) return t('txt_dash');
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return parsed.toLocaleString();
+}
+
+export default function AuthRequestApprovalDialog(props: AuthRequestApprovalDialogProps) {
+  const authRequest = props.authRequest;
+  return (
+    <ConfirmDialog
+      open={props.open && !!authRequest}
+      title={t('txt_approve_device_login')}
+      message={t('txt_auth_request_approve_message')}
+      confirmText={props.submitting ? t('txt_approving') : t('txt_approve')}
+      cancelText={t('txt_later')}
+      confirmDisabled={props.submitting || !authRequest}
+      cancelDisabled={props.submitting}
+      onConfirm={props.onApprove}
+      onCancel={props.onClose}
+      afterActions={(
+        <button
+          type="button"
+          className="btn btn-danger dialog-btn"
+          disabled={props.submitting || !authRequest}
+          onClick={props.onDeny}
+        >
+          <ShieldX size={14} className="btn-icon" />
+          {t('txt_deny')}
+        </button>
+      )}
+    >
+      {authRequest && (
+        <div className="auth-request-details">
+          <div className="auth-request-device">
+            <ShieldCheck size={18} />
+            <div>
+              <strong>{authRequest.requestDeviceType || t('txt_unknown_device')}</strong>
+              <small>{authRequest.requestDeviceIdentifier}</small>
+            </div>
+          </div>
+          <div className="auth-request-kv">
+            <span>{t('txt_created')}</span>
+            <strong>{formatDateTime(authRequest.creationDate)}</strong>
+          </div>
+          {authRequest.requestIpAddress && (
+            <div className="auth-request-kv">
+              <span>{t('txt_ip_address')}</span>
+              <strong>{authRequest.requestIpAddress}</strong>
+            </div>
+          )}
+          <div className="auth-request-fingerprint">
+            <span>{t('txt_fingerprint_phrase')}</span>
+            <strong>{authRequest.fingerprintPhrase || t('txt_dash')}</strong>
+          </div>
+        </div>
+      )}
+    </ConfirmDialog>
+  );
+}
@@ -0,0 +1,112 @@
+import { useState } from 'preact/hooks';
+import { RefreshCw, ShieldCheck, ShieldX } from 'lucide-preact';
+import LoadingState from '@/components/LoadingState';
+import type { AuthRequest } from '@/lib/types';
+import { t } from '@/lib/i18n';
+
+interface PendingAuthRequestsPanelProps {
+  pendingAuthRequests: AuthRequest[];
+  pendingAuthRequestsLoading: boolean;
+  onRefreshPendingAuthRequests: () => Promise<void>;
+  onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
+  onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
+  className?: string;
+  loadingVariant?: 'placeholder' | 'compact';
+}
+
+function formatDateTime(value: string | null | undefined): string {
+  if (!value) return t('txt_dash');
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? t('txt_dash') : date.toLocaleString();
+}
+
+export default function PendingAuthRequestsPanel(props: PendingAuthRequestsPanelProps) {
+  const [authRequestSubmittingId, setAuthRequestSubmittingId] = useState<string | null>(null);
+
+  async function approveAuthRequest(authRequest: AuthRequest): Promise<void> {
+    if (authRequestSubmittingId) return;
+    setAuthRequestSubmittingId(authRequest.id);
+    try {
+      await props.onApproveAuthRequest(authRequest);
+    } finally {
+      setAuthRequestSubmittingId(null);
+    }
+  }
+
+  async function denyAuthRequest(authRequest: AuthRequest): Promise<void> {
+    if (authRequestSubmittingId) return;
+    setAuthRequestSubmittingId(authRequest.id);
+    try {
+      await props.onDenyAuthRequest(authRequest);
+    } finally {
+      setAuthRequestSubmittingId(null);
+    }
+  }
+
+  return (
+    <section className={props.className || 'card settings-module'}>
+      <div className="settings-module-head">
+        <h3>{t('txt_pending_device_logins')}</h3>
+        <button
+          type="button"
+          className="btn btn-secondary small"
+          disabled={props.pendingAuthRequestsLoading}
+          onClick={() => void props.onRefreshPendingAuthRequests()}
+        >
+          <RefreshCw size={14} className="btn-icon" />
+          {t('txt_refresh')}
+        </button>
+      </div>
+      <div className="account-passkeys-list">
+        {props.pendingAuthRequestsLoading && props.pendingAuthRequests.length === 0 ? (
+          props.loadingVariant === 'compact' ? (
+            <LoadingState lines={2} compact />
+          ) : (
+            <div className="settings-module-placeholder">
+              <RefreshCw size={20} />
+              <span>{t('txt_loading')}</span>
+            </div>
+          )
+        ) : props.pendingAuthRequests.length === 0 ? (
+          <div className="settings-module-placeholder">
+            <ShieldCheck size={20} />
+            <span>{t('txt_no_pending_device_logins')}</span>
+          </div>
+        ) : (
+          props.pendingAuthRequests.map((authRequest) => (
+            <div key={authRequest.id} className="account-passkey-row auth-request-row">
+              <div className="account-passkey-main">
+                <strong>{authRequest.requestDeviceType || t('txt_unknown_device')}</strong>
+                <small>{authRequest.requestDeviceIdentifier}</small>
+                <small>{t('txt_created_value', { value: formatDateTime(authRequest.creationDate) })}</small>
+              </div>
+              <span className="auth-request-fingerprint-inline">
+                {authRequest.fingerprintPhrase || t('txt_dash')}
+              </span>
+              <div className="actions account-passkey-actions">
+                <button
+                  type="button"
+                  className="btn btn-primary small"
+                  disabled={!!authRequestSubmittingId}
+                  onClick={() => void approveAuthRequest(authRequest)}
+                >
+                  <ShieldCheck size={14} className="btn-icon" />
+                  {authRequestSubmittingId === authRequest.id ? t('txt_approving') : t('txt_approve')}
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-danger small"
+                  disabled={!!authRequestSubmittingId}
+                  onClick={() => void denyAuthRequest(authRequest)}
+                >
+                  <ShieldX size={14} className="btn-icon" />
+                  {t('txt_deny')}
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
@@ -2,14 +2,20 @@ import { useState } from 'preact/hooks';
 import { Clock3, Pencil, RefreshCw, ShieldCheck, ShieldOff, Trash2 } from 'lucide-preact';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import LoadingState from '@/components/LoadingState';
-import type { AuthorizedDevice } from '@/lib/types';
+import PendingAuthRequestsPanel from '@/components/PendingAuthRequestsPanel';
+import type { AuthRequest, AuthorizedDevice } from '@/lib/types';
 import { t } from '@/lib/i18n';

 interface SecurityDevicesPageProps {
  devices: AuthorizedDevice[];
  loading: boolean;
  error: string;
+  pendingAuthRequests: AuthRequest[];
+  pendingAuthRequestsLoading: boolean;
  onRefresh: () => void;
+  onRefreshPendingAuthRequests: () => Promise<void>;
+  onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
+  onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
  onRenameDevice: (device: AuthorizedDevice, name: string) => Promise<void>;
  onRevokeTrust: (device: AuthorizedDevice) => void;
  onTrustPermanently: (device: AuthorizedDevice) => void;
@@ -72,6 +78,16 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
  return (
    <>
      <div className="stack">
+        <PendingAuthRequestsPanel
+          className="card"
+          loadingVariant="compact"
+          pendingAuthRequests={props.pendingAuthRequests}
+          pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
+          onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
+          onApproveAuthRequest={props.onApproveAuthRequest}
+          onDenyAuthRequest={props.onDenyAuthRequest}
+        />
+
        <section className="card">
        <div className="section-head">
          <div>
@@ -2,9 +2,10 @@ import { useEffect, useMemo, useState } from 'preact/hooks';
 import { Clipboard, KeyRound, RefreshCw, ShieldCheck, ShieldOff, Trash2 } from 'lucide-preact';
 import { copyTextToClipboard } from '@/lib/clipboard';
 import qrcode from 'qrcode-generator';
-import type { AccountPasskeyCredential, Profile } from '@/lib/types';
+import type { AccountPasskeyCredential, AuthRequest, Profile } from '@/lib/types';
 import { AVAILABLE_LOCALES, getLocale, setLocale, t, type Locale } from '@/lib/i18n';
 import ConfirmDialog from '@/components/ConfirmDialog';
+import PendingAuthRequestsPanel from '@/components/PendingAuthRequestsPanel';

 interface SettingsPageProps {
  profile: Profile;
@@ -22,6 +23,11 @@ interface SettingsPageProps {
  onCreateAccountPasskey: (name: string, masterPassword: string, directUnlock: boolean) => Promise<AccountPasskeyCredential | null>;
  onEnableAccountPasskeyDirectUnlock: (id: string, masterPassword: string) => Promise<void>;
  onDeleteAccountPasskey: (id: string, masterPassword: string) => Promise<void>;
+  pendingAuthRequests: AuthRequest[];
+  pendingAuthRequestsLoading: boolean;
+  onRefreshPendingAuthRequests: () => Promise<void>;
+  onApproveAuthRequest: (request: AuthRequest) => Promise<void>;
+  onDenyAuthRequest: (request: AuthRequest) => Promise<void>;
  onLockTimeoutChange: (minutes: 0 | 1 | 5 | 15 | 30) => void;
  onSessionTimeoutActionChange: (action: 'lock' | 'logout') => void;
  onNotify?: (type: 'success' | 'error' | 'warning', text: string) => void;
@@ -219,13 +225,6 @@ export default function SettingsPage(props: SettingsPageProps) {
    return t('txt_prf_not_supported');
  }

-  function formatDateTime(value: string | null | undefined): string {
-    if (!value) return t('txt_dash');
-    const parsed = new Date(value);
-    if (Number.isNaN(parsed.getTime())) return value;
-    return parsed.toLocaleString();
-  }
-
  async function changeLocale(next: Locale): Promise<void> {
    if (next === getLocale()) return;
    setSelectedLocale(next);
@@ -504,6 +503,14 @@ export default function SettingsPage(props: SettingsPageProps) {
        </div>
      </section>

+      <PendingAuthRequestsPanel
+        pendingAuthRequests={props.pendingAuthRequests}
+        pendingAuthRequestsLoading={props.pendingAuthRequestsLoading}
+        onRefreshPendingAuthRequests={props.onRefreshPendingAuthRequests}
+        onApproveAuthRequest={props.onApproveAuthRequest}
+        onDenyAuthRequest={props.onDenyAuthRequest}
+      />
+
      <section className="settings-module sensitive-actions-module">
        <div className="sensitive-actions-grid">
          <div className="sensitive-action">
@@ -0,0 +1,128 @@
+import { base64ToBytes, bytesToBase64, hkdfExpand, toBufferSource } from '@/lib/crypto';
+import { EFFLongWordList } from '@/lib/fingerprint-wordlist';
+import { t } from '@/lib/i18n';
+import type { AuthRequest, ListResponse, SessionState } from '@/lib/types';
+import type { AuthedFetch } from './shared';
+import { parseErrorMessage, parseJson } from './shared';
+
+function readResponseProperty<T>(source: Record<string, any>, camel: string, pascal: string, fallback: T): T {
+  return (source[camel] ?? source[pascal] ?? fallback) as T;
+}
+
+function normalizeAuthRequest(raw: Record<string, any>): AuthRequest {
+  return {
+    id: String(readResponseProperty(raw, 'id', 'Id', '')),
+    publicKey: String(readResponseProperty(raw, 'publicKey', 'PublicKey', '')),
+    requestDeviceType: readResponseProperty(raw, 'requestDeviceType', 'RequestDeviceType', null),
+    requestDeviceTypeValue: readResponseProperty(raw, 'requestDeviceTypeValue', 'RequestDeviceTypeValue', null),
+    requestDeviceIdentifier: String(readResponseProperty(raw, 'requestDeviceIdentifier', 'RequestDeviceIdentifier', '')),
+    requestIpAddress: readResponseProperty(raw, 'requestIpAddress', 'RequestIpAddress', null),
+    requestCountryName: readResponseProperty(raw, 'requestCountryName', 'RequestCountryName', null),
+    key: readResponseProperty(raw, 'key', 'Key', null),
+    creationDate: String(readResponseProperty(raw, 'creationDate', 'CreationDate', '')),
+    requestApproved: readResponseProperty(raw, 'requestApproved', 'RequestApproved', null),
+    responseDate: readResponseProperty(raw, 'responseDate', 'ResponseDate', null),
+    deviceId: readResponseProperty(raw, 'deviceId', 'DeviceId', null),
+    requestDeviceId: readResponseProperty(raw, 'requestDeviceId', 'RequestDeviceId', null),
+  };
+}
+
+async function withFingerprintPhrase(email: string, request: AuthRequest): Promise<AuthRequest> {
+  if (!request.publicKey) return request;
+  try {
+    return {
+      ...request,
+      fingerprintPhrase: await getFingerprintPhrase(email, base64ToBytes(request.publicKey)),
+    };
+  } catch {
+    return request;
+  }
+}
+
+export async function listPendingAuthRequests(authedFetch: AuthedFetch, email: string): Promise<AuthRequest[]> {
+  const resp = await authedFetch('/api/auth-requests/pending');
+  if (!resp.ok) throw new Error(await parseErrorMessage(resp, t('txt_auth_requests_load_failed')));
+  const body = await parseJson<ListResponse<Record<string, any>> & { Data?: Record<string, any>[] }>(resp);
+  const rows = (body?.data || body?.Data || []).map(normalizeAuthRequest);
+  return Promise.all(rows.map((row) => withFingerprintPhrase(email, row)));
+}
+
+export async function respondToAuthRequest(
+  authedFetch: AuthedFetch,
+  requestId: string,
+  payload: {
+    key?: string | null;
+    masterPasswordHash?: string | null;
+    deviceIdentifier: string;
+    requestApproved: boolean;
+  }
+): Promise<AuthRequest> {
+  const resp = await authedFetch(`/api/auth-requests/${encodeURIComponent(requestId)}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!resp.ok) throw new Error(await parseErrorMessage(resp, t('txt_auth_request_update_failed')));
+  const body = await parseJson<Record<string, any>>(resp);
+  if (!body) throw new Error(t('txt_auth_request_update_failed'));
+  return normalizeAuthRequest(body);
+}
+
+export function isPendingAuthRequest(request: AuthRequest): boolean {
+  if (!request.id || !request.creationDate) return false;
+  if (request.responseDate) return false;
+  const createdAt = new Date(request.creationDate).getTime();
+  if (!Number.isFinite(createdAt)) return true;
+  return Date.now() - createdAt < 15 * 60 * 1000;
+}
+
+export async function encryptSessionUserKeyForAuthRequest(session: SessionState, authRequest: AuthRequest): Promise<string> {
+  if (!session.symEncKey || !session.symMacKey) throw new Error(t('txt_vault_key_unavailable'));
+  if (!authRequest.publicKey) throw new Error(t('txt_auth_request_missing_public_key'));
+
+  const userKeyBytes = new Uint8Array(64);
+  userKeyBytes.set(base64ToBytes(session.symEncKey), 0);
+  userKeyBytes.set(base64ToBytes(session.symMacKey), 32);
+  const publicKey = await crypto.subtle.importKey(
+    'spki',
+    toBufferSource(base64ToBytes(authRequest.publicKey)),
+    { name: 'RSA-OAEP', hash: 'SHA-1' },
+    false,
+    ['encrypt']
+  );
+  const encryptedBytes = new Uint8Array(await crypto.subtle.encrypt(
+    { name: 'RSA-OAEP' },
+    publicKey,
+    toBufferSource(userKeyBytes)
+  ));
+  return `4.${bytesToBase64(encryptedBytes)}`;
+}
+
+export async function getFingerprintPhrase(email: string, publicKey: Uint8Array): Promise<string> {
+  const keyFingerprint = new Uint8Array(await crypto.subtle.digest('SHA-256', toBufferSource(publicKey)));
+  const userFingerprint = await hkdfExpand(keyFingerprint, email.toLowerCase(), 32);
+  return hashPhrase(userFingerprint).join('-');
+}
+
+function hashPhrase(hash: Uint8Array, minimumEntropy = 64): string[] {
+  const entropyPerWord = Math.log(EFFLongWordList.length) / Math.log(2);
+  let numWords = Math.ceil(minimumEntropy / entropyPerWord);
+  if (numWords * entropyPerWord > hash.length * 4) {
+    throw new Error('Output entropy of hash function is too small');
+  }
+
+  let hashNumber = 0n;
+  for (const byte of hash) {
+    hashNumber = (hashNumber * 256n) + BigInt(byte);
+  }
+
+  const phrase: string[] = [];
+  const wordCount = BigInt(EFFLongWordList.length);
+  while (numWords > 0) {
+    const remainder = Number(hashNumber % wordCount);
+    hashNumber /= wordCount;
+    phrase.push(EFFLongWordList[remainder]);
+    numWords -= 1;
+  }
+  return phrase;
+}
@@ -1172,7 +1172,22 @@ const en: Record<string, string> = {
  "txt_target": "Target",
  "txt_time": "Time",
  "txt_time_range": "Time range",
-  "txt_remove_domain": "Remove domain"
+  "txt_remove_domain": "Remove domain",
+  "txt_approve_device_login": "Approve device login",
+  "txt_auth_request_approve_message": "Unlock Bitwarden on your device or approve from the web app. Before approving, make sure the fingerprint phrase matches the one below.",
+  "txt_approve": "Approve",
+  "txt_approving": "Approving...",
+  "txt_deny": "Deny",
+  "txt_later": "Later",
+  "txt_pending_device_logins": "Pending device logins",
+  "txt_no_pending_device_logins": "No pending device logins",
+  "txt_fingerprint_phrase": "Fingerprint phrase",
+  "txt_auth_requests_load_failed": "Failed to load device login requests",
+  "txt_auth_request_update_failed": "Failed to update device login request",
+  "txt_auth_request_approved": "Device login approved",
+  "txt_auth_request_denied": "Device login denied",
+  "txt_auth_request_missing_public_key": "Device login request is missing a public key",
+  "txt_ip_address": "IP address"
 };

 export default en;
@@ -1172,7 +1172,22 @@ const es: Record<string, string> = {
  "txt_target": "Destino",
  "txt_time": "Hora",
  "txt_time_range": "Rango de tiempo",
-  "txt_remove_domain": "Quitar dominio"
+  "txt_remove_domain": "Quitar dominio",
+  "txt_approve_device_login": "Aprobar inicio de sesión con dispositivo",
+  "txt_auth_request_approve_message": "Desbloquee Bitwarden en su dispositivo o apruebe desde la aplicación web. Antes de aprobar, asegúrese de que la frase de huella coincida con la siguiente.",
+  "txt_fingerprint_phrase": "Frase de huella",
+  "txt_ip_address": "Dirección IP",
+  "txt_approve": "Aprobar",
+  "txt_approving": "Aprobando...",
+  "txt_deny": "Denegar",
+  "txt_later": "Más tarde",
+  "txt_pending_device_logins": "Inicios de sesión con dispositivo pendientes",
+  "txt_no_pending_device_logins": "No hay inicios de sesión con dispositivo pendientes",
+  "txt_auth_requests_load_failed": "No se pudieron cargar las solicitudes de inicio de sesión con dispositivo",
+  "txt_auth_request_update_failed": "No se pudo actualizar la solicitud de inicio de sesión con dispositivo",
+  "txt_auth_request_approved": "Inicio de sesión con dispositivo aprobado",
+  "txt_auth_request_denied": "Inicio de sesión con dispositivo denegado",
+  "txt_auth_request_missing_public_key": "La solicitud de inicio de sesión con dispositivo no incluye una clave pública"
 };

 export default es;
@@ -1172,7 +1172,22 @@ const ru: Record<string, string> = {
  "txt_target": "Цель",
  "txt_time": "Время",
  "txt_time_range": "Период",
-  "txt_remove_domain": "Удалить домен"
+  "txt_remove_domain": "Удалить домен",
+  "txt_approve_device_login": "Подтвердить вход с устройства",
+  "txt_auth_request_approve_message": "Разблокируйте Bitwarden на устройстве или подтвердите вход через веб-приложение. Перед подтверждением убедитесь, что фраза отпечатка совпадает с указанной ниже.",
+  "txt_fingerprint_phrase": "Фраза отпечатка",
+  "txt_ip_address": "IP-адрес",
+  "txt_approve": "Подтвердить",
+  "txt_approving": "Подтверждение...",
+  "txt_deny": "Отклонить",
+  "txt_later": "Позже",
+  "txt_pending_device_logins": "Ожидающие входы с устройств",
+  "txt_no_pending_device_logins": "Нет ожидающих входов с устройств",
+  "txt_auth_requests_load_failed": "Не удалось загрузить запросы входа с устройств",
+  "txt_auth_request_update_failed": "Не удалось обновить запрос входа с устройства",
+  "txt_auth_request_approved": "Вход с устройства подтвержден",
+  "txt_auth_request_denied": "Вход с устройства отклонен",
+  "txt_auth_request_missing_public_key": "В запросе входа с устройства отсутствует открытый ключ"
 };

 export default ru;
@@ -1172,7 +1172,22 @@ const zhCN: Record<string, string> = {
  "txt_target": "目标",
  "txt_time": "时间",
  "txt_time_range": "时间范围",
-  "txt_remove_domain": "移除域名"
+  "txt_remove_domain": "移除域名",
+  "txt_approve_device_login": "批准设备登录",
+  "txt_auth_request_approve_message": "解锁您设备上的 Bitwarden，或通过网页 App 批准。批准前，请确保指纹短语与下面的相匹配。",
+  "txt_approve": "批准",
+  "txt_approving": "正在批准...",
+  "txt_deny": "拒绝",
+  "txt_later": "稍后",
+  "txt_pending_device_logins": "待处理设备登录",
+  "txt_no_pending_device_logins": "没有待处理设备登录",
+  "txt_fingerprint_phrase": "指纹短语",
+  "txt_auth_requests_load_failed": "加载设备登录请求失败",
+  "txt_auth_request_update_failed": "更新设备登录请求失败",
+  "txt_auth_request_approved": "已批准设备登录",
+  "txt_auth_request_denied": "已拒绝设备登录",
+  "txt_auth_request_missing_public_key": "设备登录请求缺少公钥",
+  "txt_ip_address": "IP 地址"
 };

 export default zhCN;
@@ -1172,7 +1172,22 @@ const zhTW: Record<string, string> = {
  "txt_target": "目標",
  "txt_time": "時間",
  "txt_time_range": "時間範圍",
-  "txt_remove_domain": "移除域名"
+  "txt_remove_domain": "移除域名",
+  "txt_approve_device_login": "批准裝置登入",
+  "txt_auth_request_approve_message": "解鎖您裝置上的 Bitwarden，或透過網頁 App 批准。批准前，請確保指紋短語與下面的相符。",
+  "txt_fingerprint_phrase": "指紋短語",
+  "txt_ip_address": "IP 位址",
+  "txt_approve": "批准",
+  "txt_approving": "正在批准...",
+  "txt_deny": "拒絕",
+  "txt_later": "稍後",
+  "txt_pending_device_logins": "待處理裝置登入",
+  "txt_no_pending_device_logins": "沒有待處理裝置登入",
+  "txt_auth_requests_load_failed": "載入裝置登入請求失敗",
+  "txt_auth_request_update_failed": "更新裝置登入請求失敗",
+  "txt_auth_request_approved": "已批准裝置登入",
+  "txt_auth_request_denied": "已拒絕裝置登入",
+  "txt_auth_request_missing_public_key": "裝置登入請求缺少公鑰"
 };

 export default zhTW;
@@ -338,6 +338,23 @@ export interface AccountPasskeyCredential {
  revisionDate?: string;
 }

+export interface AuthRequest {
+  id: string;
+  publicKey: string;
+  requestDeviceType?: string | null;
+  requestDeviceTypeValue?: number | null;
+  requestDeviceIdentifier: string;
+  requestIpAddress?: string | null;
+  requestCountryName?: string | null;
+  key?: string | null;
+  creationDate: string;
+  requestApproved?: boolean | null;
+  responseDate?: string | null;
+  deviceId?: string | null;
+  requestDeviceId?: string | null;
+  fingerprintPhrase?: string;
+}
+
 export interface AccountPasskeyAssertionOptionsResponse {
  options: PublicKeyCredentialRequestOptions;
  token: string;
@@ -389,3 +389,83 @@
 .mobile-sidebar-head {
  @apply hidden;
 }
+
+.auth-request-details {
+  display: grid;
+  gap: 12px;
+  margin: 12px 0 4px;
+}
+
+.auth-request-device {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  padding: 10px;
+  background: color-mix(in srgb, var(--primary) 7%, var(--panel));
+}
+
+.auth-request-device svg {
+  color: var(--primary-strong);
+  flex: 0 0 auto;
+}
+
+.auth-request-device div,
+.account-passkey-main {
+  min-width: 0;
+}
+
+.auth-request-device strong,
+.auth-request-device small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.auth-request-device small {
+  color: var(--muted);
+}
+
+.auth-request-kv {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: var(--font-sm);
+}
+
+.auth-request-kv span,
+.auth-request-fingerprint span {
+  color: var(--muted);
+}
+
+.auth-request-kv strong {
+  color: var(--text);
+  text-align: right;
+}
+
+.auth-request-fingerprint {
+  display: grid;
+  gap: 6px;
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.auth-request-fingerprint strong,
+.auth-request-fingerprint-inline {
+  overflow-wrap: anywhere;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: var(--font-sm);
+  line-height: 1.45;
+}
+
+.auth-request-row {
+  align-items: start;
+}
+
+.auth-request-fingerprint-inline {
+  color: var(--muted-strong);
+  max-width: 260px;
+}