nuxt3, auth0, railsで作る認証システム（サンプル・コード）

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

### 1. Rails APIのセットアップ

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

**Gemfile**

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

**Gemをインストール**

```shell
bundle install
```

**Deviseのセットアップ**

```shell
rails generate devise:install
```

**ユーザーモデルの作成**

```shell
rails generate devise User
rails db:migrate
```

**JWT設定の追加**

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

```ruby
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の設定を追加します。

```typescript
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の設定を行います。

```typescript
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`を作成します。

```javascript
<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`を作成します。

```javascript
<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のデコード処理やエラーハンドリング、セキュリティ設定は十分に検討してください。