Add Passkey (WebAuthn) authentication support

Introduces Passkey (WebAuthn) registration and authentication to both backend and frontend. Backend adds new API endpoints, middleware exceptions, and a PasskeyHelper for credential management using @simplewebauthn/server. Frontend integrates @simplewebauthn/browser, updates login and config pages for Passkey registration and login flows, and adds related UI and controller methods.

packages/napcat-webui-backend/package.json

@@ -16,6 +16,7 @@
     }
   },
   "dependencies": {
+    "@simplewebauthn/server": "^13.2.2",
     "@sinclair/typebox": "^0.34.38",
     "ajv": "^8.13.0",
     "compressing": "^1.10.3",

packages/napcat-webui-backend/src/api/Auth.ts

@@ -1,5 +1,6 @@
 import { RequestHandler } from 'express';
 import { AuthHelper } from '@/napcat-webui-backend/src/helper/SignToken';
+import { PasskeyHelper } from '@/napcat-webui-backend/src/helper/PasskeyHelper';
 import { WebUiDataRuntime } from '@/napcat-webui-backend/src/helper/Data';
 import { sendSuccess, sendError } from '@/napcat-webui-backend/src/utils/response';
 import { isEmpty } from '@/napcat-webui-backend/src/utils/check';
@@ -148,3 +149,115 @@ export const UpdateTokenHandler: RequestHandler = async (req, res) => {
     return sendError(res, `Failed to update token: ${e.message}`);
   }
 };
+
+// 生成Passkey注册选项
+export const GeneratePasskeyRegistrationOptionsHandler: RequestHandler = async (_req, res) => {
+  try {
+    // 使用固定用户ID，因为WebUI只有一个用户
+    const userId = 'napcat-user';
+    const userName = 'NapCat User';
+
+    // 从请求头获取host来确定RP_ID
+    const host = _req.get('host') || 'localhost';
+    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
+    // 对于本地开发，使用localhost而不是IP地址
+    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
+
+    const options = await PasskeyHelper.generateRegistrationOptions(userId, userName, rpId);
+    return sendSuccess(res, options);
+  } catch (error) {
+    return sendError(res, `Failed to generate registration options: ${(error as Error).message}`);
+  }
+};
+
+// 验证Passkey注册
+export const VerifyPasskeyRegistrationHandler: RequestHandler = async (req, res) => {
+  try {
+    const { response } = req.body;
+    if (!response) {
+      return sendError(res, 'Response is required');
+    }
+
+    const origin = req.get('origin') || req.protocol + '://' + req.get('host');
+    const host = req.get('host') || 'localhost';
+    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
+    // 对于本地开发，使用localhost而不是IP地址
+    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
+    const userId = 'napcat-user';
+    const verification = await PasskeyHelper.verifyRegistration(userId, response, origin, rpId);
+
+    if (verification.verified) {
+      return sendSuccess(res, { verified: true });
+    } else {
+      return sendError(res, 'Registration failed');
+    }
+  } catch (error) {
+    return sendError(res, `Registration verification failed: ${(error as Error).message}`);
+  }
+};
+
+// 生成Passkey认证选项
+export const GeneratePasskeyAuthenticationOptionsHandler: RequestHandler = async (_req, res) => {
+  try {
+    const userId = 'napcat-user';
+
+    if (!(await PasskeyHelper.hasPasskeys(userId))) {
+      return sendError(res, 'No passkeys registered');
+    }
+
+    // 从请求头获取host来确定RP_ID
+    const host = _req.get('host') || 'localhost';
+    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
+    // 对于本地开发，使用localhost而不是IP地址
+    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
+
+    const options = await PasskeyHelper.generateAuthenticationOptions(userId, rpId);
+    return sendSuccess(res, options);
+  } catch (error) {
+    return sendError(res, `Failed to generate authentication options: ${(error as Error).message}`);
+  }
+};
+
+// 验证Passkey认证
+export const VerifyPasskeyAuthenticationHandler: RequestHandler = async (req, res) => {
+  try {
+    const { response } = req.body;
+    if (!response) {
+      return sendError(res, 'Response is required');
+    }
+
+    // 获取WebUI配置用于限速检查
+    const WebUiConfigData = await WebUiConfig.GetWebUIConfig();
+    // 获取客户端IP
+    const clientIP = req.ip || req.socket.remoteAddress || '';
+
+    // 检查登录频率
+    if (!WebUiDataRuntime.checkLoginRate(clientIP, WebUiConfigData.loginRate)) {
+      return sendError(res, 'login rate limit');
+    }
+
+    const origin = req.get('origin') || req.protocol + '://' + req.get('host');
+    const host = req.get('host') || 'localhost';
+    const hostname = host.split(':')[0] || 'localhost'; // 移除端口
+    // 对于本地开发，使用localhost而不是IP地址
+    const rpId = (hostname === '127.0.0.1' || hostname === 'localhost') ? 'localhost' : hostname;
+    const userId = 'napcat-user';
+    const verification = await PasskeyHelper.verifyAuthentication(userId, response, origin, rpId);
+
+    if (verification.verified) {
+      // 使用与普通登录相同的凭证签发
+      const initialToken = getInitialWebUiToken();
+      if (!initialToken) {
+        return sendError(res, 'Server token not initialized');
+      }
+      const signCredential = Buffer.from(JSON.stringify(AuthHelper.signCredential(AuthHelper.generatePasswordHash(initialToken)))).toString('base64');
+      return sendSuccess(res, {
+        Credential: signCredential,
+      });
+    } else {
+      return sendError(res, 'Authentication failed');
+    }
+  } catch (error) {
+    return sendError(res, `Authentication verification failed: ${(error as Error).message}`);
+  }
+};

packages/napcat-webui-backend/src/helper/PasskeyHelper.ts

@@ -0,0 +1,206 @@
+import {
+  generateRegistrationOptions,
+  verifyRegistrationResponse,
+  generateAuthenticationOptions,
+  verifyAuthenticationResponse,
+  type AuthenticatorTransportFuture,
+} from '@simplewebauthn/server';
+import { isoBase64URL } from '@simplewebauthn/server/helpers';
+import { promises as fs } from 'fs';
+import path from 'path';
+import { webUiPathWrapper } from '../../index';
+
+interface PasskeyCredential {
+  id: string;
+  publicKey: string;
+  counter: number;
+  transports?: AuthenticatorTransportFuture[];
+}
+
+const RP_NAME = 'NapCat WebUI';
+
+export class PasskeyHelper {
+  private static getPasskeyFilePath (): string {
+    return path.join(webUiPathWrapper.configPath, 'passkey.json');
+  }
+
+  // 内存中存储临时挑战数据
+  private static challenges: Map<string, string> = new Map();
+  private static async ensurePasskeyFile (): Promise<void> {
+    try {
+      // 确保配置文件目录存在
+      const passkeyFile = this.getPasskeyFilePath();
+      await fs.mkdir(path.dirname(passkeyFile), { recursive: true });
+      // 检查文件是否存在，如果不存在创建空文件
+      try {
+        await fs.access(passkeyFile);
+      } catch {
+        await fs.writeFile(passkeyFile, JSON.stringify({}, null, 2));
+      }
+    } catch (error) {
+      // Directory or file already exists or other error
+    }
+  }
+
+  private static async getAllPasskeys (): Promise<Record<string, PasskeyCredential[]>> {
+    await this.ensurePasskeyFile();
+    try {
+      const passkeyFile = this.getPasskeyFilePath();
+      const data = await fs.readFile(passkeyFile, 'utf-8');
+      const passkeys = JSON.parse(data);
+      return typeof passkeys === 'object' && passkeys !== null ? passkeys : {};
+    } catch (error) {
+      return {};
+    }
+  }
+
+  private static async saveAllPasskeys (allPasskeys: Record<string, PasskeyCredential[]>): Promise<void> {
+    await this.ensurePasskeyFile();
+    const passkeyFile = this.getPasskeyFilePath();
+    await fs.writeFile(passkeyFile, JSON.stringify(allPasskeys, null, 2));
+  }
+
+  private static async getUserPasskeys (userId: string): Promise<PasskeyCredential[]> {
+    const allPasskeys = await this.getAllPasskeys();
+    return allPasskeys[userId] || [];
+  }
+
+  // 持久性存储用户的passkey到统一配置文件
+  private static async setUserPasskeys (userId: string, passkeys: PasskeyCredential[]): Promise<void> {
+    const allPasskeys = await this.getAllPasskeys();
+    if (passkeys.length > 0) {
+      allPasskeys[userId] = passkeys;
+    } else {
+      delete allPasskeys[userId];
+    }
+    await this.saveAllPasskeys(allPasskeys);
+  }
+
+  static async generateRegistrationOptions (userId: string, userName: string, rpId: string) {
+    const userPasskeys = await this.getUserPasskeys(userId);
+
+    const options = await generateRegistrationOptions({
+      rpName: RP_NAME,
+      rpID: rpId,
+      userID: new TextEncoder().encode(userId),
+      userName: userName,
+      attestationType: 'none',
+      excludeCredentials: userPasskeys.map(passkey => ({
+        id: passkey.id,
+        type: 'public-key' as const,
+        transports: passkey.transports,
+      })),
+      // Temporarily simplify authenticatorSelection - remove residentKey to avoid conflicts
+      authenticatorSelection: {
+        userVerification: 'preferred',
+      },
+    });
+
+    // Store challenge temporarily in memory
+    this.challenges.set(`reg_${userId}`, options.challenge);
+    // Auto cleanup after 5 minutes
+    setTimeout(() => {
+      this.challenges.delete(`reg_${userId}`);
+    }, 300000);
+
+    return options;
+  }
+
+  static async verifyRegistration (userId: string, response: any, origin: string, rpId: string) {
+    const expectedChallenge = this.challenges.get(`reg_${userId}`);
+    if (!expectedChallenge) {
+      throw new Error('Challenge not found or expired');
+    }
+
+    const verification = await verifyRegistrationResponse({
+      response,
+      expectedChallenge,
+      expectedOrigin: origin,
+      expectedRPID: rpId,
+    });
+
+    if (verification.verified && verification.registrationInfo) {
+      const { registrationInfo } = verification;
+
+      const newPasskey: PasskeyCredential = {
+        id: registrationInfo.credential.id,
+        publicKey: isoBase64URL.fromBuffer(registrationInfo.credential.publicKey),
+        counter: registrationInfo.credential.counter || 0,
+        transports: response.response.transports,
+      };
+
+      const userPasskeys = await this.getUserPasskeys(userId);
+      userPasskeys.push(newPasskey);
+      await this.setUserPasskeys(userId, userPasskeys);
+
+      // Clean up challenge
+      this.challenges.delete(`reg_${userId}`);
+    }
+
+    return verification;
+  }
+
+  static async generateAuthenticationOptions (userId: string, rpId: string) {
+    const userPasskeys = await this.getUserPasskeys(userId);
+
+    const options = await generateAuthenticationOptions({
+      rpID: rpId,
+      allowCredentials: userPasskeys.map(passkey => ({
+        id: passkey.id,
+        type: 'public-key' as const,
+        transports: passkey.transports,
+      })),
+      userVerification: 'preferred',
+    });
+
+    // Store challenge temporarily in memory
+    this.challenges.set(`auth_${userId}`, options.challenge);
+    // Auto cleanup after 5 minutes
+    setTimeout(() => {
+      this.challenges.delete(`auth_${userId}`);
+    }, 300000);
+
+    return options;
+  }
+
+  static async verifyAuthentication (userId: string, response: any, origin: string, rpId: string) {
+    const expectedChallenge = this.challenges.get(`auth_${userId}`);
+    if (!expectedChallenge) {
+      throw new Error('Challenge not found or expired');
+    }
+
+    const userPasskeys = await this.getUserPasskeys(userId);
+    const passkey = userPasskeys.find(p => p.id === response.id);
+    if (!passkey) {
+      throw new Error('Passkey not found');
+    }
+
+    const verification = await verifyAuthenticationResponse({
+      response,
+      expectedChallenge,
+      expectedOrigin: origin,
+      expectedRPID: rpId,
+      credential: {
+        id: passkey.id,
+        publicKey: isoBase64URL.toBuffer(passkey.publicKey),
+        counter: passkey.counter,
+      },
+    });
+
+    if (verification.verified && verification.authenticationInfo) {
+      // Update counter
+      passkey.counter = verification.authenticationInfo.newCounter;
+      await this.setUserPasskeys(userId, userPasskeys);
+
+      // Clean up challenge
+      this.challenges.delete(`auth_${userId}`);
+    }
+
+    return verification;
+  }
+
+  static async hasPasskeys (userId: string): Promise<boolean> {
+    const userPasskeys = await this.getUserPasskeys(userId);
+    return userPasskeys.length > 0;
+  }
+}

packages/napcat-webui-backend/src/middleware/auth.ts

@@ -12,6 +12,12 @@ export async function auth (req: Request, res: Response, next: NextFunction) {
   if (req.url === '/auth/login') {
     return next();
   }
+  if (req.url === '/auth/passkey/generate-authentication-options' ||
+    req.url === '/auth/passkey/verify-authentication') {
+    return next();
+  }
+
+
 
   // 判断是否有Authorization头
   if (req.headers?.authorization) {

packages/napcat-webui-backend/src/router/auth.ts

@@ -5,6 +5,10 @@ import {
   LoginHandler,
   LogoutHandler,
   UpdateTokenHandler,
+  GeneratePasskeyRegistrationOptionsHandler,
+  VerifyPasskeyRegistrationHandler,
+  GeneratePasskeyAuthenticationOptionsHandler,
+  VerifyPasskeyAuthenticationHandler,
 } from '@/napcat-webui-backend/src/api/Auth';
 
 const router = Router();
@@ -16,5 +20,13 @@ router.post('/check', checkHandler);
 router.post('/logout', LogoutHandler);
 // router:更新token
 router.post('/update_token', UpdateTokenHandler);
+// router:生成Passkey注册选项
+router.post('/passkey/generate-registration-options', GeneratePasskeyRegistrationOptionsHandler);
+// router:验证Passkey注册
+router.post('/passkey/verify-registration', VerifyPasskeyRegistrationHandler);
+// router:生成Passkey认证选项
+router.post('/passkey/generate-authentication-options', GeneratePasskeyAuthenticationOptionsHandler);
+// router:验证Passkey认证
+router.post('/passkey/verify-authentication', VerifyPasskeyAuthenticationHandler);
 
 export { router as AuthRouter };

packages/napcat-webui-frontend/package.json

@@ -48,6 +48,7 @@
     "@monaco-editor/react": "4.7.0-rc.0",
     "@react-aria/visually-hidden": "^3.8.19",
     "@reduxjs/toolkit": "^2.5.1",
+    "@simplewebauthn/browser": "^13.2.2",
     "@uidotdev/usehooks": "^2.4.1",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "^0.10.0",

packages/napcat-webui-frontend/src/controllers/webui_manager.ts

@@ -212,4 +212,35 @@ export default class WebUIManager {
     );
     return data.data;
   }
+
+  // Passkey相关方法
+  public static async generatePasskeyRegistrationOptions () {
+    const { data } = await serverRequest.post<ServerResponse<any>>(
+      '/auth/passkey/generate-registration-options'
+    );
+    return data.data;
+  }
+
+  public static async verifyPasskeyRegistration (response: any) {
+    const { data } = await serverRequest.post<ServerResponse<any>>(
+      '/auth/passkey/verify-registration',
+      { response }
+    );
+    return data.data;
+  }
+
+  public static async generatePasskeyAuthenticationOptions () {
+    const { data } = await serverRequest.post<ServerResponse<any>>(
+      '/auth/passkey/generate-authentication-options'
+    );
+    return data.data;
+  }
+
+  public static async verifyPasskeyAuthentication (response: any) {
+    const { data } = await serverRequest.post<ServerResponse<any>>(
+      '/auth/passkey/verify-authentication',
+      { response }
+    );
+    return data.data;
+  }
 }

packages/napcat-webui-frontend/src/pages/dashboard/config/webui.tsx

@@ -1,6 +1,7 @@
 import { Input } from '@heroui/input';
+import { Button } from '@heroui/button';
 import { useLocalStorage } from '@uidotdev/usehooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
@@ -14,6 +15,24 @@ import useMusic from '@/hooks/use-music';
 
 import { siteConfig } from '@/config/site';
 import FileManager from '@/controllers/file_manager';
+import WebUIManager from '@/controllers/webui_manager';
+
+// Base64URL to Uint8Array converter
+function base64UrlToUint8Array (base64Url: string): Uint8Array {
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+// Uint8Array to Base64URL converter
+function uint8ArrayToBase64Url (uint8Array: Uint8Array): string {
+  const base64 = window.btoa(String.fromCharCode(...uint8Array));
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
 
 const WebUIConfigCard = () => {
   const {
@@ -35,6 +54,25 @@ const WebUIConfigCard = () => {
     {}
   );
   const { setListId, listId } = useMusic();
+  const [registrationOptions, setRegistrationOptions] = useState<any>(null);
+  const [isLoadingOptions, setIsLoadingOptions] = useState(false);
+
+  // 预先获取注册选项（可以在任何时候调用）
+  const preloadRegistrationOptions = async () => {
+    setIsLoadingOptions(true);
+    try {
+      console.log('预先获取注册选项...');
+      const options = await WebUIManager.generatePasskeyRegistrationOptions();
+      setRegistrationOptions(options);
+      console.log('✅ 注册选项已获取并存储');
+      toast.success('注册选项已准备就绪，请点击注册按钮');
+    } catch (error) {
+      console.error('❌ 获取注册选项失败:', error);
+      toast.error('获取注册选项失败，请重试');
+    } finally {
+      setIsLoadingOptions(false);
+    }
+  };
 
   const reset = () => {
     setWebuiValue('musicListID', listId);
@@ -125,6 +163,122 @@ const WebUIConfigCard = () => {
           />
         ))}
       </div>
+      <div className='flex flex-col gap-2'>
+        <div className='flex-shrink-0 w-full'>Passkey认证</div>
+        <div className='text-sm text-default-400 mb-2'>
+          注册Passkey后，您可以更便捷地登录WebUI，无需每次输入token
+        </div>
+        <div className='flex gap-2'>
+          <Button
+            color='secondary'
+            variant='flat'
+            onPress={preloadRegistrationOptions}
+            isLoading={isLoadingOptions}
+            className='w-fit'
+          >
+            {!isLoadingOptions && '📥'}
+            准备选项
+          </Button>
+          <Button
+            color='primary'
+            variant='flat'
+            onPress={() => {
+              // 必须在用户手势的同步上下文中立即调用WebAuthn API
+              if (!registrationOptions) {
+                toast.error('请先点击"准备选项"按钮获取注册选项');
+                return;
+              }
+
+              console.log('开始Passkey注册...');
+              console.log('使用预先获取的选项:', registrationOptions);
+
+              // 立即调用WebAuthn API，不要用async/await
+              navigator.credentials.create({
+                publicKey: {
+                  challenge: base64UrlToUint8Array(registrationOptions.challenge) as BufferSource,
+                  rp: {
+                    name: registrationOptions.rp.name,
+                    id: registrationOptions.rp.id
+                  },
+                  user: {
+                    id: base64UrlToUint8Array(registrationOptions.user.id) as BufferSource,
+                    name: registrationOptions.user.name,
+                    displayName: registrationOptions.user.displayName,
+                  },
+                  pubKeyCredParams: registrationOptions.pubKeyCredParams,
+                  timeout: 30000,
+                  excludeCredentials: registrationOptions.excludeCredentials?.map((cred: any) => ({
+                    id: base64UrlToUint8Array(cred.id) as BufferSource,
+                    type: cred.type,
+                    transports: cred.transports,
+                  })) || [],
+                  attestation: registrationOptions.attestation,
+                },
+              }).then(async (credential) => {
+                console.log('✅ 注册成功！凭据已创建');
+                console.log('凭据ID:', (credential as PublicKeyCredential).id);
+                console.log('凭据类型:', (credential as PublicKeyCredential).type);
+
+                // Prepare response for verification - convert to expected format
+                const cred = credential as PublicKeyCredential;
+                const response = {
+                  id: cred.id,  // 保持为base64url字符串
+                  rawId: uint8ArrayToBase64Url(new Uint8Array(cred.rawId)),  // 转换为base64url字符串
+                  response: {
+                    attestationObject: uint8ArrayToBase64Url(new Uint8Array((cred.response as AuthenticatorAttestationResponse).attestationObject)),  // 转换为base64url字符串
+                    clientDataJSON: uint8ArrayToBase64Url(new Uint8Array(cred.response.clientDataJSON)),  // 转换为base64url字符串
+                    transports: (cred.response as AuthenticatorAttestationResponse).getTransports?.() || [],
+                  },
+                  type: cred.type,
+                };
+
+                console.log('准备验证响应:', response);
+
+                try {
+                  // Verify registration
+                  const result = await WebUIManager.verifyPasskeyRegistration(response);
+
+                  if (result.verified) {
+                    toast.success('Passkey注册成功！现在您可以使用Passkey自动登录');
+                    setRegistrationOptions(null); // 清除已使用的选项
+                  } else {
+                    throw new Error('Passkey registration failed');
+                  }
+                } catch (verifyError) {
+                  console.error('❌ 验证失败:', verifyError);
+                  const err = verifyError as Error;
+                  toast.error(`Passkey验证失败: ${err.message}`);
+                }
+              }).catch((error) => {
+                console.error('❌ 注册失败:', error);
+                const err = error as Error;
+                console.error('错误名称:', err.name);
+                console.error('错误信息:', err.message);
+
+                // Provide more specific error messages
+                if (err.name === 'NotAllowedError') {
+                  toast.error('Passkey注册被拒绝。请确保您允许了生物识别认证权限。');
+                } else if (err.name === 'NotSupportedError') {
+                  toast.error('您的浏览器不支持Passkey功能。');
+                } else if (err.name === 'SecurityError') {
+                  toast.error('安全错误：请确保使用HTTPS或localhost环境。');
+                } else {
+                  toast.error(`Passkey注册失败: ${err.message}`);
+                }
+              });
+            }}
+            disabled={!registrationOptions}
+            className='w-fit'
+          >
+            🔐 注册Passkey
+          </Button>
+        </div>
+        {registrationOptions && (
+          <div className='text-xs text-green-600'>
+            ✅ 注册选项已准备就绪，可以开始注册
+          </div>
+        )}
+      </div>
       <SaveButtons
         onSubmit={onSubmit}
         reset={reset}

packages/napcat-webui-frontend/src/pages/web_login.tsx

@@ -24,7 +24,78 @@ export default function WebLoginPage () {
   const navigate = useNavigate();
   const [tokenValue, setTokenValue] = useState<string>(token || '');
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isPasskeyLoading, setIsPasskeyLoading] = useState<boolean>(true); // 初始为true，表示正在检查passkey
   const [, setLocalToken] = useLocalStorage<string>(key.token, '');
+
+  // Helper function to decode base64url
+  function base64UrlToUint8Array (base64Url: string): Uint8Array {
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+  }
+
+  // Helper function to encode Uint8Array to base64url
+  function uint8ArrayToBase64Url (uint8Array: Uint8Array): string {
+    const base64 = btoa(String.fromCharCode(...uint8Array));
+    return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+  }
+
+  // 自动检查并尝试passkey登录
+  const tryPasskeyLogin = async () => {
+    try {
+      // 检查是否有passkey
+      const options = await WebUIManager.generatePasskeyAuthenticationOptions();
+
+      // 如果有passkey，自动进行认证
+      const credential = await navigator.credentials.get({
+        publicKey: {
+          challenge: base64UrlToUint8Array(options.challenge) as BufferSource,
+          allowCredentials: options.allowCredentials?.map((cred: any) => ({
+            id: base64UrlToUint8Array(cred.id) as BufferSource,
+            type: cred.type,
+            transports: cred.transports,
+          })),
+          userVerification: options.userVerification,
+        },
+      }) as PublicKeyCredential;
+
+      if (!credential) {
+        throw new Error('Passkey authentication cancelled');
+      }
+
+      // 准备响应进行验证 - 转换为base64url字符串格式
+      const authResponse = credential.response as AuthenticatorAssertionResponse;
+      const response = {
+        id: credential.id,
+        rawId: uint8ArrayToBase64Url(new Uint8Array(credential.rawId)),
+        response: {
+          authenticatorData: uint8ArrayToBase64Url(new Uint8Array(authResponse.authenticatorData)),
+          clientDataJSON: uint8ArrayToBase64Url(new Uint8Array(authResponse.clientDataJSON)),
+          signature: uint8ArrayToBase64Url(new Uint8Array(authResponse.signature)),
+          userHandle: authResponse.userHandle ? uint8ArrayToBase64Url(new Uint8Array(authResponse.userHandle)) : null,
+        },
+        type: credential.type,
+      };
+
+      // 验证认证
+      const data = await WebUIManager.verifyPasskeyAuthentication(response);
+
+      if (data && data.Credential) {
+        setLocalToken(data.Credential);
+        navigate('/qq_login', { replace: true });
+        return true; // 登录成功
+      }
+    } catch (error) {
+      // passkey登录失败，继续显示token登录界面
+      console.log('Passkey login failed or not available:', error);
+    }
+    return false; // 登录失败
+  };
+
   const onSubmit = async () => {
     if (!tokenValue) {
       toast.error('请输入token');
@@ -48,7 +119,7 @@ export default function WebLoginPage () {
 
   // 处理全局键盘事件
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter' && !isLoading) {
+    if (e.key === 'Enter' && !isLoading && !isPasskeyLoading) {
       onSubmit();
     }
   };
@@ -60,12 +131,19 @@ export default function WebLoginPage () {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [tokenValue, isLoading]); // 依赖项包含用于登录的状态
+  }, [tokenValue, isLoading, isPasskeyLoading]); // 依赖项包含用于登录的状态
 
   useEffect(() => {
+    // 如果URL中有token，直接登录
     if (token) {
       onSubmit();
+      return;
     }
+
+    // 否则尝试passkey自动登录
+    tryPasskeyLogin().finally(() => {
+      setIsPasskeyLoading(false);
+    });
   }, []);
 
   return (
@@ -92,6 +170,11 @@ export default function WebLoginPage () {
             </CardHeader>
 
             <CardBody className='flex gap-5 py-5 px-5 md:px-10'>
+              {isPasskeyLoading && (
+                <div className='text-center text-small text-default-600 dark:text-default-400 px-2'>
+                  🔐 正在检查Passkey...
+                </div>
+              )}
               <form
                 onSubmit={(e) => {
                   e.preventDefault();
@@ -135,7 +218,7 @@ export default function WebLoginPage () {
                       '!cursor-text',
                     ],
                   }}
-                  isDisabled={isLoading}
+                  isDisabled={isLoading || isPasskeyLoading}
                   label='Token'
                   placeholder='请输入token'
                   radius='lg'