次のような場合に使用： Vue 3のシングルページアプリケーション（複数の遷移画面を持つアプリ）に Auth0（多機能な認証サービス）によるログイン・ログアウト機能、保護されたページ、またはユーザーセッション（利用中の一時的な状態管理）を追加する場合。 @auth0/auth0-vue（Auth0公式のVue用ツール）と連携します。ユーザーが「Vueアプリにログイン機能を追加したい」や「Vueのページを保護したい」と述べた場合、具体的なツール名を明示していなくても、このスキルを活用してください。
Use when adding Auth0 login, logout, protected routes, or user sessions to a Vue 3 SPA. Integrates @auth0/auth0-vue — use even if the user says "add login to my Vue app" or "protect my Vue routes" without naming the SDK.
@auth0/auth0-vue を使用して、Vue.js 3 のシングルページアプリケーション（単一のHTMLページで機能する Web アプリ）に認証機能を追加します。
auth0-quickstart スキルを使用してくださいnpm install @auth0/auth0-vue
Auth0 CLI で自動セットアップする場合、セットアップガイド で完全なスクリプトをご覧ください。
手動で設定する場合:
.env ファイルを作成:
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
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');
ログインコンポーネント（画面部品）を作成:
<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>
開発用サーバーを起動して、ログインフローをテストします:
npm run dev
| 間違い | 解決方法 |
|---|---|
| Auth0 ダッシュボードにリダイレクト URI を追加し忘れた | Auth0 ダッシュボードの「Allowed Callback URLs」に、アプリケーション URL（例：http://localhost:3000, https://app.example.com）を追加してください |
| 間違った環境変数のプリフィックスを使用 | Vite は VITE_ プリフィックス、Vue CLI は VUE_APP_ を使用します |
| 読み込み状態を処理していない | 認証に関連した UI をレンダリングする前に、必ず isLoading をチェックしてください |
| トークンを localStorage（ブラウザのデータ保存領域）に保存している | トークンを手動で保存しないでください。SDK が安全に自動管理します |
| createAuth0 プラグイン登録を忘れた | アプリをマウントする前に、app.use(createAuth0({...})) を呼び出す必要があります |
| プラグインロード前に認証情報にアクセス | 認証に依存するコードを v-if="!isLoading" でラップしてください |
auth0-quickstart - Auth0 基本セットアップauth0-migration - 別の認証プロバイダーから移行auth0-mfa - 多要素認証を追加auth0-dpop - DPoP（デバイスバインドトークン）を追加auth0-cli - ターミナルから Auth0 リソースを管理主なコンポーザブル:
useAuth0() - メイン認証コンポーザブルisAuthenticated - ユーザーがログイン済みかどうかを反応的にチェックuser - ユーザープロフィール情報を反応的に取得loginWithRedirect() - ログイン開始logout() - ユーザーをログアウトgetAccessTokenSilently() - API 呼び出し用のアクセストークンを取得DPoP コンポーザブル（createAuth0 設定で useDpop: true が必須 — auth0-dpop を参照）:
createFetcher(config) - DPoP 対応の fetch 互換関数を返すgenerateDpopProof(params) - DPoP 証明 JWT を手動生成getDpopNonce(id?) - 現在保存されている DPoP ノンス（一度限りの値）を取得setDpopNonce(nonce, id?) - サーバーから発行された DPoP ノンスを保存よくあるユースケース:
Add authentication to Vue.js 3 single-page applications using @auth0/auth0-vue.
auth0-quickstart skill firstnpm install @auth0/auth0-vue
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
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');
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>
Start your dev server and test the login flow:
npm run dev
| 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-quickstart - Basic Auth0 setupauth0-migration - Migrate from another auth providerauth0-mfa - Add Multi-Factor Authenticationauth0-dpop - Add DPoP device-bound token bindingauth0-cli - Manage Auth0 resources from the terminalCore Composables:
useAuth0() - Main authentication composableisAuthenticated - Reactive check if user is logged inuser - Reactive user profile informationloginWithRedirect() - Initiate loginlogout() - Log out usergetAccessTokenSilently() - Get access token for API callsDPoP Composables (requires useDpop: true in createAuth0 config — see auth0-dpop):
createFetcher(config) - Returns a DPoP-aware fetch-compatible functiongenerateDpopProof(params) - Manually generate a DPoP proof JWTgetDpopNonce(id?) - Get the current stored DPoP noncesetDpopNonce(nonce, id?) - Store a server-issued DPoP nonceCommon Use Cases:
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。