auth0-vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Auth0 Vue.js Integration

Auth0 Vue.js 集成

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

为Vue.js 3单页应用添加认证功能，使用@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

Vue 3+ 应用（Vite或Vue CLI构建）
已配置的Auth0账户和应用
若尚未设置Auth0，请先使用
```
auth0-quickstart
```
技能

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

服务端渲染的Vue应用 - 请查看Auth0 Nuxt.js 指南了解SSR模式
Vue 2 应用 - 该SDK要求Vue 3+，请使用旧版@auth0/auth0-spa-js封装
嵌入式登录 - 该SDK使用Auth0通用登录（基于重定向）
后端API认证 - 请改用express-openid-connect或JWT验证

Quick Start Workflow

快速开始流程

1. Install SDK

1. 安装SDK

bash

npm install @auth0/auth0-vue

bash

npm install @auth0/auth0-vue

2. Configure Environment

2. 配置环境

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

For manual setup:

Create

.env

file:

bash

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

使用Auth0 CLI自动设置，请查看设置指南获取完整脚本。

手动设置：

创建

.env

文件：

bash

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

3. Configure Auth0 Plugin

3. 配置Auth0插件

Update

src/main.ts

typescript

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');

更新

src/main.ts

：

typescript

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

4. 添加认证UI

Create a login component:

vue

<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>

创建登录组件：

vue

<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. Test Authentication

5. 测试认证

Start your dev server and test the login flow:

bash

npm run dev

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

bash

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

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

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
Accessing auth before plugin loads	Wrap auth-dependent code in `v-if="!isLoading"`

错误	修复方案
忘记在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"` 中

Related Skills

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

核心组合式函数：

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

常见使用场景：

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

auth0-vue

Original

Translation

Auth0 Vue.js Integration

Auth0 Vue.js 集成

Prerequisites

前提条件

When NOT to Use

不适用于以下场景

Quick Start Workflow

快速开始流程

1. Install SDK

1. 安装SDK

2. Configure Environment

2. 配置环境

3. Configure Auth0 Plugin

3. 配置Auth0插件

4. Add Authentication UI

4. 添加认证UI

5. Test Authentication

5. 测试认证

Detailed Documentation

详细文档

Common Mistakes

常见错误

Related Skills

相关技能

Quick Reference

快速参考

References

参考链接