Nuxflare Auth: Nuxt、Cloudflare、OpenAuth.js で構築された軽量の自己ホスト型認証サーバー

Nuxflare Auth は、アプリに認証を簡単に追加できるように設計された、最新の軽量の自己ホスト型認証サーバーです。 Nuxt 3、Cloudflare Workers、OpenAuth.js で構築されており、必要なものすべてが 1 か所にバンドルされています。

ナックスフレア / 認証

Cloudflare、Nuxt、OpenAuth.js で構築された最新の軽量セルフホスト型認証サーバー。

Nuxflare 認証

Cloudflare、Nuxt、OpenAuth.js で構築された最新の軽量セルフホスト型認証サーバー。

これは何ですか?

Nuxflare Auth を使用すると、手間をかけずにアプリに認証を追加できます。これは、必要なものすべてをバンドルしたモノレポです:

• Nuxt 3 と @nuxt/ui で構築された滑らかな認証 UI
• Cloudflare Workers で実行されるバックエンド認証マジック
• すべてがどのように組み合わされるかを確認できる、すぐに使用できる例

特徴

• ?以下を含む完全な認証 UI:
  • コードベースのログイン
  • パスワードベースのログイン
  • パスワードを忘れた場合のフロー
  • ユーザー登録
• ? GitHub および Google による OAuth2 認証 (プロバイダーを簡単に追加)
• ✉️ 再送信を使用したメール (または他のプロバイダーを使用)
• ⚡ Cloudflare のエッジ ネットワークを活用した超高速

プロジェクトのレイアウト

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

前提条件

始める前に以下が必要です:

• pnpm
• Cloudflare アカウント
• Google からの OAuth 認証情報…

GitHub で表示

Nuxflare 認証を使用する理由

Nuxt には、nuxt-auth-utils やsidebase-auth などの優れた認証モジュールがすでにあります。
では、Nuxflare Auth は何が違うのでしょうか?

• 分離された認証: Nuxflare Auth を使用すると、認証サーバーと認証 UI (Nuxt UI で構築) をメイン アプリとは別にデプロイできます。 これは、認証サーバーを簡単に再利用して、複数のクライアント側アプリ (Nuxt で構築されたかどうかに関係なく)、外部 API、モバイル アプリなどを操作できることを意味します。
• Monorepo アーキテクチャを奨励します: Nuxt アプリと認証モジュールを分割することで、Nuxflare Auth はバンドル サイズを最小限に抑えます。厳しいサイズ制限がある Cloudflare ワーカーへのデプロイメントに最適です: 無料プランでは 3 MB、無料プランでは 10 MB有料プラン。

プロジェクトの構造

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

Nuxflare認証の導入

前提条件

• pnpm
• Cloudflare アカウント
• Google および GitHub からの OAuth 認証情報
• メール送信用の再送信 API キー

はじめる

1. リポジトリのクローンを作成し、依存関係をインストールします。

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

1. API トークンの作成と構成:

a.このリンクを使用して、必要な権限を持つ Cloudflare API トークンを作成します。
b. CLOUDFLARE_API_TOKEN 環境変数を設定します:

   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install

1. シークレットを設定します:

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. sst.config.ts で fromEmail を構成します。

   # OAuth stuff
   pnpm sst secret set GoogleClientID your_client_id
   pnpm sst secret set GoogleClientSecret your_client_secret
   pnpm sst secret set GithubClientID your_client_id
   pnpm sst secret set GithubClientSecret your_client_secret

   # For emails
   pnpm sst secret set ResendApiKey your_resend_api_key

1. ローカル開発を開始します:

   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }

1. 本番環境へのデプロイ:

   pnpm dev

クライアント アプリの例

リポジトリには、packages/example-client に簡単なサンプル クライアント アプリが含まれています。

コンポーザブルの API は nuxt-auth-utils に非常に似ています:

   pnpm sst deploy --stage production

クライアントがデプロイされた認証インスタンスのエンドポイントを指すようにする必要があります。

```typescript [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: "nuxt",
issuer: "https://authdemo.nuxflare.com", // <-- これをエンドポイントに置き換えます
});

export const useSession = () => {
  const sessionState = useSessionState();
  const accessToken = useAccessTokenCookie();
  const refreshToken = useRefreshTokenCookie();
  const clear = () => {
    sessionState.value = {};
    accessToken.value = null;
    refreshToken.value = null;
  };
  return {
    loggedIn: computed(() => !!sessionState.value.user),
    user: computed(() => sessionState.value.user || null),
    session: sessionState,
    clear,
  };
};



          

            
        
以上がNuxflare Auth: Nuxt、Cloudflare、OpenAuth.js で構築された軽量の自己ホスト型認証サーバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。