Nuxt.js アプリケーションにログイン機能を追加

このガイドでは、Auth0 Nuxt.js SDK を使用して、Nuxt.js を使ったシングルページアプリケーション（SPA）に Auth0 を統合し、認証を追加してユーザープロファイル情報を表示する方法を説明します。

この クイックスタート は現在 Beta 版です。ぜひフィードバックをお寄せください。

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使っている場合は、agent skills を利用して、数分で Auth0 認証を自動的に追加できます。

インストール:

npx skills add auth0/agent-skills --skill auth0

次に、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. 新しいプロジェクトを作成

   このQuickstart向けに新しい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 App をセットアップする

   次に、Auth0 テナントで新しいアプリを作成し、プロジェクトに環境変数を追加します。

   CLIコマンドを実行して Auth0 App を自動的にセットアップする方法と、Auth0 Dashboardから手動で行う方法のいずれかを選択できます。

   CLI

   Auth0 App を作成して .env ファイルを生成するには、プロジェクトのルートディレクトリで次のシェルコマンドを実行します。

   Mac

   # Auth0 CLI をインストールする（まだインストールされていない場合）
   brew tap auth0/auth0-cli && brew install auth0
   
   # Auth0 App をセットアップして .env ファイルを生成する
   auth0 qs setup --app --type regular --framework nuxt --port 3000 --name "My Nuxt App"
   

   このコマンドでは次のことが行われます。

   1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
   2. http://localhost:3000 用に設定された Auth0 Regular Web Application を作成します
   3. NUXT_AUTH0_DOMAIN、NUXT_AUTH0_CLIENT_ID、NUXT_AUTH0_CLIENT_SECRET、NUXT_AUTH0_SESSION_SECRET、NUXT_AUTH0_APP_BASE_URL を含む .env ファイルを生成します

   Auth0 Dashboard

   始める前に、プロジェクトのルートディレクトリに .env ファイルを作成してください

   .env

   NUXT_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   NUXT_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   NUXT_AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET
   NUXT_AUTH0_SESSION_SECRET=YOUR_SESSION_SECRET
   NUXT_AUTH0_APP_BASE_URL=http://localhost:3000
   

   1. Auth0 Dashboard を開きます
   2. アプリケーション > アプリケーション > Create Application をクリックします
   3. ポップアップでアプリの名前を入力し、アプリの種類として Regular Web Application を選択して、Create をクリックします
   4. アプリケーションの詳細ページで 設定 タブに切り替えます
   5. .env ファイルの値を、Auth0 Dashboard の Domain、Client ID、Client Secret の値に置き換えます
   6. openssl rand -hex 64 を実行してセッションシークレットを生成し、NUXT_AUTH0_SESSION_SECRET に使用します

   最後に、アプリケーションの詳細ページの 設定 タブで、次の URL を設定します。

   Allowed Callback URLs:

   http://localhost:3000/auth/callback
   

   許可されたログアウトURL:

   http://localhost:3000
   

   許可済みのWebオリジン：

   http://localhost:3000
   

   Allowed Callback URLs は、認証後にユーザーを安全にアプリケーションへ戻すための重要なセキュリティ対策です。一致する URL がない場合、ログインプロセスは失敗し、ユーザーはアプリにアクセスできず、代わりに Auth0 のエラーページが表示されます。

   Allowed Logout URLs は、サインアウト時にシームレスなユーザー体験を提供するうえで不可欠です。一致する URL がない場合、ユーザーはログアウト後にアプリケーションへリダイレクトされず、代わりに汎用的な Auth0 ページにとどまることになります。

   Allowed Web Origins は、サイレント認証において重要です。これがないと、ユーザーはページを更新したときや、後でアプリに戻ったときにログアウトされます。

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
   

   次のコードスニペットを追加します

   app/components/LoginButton.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 のログインページが実行されているはずです