スキルOfficialsecurity

🔐auth0-vue

プラグイン: auth0
ライセンス: Apache-2.0
ソース: GitHub で見る ↗

説明

次のような場合に使用: Auth0 のログイン・ログアウト機能、保護されたルート、またはユーザーセッションを Vue 3 の SPA に追加するとき。 `@auth0/auth0-vue` を統合します。ユーザーが SDK 名を明示せず「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.

ユースケース

✓Vue 3のSPAにログイン機能を追加するとき
✓ログアウト機能を実装するとき
✓保護されたルートを設定するとき
✓ユーザーセッション管理が必要なとき

本文（日本語訳）

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+ が必要です。レガシーの @auth0/auth0-spa-js ラッパーを使用してください
埋め込みログイン — この SDK は Auth0 Universal Login（リダイレクトベース）を使用します
バックエンド API 認証 — 代わりに express-openid-connect または JWT バリデーションを使用してください

クイックスタート手順

1. SDK のインストール

npm install @auth0/auth0-vue

2. 環境設定

Auth0 CLI を使った自動セットアップ については、完全なスクリプトが記載されたセットアップガイドを参照してください。

手動でセットアップする場合:

.env ファイルを作成します:

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

3. Auth0 Plugin の設定

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. 認証 UI の追加

ログインコンポーネントを作成します:

<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. 認証のテスト

開発サーバーを起動して、ログインフローを確認します:

npm run dev

詳細ドキュメント

セットアップガイド — 自動セットアップスクリプト（Bash/PowerShell）、CLI コマンド、手動設定
インテグレーションガイド — 保護されたルート、API コール、エラーハンドリング、Composable
API リファレンス — SDK API の全項目、設定オプション、Composable リファレンス、テスト戦略

よくある間違い

間違い	対処法
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` Plugin の登録漏れ	アプリをマウントする前に、必ず `app.use(createAuth0({...}))` を呼び出してください
Plugin のロード前に認証情報へアクセスしている	認証に依存するコードは `v-if="!isLoading"` でラップしてください

クイックリファレンス

主要な Composable:

useAuth0() — メインの認証 Composable
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
Accessing auth before plugin loads	Wrap auth-dependent code in `v-if="!isLoading"`

Related Skills

auth0-quickstart - Basic Auth0 setup
auth0-migration - Migrate from another auth provider
auth0-mfa - Add Multi-Factor Authentication
auth0-cli - Manage Auth0 resources from the terminal

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

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。