Nuxt 3、Auth0、Railsを使用した認証システムの実装例を以下に示します。この例では、フロントエンドにNuxt 3を使用し、バックエンドにはRailsを使用します。Auth0を利用して認証を行います。

1. Rails APIのセットアップ

まず、Rails APIをセットアップし、必要なGemを追加します。

Gemfile

gem 'devise'
gem 'devise-jwt'  # JWTを使った認証

Gemをインストール

bundle install

Deviseのセットアップ

rails generate devise:install

ユーザーモデルの作成

rails generate devise User
rails db:migrate

JWT設定の追加

app/controllers/application_controller.rbに以下のコードを追加します。

class ApplicationController < ActionController::API
  include Devise::Controllers::Helpers

  before_action :authenticate_user!

  def current_user
    @current_user ||= User.find_by(id: decoded_token[:user_id]) if decoded_token
  end

  private

  def decoded_token
    # JWTをデコードするロジックを実装
    # Auth0の公開鍵を使用して検証
  end
end

2. Nuxt 3のセットアップ

次に、Nuxt 3アプリをセットアップします。

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

Auth0 SDKのインストール

npm install @auth0/auth0-vue

Auth0設定

nuxt.config.tsにAuth0の設定を追加します。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      AUTH0_DOMAIN: 'YOUR_AUTH0_DOMAIN',
      AUTH0_CLIENT_ID: 'YOUR_AUTH0_CLIENT_ID',
      AUTH0_REDIRECT_URI: 'http://localhost:3000/callback',
    },
  },
});

3. Auth0プラグインの作成

plugins/auth0.tsを作成し、Auth0の設定を行います。

import { defineNuxtPlugin } from '#app';
import { Auth0Plugin } from '@auth0/auth0-vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Auth0Plugin, {
    domain: useRuntimeConfig().public.AUTH0_DOMAIN,
    client_id: useRuntimeConfig().public.AUTH0_CLIENT_ID,
    redirect_uri: useRuntimeConfig().public.AUTH0_REDIRECT_URI,
    audience: 'YOUR_API_IDENTIFIER', // Rails APIの識別子
  });
});

4. 認証フローの実装

ログインボタンを作成

components/LoginButton.vueを作成します。

<template>
  <button @click="login">Login with Auth0</button>
</template>

<script setup>
import { useAuth0 } from '@auth0/auth0-vue';

const { loginWithRedirect } = useAuth0();

const login = () => {
  loginWithRedirect();
};
</script>

ログアウトボタンを作成

components/LogoutButton.vueを作成します。

<template>
  <button @click="logout">Logout</button>
</template>

<script setup>
import { useAuth0 } from '@auth0/auth0-vue';

const { logout } = useAuth0();

const logout = () => {
  logout({ returnTo: window.location.origin });
};
</script>

5. 認証状態の管理

pages/index.vueにログイン状態を管理するコードを追加します。

<template>
  <div>
    <LoginButton v-if="!isAuthenticated" />
    <LogoutButton v-if="isAuthenticated" />
    <h1 v-if="isAuthenticated">Welcome, {{ user.name }}</h1>
  </div>
</template>

<script setup>
import { useAuth0 } from '@auth0/auth0-vue';
import LoginButton from '@/components/LoginButton.vue';
import LogoutButton from '@/components/LogoutButton.vue';

const { isAuthenticated, user } = useAuth0();
</script>

6. コールバックページの実装

Auth0からのリダイレクトを処理するコールバックページを作成します。

pages/callback.vue

<template>
  <div>Loading...</div>
</template>

<script setup>
import { useAuth0 } from '@auth0/auth0-vue';
import { onMounted } from 'vue';

const { handleRedirectCallback } = useAuth0();

onMounted(async () => {
  await handleRedirectCallback();
  window.location.replace('/'); // リダイレクト先
});
</script>

7. CORS設定

Railsのconfig/initializers/cors.rbでCORS設定を追加します。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'  # 開発時のため、適切なオリジンに変更する
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

8. 最後に

これで、Nuxt 3、Auth0、Railsを使用した認証システムが構築されました。ユーザーはAuth0を通じて認証され、成功すればNuxtアプリでユーザー情報にアクセスできます。

この例は基本的な構成を示していますので、実際のアプリケーションに合わせて調整や拡張が必要です。特にJWTのデコード処理やエラーハンドリング、セキュリティ設定は十分に検討してください。