@sidebase/nuxt-auth

Nuxt 3向けに構築された認証！OAuthプロバイダー、Credential、またはEmail Magic 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：23kスターのライブラリの信頼性と利便性をネイティブな開発者エクスペリエンス（DX）でNuxt 3エコシステムに提供するために、Auth.js / NextAuth.jsを使用したい静的でないアプリケーション向け。
• local：認証にCredentialフローを使用する外部バックエンドに依存する静的ページ向け。Localプロバイダーはv0.9.0以降、リフレッシュトークンもサポートしています。詳細はこちらをご覧ください。

機能の完全なリストと、各機能をサポートするプロバイダーについては、ドキュメントをご覧ください。

認証プロバイダー

• OAuth（例：GitHub、Google、Twitter、Azureなど）
• カスタムOAuth（自分で作成）
• Credential（パスワード＋ユーザー名）
• Email Magic URL

アプリケーションサイドセッション管理 using 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を使用すると、開発モードでプレイグラウンドを起動できます。
• pnpm lintを実行してeslintを実行します
• pnpm typecheckを実行してtscで型チェックを実行します
• 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を実行してエンドツーエンドテストを実行します。
• pnpm lintを実行してeslintを実行します
• pnpm typecheckを実行してtscで型チェックを実行します

異なるプロバイダーのテスト

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

• authjs
• local

静的Nuxt 3アプリのテスト方法

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

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

   cd playground-local
   
   pnpm generate
   
   pnpm start
   

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

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

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

コントリビューション

課題を報告したり、プルリクエストを送信したりすることで、このプロジェクトに貢献してくれたすべての方に感謝いたします。皆様のご尽力により、私たちは改善と成長を続けていくことができます。貢献にご興味のある方は、コントリビューションガイドラインをご確認ください。皆様のサポートに感謝し、皆様からの貢献を心よりお待ちしております！

謝辞

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