メインコンテンツへスキップ
このクイックスタートは現在 Beta 段階です。ぜひフィードバックをお寄せください。

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、agent skills を使うことで、数分で Auth0 認証を自動的に追加できます。インストール:
npx skills add https://github.com/auth0/agent-skills --skill auth0-nuxt
次に、AI アシスタントに次のように依頼します。
Add Auth0 authentication to my Nuxt app
AI アシスタントが、Auth0 アプリケーションの作成、認証情報の取得、@auth0/auth0-nuxt のインストール、モジュールの設定、ルートのセットアップを自動的に行います。agent skills の完全なドキュメント →
前提条件: 開始する前に、以下がインストールされていることを確認してください。
  • Node.js 20 LTS 以降
  • npm 10 以上、yarn 1.22 以上、または pnpm 8 以上
  • jq - Auth0 CLI のセットアップに必要です
Nuxt のバージョン互換性: このクイックスタートは Nuxt 3.x ではそのまま動作します。Nuxt 4.x の場合は、Nuxt 4.2 以降を使用していることを確認してください。

​
はじめに

このクイックスタートでは、Nuxt.js アプリケーションに Auth0 認証を追加する方法を紹介します。Auth0 Nuxt SDK を使用して、ログイン、ログアウト、ユーザープロファイル機能を備えた安全なシングルページアプリケーションを構築します。
1

新規プロジェクトを作成する

このクイックスタート用に新しいNuxtプロジェクトを作成する
npx nuxi@latest init auth0-nuxt-app
プロジェクトを開く
cd auth0-nuxt-app
2

Auth0 Nuxt SDKをインストールする

npm add @auth0/auth0-nuxt && npm install
3

Auth0 アプリを設定する

次に、Auth0テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。CLIコマンドを実行して自動的に行う方法と、Dashboardから手動で行う方法のいずれかを選択できます。
Auth0 アプリを作成し、.env ファイルを生成するには、プロジェクトのルートディレクトリで次のシェルコマンドを実行します。
AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env
4

Auth0 Nuxt モジュールを設定する

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@auth0/auth0-nuxt'],
  runtimeConfig: {
    auth0: {
      domain: process.env.NUXT_AUTH0_DOMAIN,
      clientId: process.env.NUXT_AUTH0_CLIENT_ID,
      clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET,
      sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET,
      appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL,
    },
  },
})
5

ログイン、ログアウト、ユーザープロファイル用のコンポーネントを作成する

ファイルを作成する
mkdir -p app/components && touch app/components/LoginButton.vue && touch app/components/LogoutButton.vue && touch app/components/UserProfile.vue
次のコードスニペットを追加してください
<template>
 <a 
    href="/auth/login" 
    class="button login"
  >
    Log In
  </a>
</template>

<style scoped>
.button {
  padding: 1.1rem 2.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}

.button:focus {
  box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
}

.button.login {
  background-color: #63b3ed;
  color: #1a1e27;
}

.button.login:hover:not(:disabled) {
  background-color: #4299e1;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
</style>
6

アプリを実行する

npm run dev
チェックポイントこれで、localhost で Auth0 のログインページが問題なく動作しているはずです