auth0-vue

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 プラグインを設定する

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 呼び出し、エラー処理、コンポーザブル
• API リファレンス - SDK API の全容、設定オプション、コンポーザブルのリファレンス、テスト方法

---

よくある間違い

間違い	修正方法
Auth0 Dashboard にリダイレクト URI を追加し忘れる	アプリケーションの URL（例：http://localhost:3000、https://app.example.com）を Auth0 Dashboard の 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-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 を保存する

よくあるユースケース：

• ログイン／ログアウトボタン → 上記のステップ 4 を参照
• ナビゲーションガードを使った保護されたルート → 統合ガイド
• トークンを使った API 呼び出し → 統合ガイド
• エラー処理 → 統合ガイド

---

参考資料

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