Auth0 Vue.js 集成指南：为Vue 3单页应用快速添加安全身份验证

auth0-vue by auth0/agent-skills

130 周安装量

13 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/auth0/agent-skills --skill auth0-vue

Vue JavaScript 框架安全

🇨🇳中文介绍

Auth0 Vue.js 集成

使用 @auth0/auth0-vue 为 Vue.js 3 单页应用程序添加身份验证。

先决条件

Vue 3+ 应用程序（Vite 或 Vue CLI）
已配置的 Auth0 账户和应用程序
如果尚未设置 Auth0，请先使用 auth0-quickstart 技能

何时不应使用

服务端渲染的 Vue 应用 - 对于 SSR 模式，请参阅 Auth0 Nuxt.js 指南
Vue 2 应用程序 - 此 SDK 需要 Vue 3+，对于 Vue 2 请使用旧的 @auth0/auth0-spa-js 包装器
嵌入式登录 - 此 SDK 使用 Auth0 通用登录（基于重定向）
后端 API 身份验证 - 请改用 express-openid-connect 或 JWT 验证

快速入门工作流

1. 安装 SDK

npm install @auth0/auth0-vue

2. 配置环境

要使用 Auth0 CLI 进行自动设置，请参阅设置指南获取完整脚本。

手动设置：

创建文件：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 配置 Auth0 插件

更新 src/main.ts：

import { createApp } from 'vue';
import { createAuth0 } from '@auth0/auth0-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  })
);

app.mount('#app');

4. 添加身份验证界面

创建一个登录组件：

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';

const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();
</script>

<template>
  <div>
    <div v-if="isLoading">加载中...</div>

    <div v-else-if="isAuthenticated">
      <img :src="user?.picture" :alt="user?.name" />
      <span>欢迎，{{ user?.name }}</span>
      <button @click="logout({ logoutParams: { returnTo: window.location.origin }})">
        登出
      </button>
    </div>

    <button v-else @click="loginWithRedirect()">
      登录
    </button>
  </div>
</template>

5. 测试身份验证

启动开发服务器并测试登录流程：

设置指南 - 自动化设置脚本（Bash/PowerShell）、CLI 命令、手动配置
集成指南 - 受保护路由、API 调用、错误处理、组合式函数
API 参考 - 完整的 SDK API、配置选项、组合式函数参考、测试策略

错误	修复方法
忘记在 Auth0 仪表板中添加重定向 URI	将您的应用程序 URL（例如 `http://localhost:3000`、`https://app.example.com`）添加到 Auth0 仪表板的“允许的回调 URL”中
使用了错误的环境变量前缀	Vite 需要 `VITE_` 前缀，Vue CLI 使用 `VUE_APP_`
未处理加载状态	在渲染依赖于身份验证的 UI 之前，始终检查 `isLoading`
将令牌存储在 localStorage 中	切勿手动存储令牌 - SDK 会自动处理安全存储
缺少 createAuth0 插件注册	必须在挂载应用之前调用 `app.use(createAuth0({...}))`
在插件加载之前访问身份验证	将依赖于身份验证的代码包装在 `v-if="!isLoading"` 中

auth0-quickstart - 基础 Auth0 设置
auth0-migration - 从其他身份验证提供商迁移
auth0-mfa - 添加多因素身份验证

核心组合式函数：

useAuth0() - 主要的身份验证组合式函数
isAuthenticated - 反应式检查用户是否已登录
user - 反应式用户资料信息
loginWithRedirect() - 发起登录
logout() - 用户登出
getAccessTokenSilently() - 获取用于 API 调用的访问令牌

登录/登出按钮 → 参见上文第 4 步
带有导航守卫的受保护路由 → 集成指南
使用令牌进行 API 调用 → 集成指南
错误处理 → 集成指南

🇺🇸English

Auth0 Vue.js Integration

Add authentication to Vue.js 3 single-page applications using @auth0/auth0-vue.

Prerequisites

Vue 3+ application (Vite or Vue CLI)
Auth0 account and application configured
If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

Server-side rendered Vue apps - See Auth0 Nuxt.js guide for SSR patterns
Vue 2 applications - This SDK requires Vue 3+, use legacy @auth0/auth0-spa-js wrapper
Embedded login - This SDK uses Auth0 Universal Login (redirect-based)
Backend API authentication - Use express-openid-connect or JWT validation instead

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-vue

2. Configure Environment

For automated setup with Auth0 CLI , see Setup Guide for complete scripts.

For manual setup:

Create .env file:

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id

3. Configure Auth0 Plugin

Update src/main.ts:

import { createApp } from 'vue';
import { createAuth0 } from '@auth0/auth0-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    authorizationParams: {
      redirect_uri: window.location.origin
    }
  })
);

app.mount('#app');

4. Add Authentication UI

Create a login component:

<script setup lang="ts">
import { useAuth0 } from '@auth0/auth0-vue';

const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();
</script>

<template>
  <div>
    <div v-if="isLoading">Loading...</div>

    <div v-else-if="isAuthenticated">
      <img :src="user?.picture" :alt="user?.name" />
      <span>Welcome, {{ user?.name }}</span>
      <button @click="logout({ logoutParams: { returnTo: window.location.origin }})">
        Logout
      </button>
    </div>

    <button v-else @click="loginWithRedirect()">
      Login
    </button>
  </div>
</template>

5. Test Authentication

Start your dev server and test the login flow:

npm run dev

Detailed Documentation

Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
Integration Guide - Protected routes, API calls, error handling, composables
API Reference - Complete SDK API, configuration options, composables reference, testing strategies

Common Mistakes

Mistake	Fix
Forgot to add redirect URI in Auth0 Dashboard	Add your application URL (e.g., `http://localhost:3000`, `https://app.example.com`) to Allowed Callback URLs in Auth0 Dashboard
Using wrong env var prefix	Vite requires `VITE_` prefix, Vue CLI uses `VUE_APP_`
Not handling loading state	Always check `isLoading` before rendering auth-dependent UI
Storing tokens in localStorage	Never manually store tokens - SDK handles secure storage automatically
Missing createAuth0 plugin registration	Must call `app.use(createAuth0({...}))` before mounting app

Related Skills

auth0-quickstart - Basic Auth0 setup
auth0-migration - Migrate from another auth provider
auth0-mfa - Add Multi-Factor Authentication

Quick Reference

Core Composables:

useAuth0() - Main authentication composable
isAuthenticated - Reactive check if user is logged in
user - Reactive user profile information
loginWithRedirect() - Initiate login
logout() - Log out user
getAccessTokenSilently() - Get access token for API calls

Common Use Cases:

Login/Logout buttons → See Step 4 above
Protected routes with navigation guards → Integration Guide
API calls with tokens → Integration Guide
Error handling → Integration Guide

References

Weekly Installs

Repository

auth0/agent-skills

GitHub Stars

First Seen

Feb 6, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

codex78

opencode78

gemini-cli77

github-copilot77

amp74

kimi-cli74

xdrop 文件传输脚本：Bun 环境下安全上传下载工具，支持加密分享

33,800 周安装