@sidebase/nuxt-auth

Nuxt 3用に構築された認証！ OAuthプロバイダー、クレデンシャル、またはメールマジックURLを介して認証を簡単に追加できます！

クイックスタート

npx nuxi@latest module add sidebase-auth

npm i -D @sidebase/nuxt-auth

pnpm i -D @sidebase/nuxt-auth

yarn add --dev @sidebase/nuxt-auth

export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth']
})

次に、クイックスタートドキュメントにアクセスして、アプリの構成を続行してください！

機能

@sidebase/nuxt-authは、あらゆるユニバーサルNuxt 3アプリケーションの認証をサポートすることを目的としたライブラリです。現在、3つのプロバイダーがサポートされています。

• authjs：Auth.js / NextAuth.jsを使用して、Nuxt 3エコシステムに2万3千スターのライブラリの信頼性と利便性をネイティブな開発者体験（DX）で提供したい非静的アプリ向け
• local: 認証のためのクレデンシャルフローを備えた外部バックエンドに依存する静的ページ向け。Local Providerはv0.9.0からリフレッシュトークンもサポートしています。詳細はこちらをご覧ください。

すべての機能と、各機能がサポートするプロバイダーの完全なリストは、ドキュメントで確認できます。

認証プロバイダ

• OAuth（例：Github、Google、Twitter、Azure、...）
• カスタムOAuth（自分で書く）
• 認証情報（パスワード＋ユーザー名）
• メールマジックURL

useAuth を使用したアプリケーションサイドセッション管理

• status、data、lastRefreshedAtを使用したセッション取得
• getSession、getCsrfToken、getProviders、signIn、signOutのメソッド
• すべてのメソッドとプロパティに対する完全なTypeScriptサポート

アプリケーションの保護

• アプリケーション全体または特定のページに対するアプリケーションサイドミドルウェア保護
• サーバーサイドのミドルウェアとエンドポイント保護

セッションライフサイクル管理のための高度な機能

• 事前に構築された、かつカスタマイズ可能な更新動作
  • セッションを定期的に更新する
  • タブ再フォーカス時にセッションを更新
  • ページ読み込み時に一度だけセッションを取得し、その後は特定の操作（ナビゲーションなど）で取得します。
• RefreshHandlerを使用して、アプリケーションのリフレッシュ動作を完全に設定できます。詳細はこちら

サーバーサイドユーティリティ

• getServerSessionを使用したセッションアクセス詳細はこちら
• getTokenを使用したJWTトークンアクセス詳細はこちら
• サーバーサイドのミドルウェアとエンドポイント保護

デモページ

@sidebase/nuxt-authが提供するもののプレビューをご覧になりたいですか？ nuxt-authデモページをご覧ください。 デモのソースコードもご覧ください。

開発

このプロジェクトでは、開発にpnpmを使用しています。

• pnpm dev:prepare を実行して型スタブを生成する。
• モジュールプレイグラウンドディレクトリ内でpnpm devを実行すると、開発モードでプレイグラウンドが起動します。
• eslintを実行するにはpnpm lintを実行します。
• tsc経由でタイプチェックを実行するには、pnpm typecheckを実行します。
• 発行するには pnpm publish --access public を実行してください。
• プレリリースを公開するには、pnpm publish --access public --tag next を実行します。

モジュールプレイグラウンド

このモジュールには独自のプレイグラウンドもあります。

> git clone https://github.com/sidebase/nuxt-auth

> cd nuxt-auth

> cd playground-[PROVIDER]

> pnpm i

> pnpm dev:prepare

> pnpm dev

追加のプレイグラウンドコマンド

• pnpm dev:prepare を実行して型スタブを生成する。
• プレイグラウンドを開始するには、pnpm devを実行します。
• エンドツーエンドテストを実行するには、pnpm test:e2eを実行します。
• eslintを実行するにはpnpm lintを実行します。
• tsc経由でタイプチェックを実行するには、pnpm typecheckを実行します。

様々なプロバイダのテスト

プロバイダーごとにプレイグラウンドがあります。

• authjs
• ローカル

静的なNuxt 3アプリをテストする方法は？

静的なNuxt 3アプリをテストするには、静的なフロントエンドと認証を担う別のバックエンドを実行する必要があります。

1. playground-local/nuxt.config.ts: auth設定にbaseURL: 'https://:3001'を追加してください。
2. 静的フロントエンドを起動します。

   cd playground-local
   
   pnpm generate
   
   pnpm start
   

3. 認証バックエンドを起動する（同じNuxt 3アプリの2番目のインスタンスを使用します）

   cd playground-local
   
   pnpm dev
   
   # A second Nuxt app should now be running on https://:3001.
   # We use this purely for authentication
   

4. https://:3000 にアクセスすると、静的アプリケーションが開きます。認証関連の操作を実行すると、アプリはポート3001で実行されているバックエンドにリクエストを送信するはずです。

コントリビューション

問題の記述やプルリクエストの提出を通じてこのプロジェクトに貢献してくださった皆様に感謝いたします。皆様の努力が私たちの改善と成長に役立っています。貢献にご興味のある方は、貢献ガイドラインをご覧ください。皆様のサポートと貢献をお待ちしております！

謝辞

@sidebase/nuxt-authは、素晴らしい貢献者の皆様とNuxt 3チームによって支えられています！