メインコンテンツへスキップ
このクイックスタートは現在 ベータ版 です。ぜひフィードバックをお寄せください。
前提条件: 作業を開始する前に、次のソフトウェアがインストールされていることを確認してください。
  • 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コマンドを実行して自動的に実行するか、ダッシュボードから手動で実行するかを選択できます:
プロジェクトのルートディレクトリで次のシェルコマンドを実行して 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

Login、Logout および Profile コンポーネントを作成する

ファイルを作成する
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"
  >
    ログイン
  </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
チェックポイントこれで、正常に動作する Auth0 ログイン ページが localhost 上で稼働しているはずです。