次のような場合に使用: Vue 3 のシングルページアプリケーション（単一ファイルで動作するウェブアプリ）に Auth0 によるログイン機能、ログアウト機能、保護されたページ、またはユーザーセッション管理を追加する場合。 @auth0/auth0-vue というライブラリとの連携に対応しており、ユーザーが「Vue アプリにログイン機能を追加したい」や「Vue のページを保護したい」と述べた場合でも、SDK の名前を明示していなければこのスキルを使用します。
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.
Vue.js 3 シングルページアプリケーションに対して、@auth0/auth0-vue を使用した認証機能を追加します。
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">読み込み中...</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>
開発サーバーを起動してログイン流れをテストしてください：
npm run dev
| ミス | 解決方法 |
|---|---|
| Auth0 ダッシュボードにリダイレクト URI を追加し忘れた | Auth0 ダッシュボードの「Allowed Callback URLs（許可されたコールバック URL）」に、アプリケーション 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 nonce（一度限りの値）を取得setDpopNonce(nonce, id?) - サーバー発行の DPoP nonce を保存よくあるユースケース：
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 による自動翻訳です。