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 による自動セットアップの場合、完全なスクリプトについては Setup Guide を参照してください。

手動セットアップの場合:

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

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

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. 認証 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

---

詳細ドキュメント

• Setup Guide - 自動セットアップスクリプト (Bash/PowerShell)、CLI コマンド、手動設定
• Integration Guide - 保護されたルート、API呼び出し、エラーハンドリング、コンポーザブル
• API Reference - 完全な SDK API、設定オプション、コンポーザブルリファレンス、テスト戦略

---

よくある間違い

間違い	修正方法
Auth0 ダッシュボードにリダイレクト URI を追加し忘れた	アプリケーション URL（例: http://localhost:3000、https://app.example.com）を Auth0 ダッシュボードの Allowed Callback URLs に追加してください
間違った環境変数のプレフィックスを使用した	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-cli - ターミナルから Auth0 リソースを管理

---

クイックリファレンス

コアコンポーザブル:

• useAuth0() - メイン認証コンポーザブル
• isAuthenticated - ユーザーがログインしているかの リアクティブチェック
• user - ユーザープロフィール情報（リアクティブ）
• loginWithRedirect() - ログインを開始
• logout() - ユーザーをログアウト
• getAccessTokenSilently() - API 呼び出し用のアクセストークンを取得

一般的なユースケース:

• ログイン/ログアウトボタン → 上のステップ 4 を参照
• ナビゲーションガードを使用した保護されたルート → Integration Guide
• トークンを使用した API 呼び出し → Integration Guide
• エラーハンドリング → Integration Guide

---

リファレンス

• Auth0 Vue SDK ドキュメント
• Auth0 Vue クイックスタート
• SDK GitHub リポジトリ