用途
该技能面向需要在 Ionic Vue + Capacitor 应用中添加 Auth0 身份认证的场景，覆盖登录、登出以及回调所需的深链接处理，适用于 iOS 与 Android 原生移动端认证。若项目是纯 Vue SPA（无 Capacitor/Ionic）、React SPA、React Native、Expo、Ionic + React/Angular 或服务端 Next.js/Nuxt 等，文档建议改用对应的其他技能。
主要能力
- 使用 @auth0/auth0-vue 的 createAuth0 注册 Vue 插件，并通过 useAuth0() 组合式函数访问认证状态与方法。
- 通过 Capacitor Browser 插件在系统浏览器中打开 Auth0 Universal Login（WebAuth），iOS 使用 SFSafariViewController，Android 使用 Chrome Custom Tabs。
- 使用 Capacitor App 插件的 appUrlOpen 监听器捕获自定义协议深链接，并由 handleRedirectCallback(url) 处理授权码交换。
- 提供登录 loginWithRedirect、登出 logout、getAccessTokenSilently、createAuthGuard 等 API 的快速参考。
使用方式
前置条件包括 Node.js 18+、Ionic CLI、已配置 Capacitor 的 Ionic Vue 应用、Auth0 账户与租户；iOS 需要 Xcode 14+ 与 CocoaPods，Android 需要 Android Studio 且 API level 21+，并可用 Auth0 CLI 做自动化配置。
安装依赖： npm install @auth0/auth0-vue @capacitor/browser @capacitor/app npx cap sync
在 src/main.ts 中注册插件，域与客户端 ID 通过 import.meta.env 的 VITE_AUTH0_DOMAIN、VITE_AUTH0_CLIENT_ID 读取，回调地址采用 ${packageId}://${VITE_AUTH0_DOMAIN}/capacitor/${packageId}/callback，并设置 useRefreshTokens: true、useRefreshTokensFallback: false。登录与登出时在 openUrl 回调中调用 Browser.open({ url, windowName: "_self" })。在 App.vue 的 onMounted 中通过 CapApp.addListener('appUrlOpen', ...) 处理回调，判断 URL 含 state 及 code 或 error 后调用 handleRedirectCallback(url)，随后 Browser.close()。构建时运行 ionic build 与 npx cap sync，再用 npx cap open ios 或 npx cap open android 在对应 IDE 中构建。
适用场景与限制
该技能仅面向 Ionic Vue + Capacitor 的原生移动端认证场景，文档同时给出了不应使用本技能的情形及推荐替代技能。常见错误提示包括：Auth0 Dashboard 中应用类型必须为 Native；回调 URL 必须严格匹配指定格式；必须启用刷新令牌；必须安装 @capacitor/browser 与 @capacitor/app 并执行 npx cap sync；必须处理深链接回调；不能使用 window.location.origin 作为重定向 URI；Dashboard 需把 capacitor://localhost 与 http://localhost 加入 Allowed Origins；必须在 mount 前注册 Auth0 插件；useAuth0() 返回的是 Vue ref，在脚本中需用 .value；移动端不应把 localStorage 视为持久存储。其他具体收费、价格或效果信息暂未提供。