コンテンツへスキップ
supastack
ドキュメントを閲覧
WebNext.js

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ja/docs/web/setup-oauth.md (or send Accept: text/markdown).

OAuth サインインのセットアップ

Google、Apple、GitHub、Microsoft、Twitter——それぞれフラグ 1 つとクライアントのペア 1 組。

このガイドについて質問
開くアプリ

実際のアカウントを作成して確認する

認証とは、誰がアプリを使用しているかを証明することを意味します。 Postgres を起動し、最初にデータベース ガイドを使用して移行を実行してから、Web サーバーを実行したままにします。 http://localhost:3000/auth, を開き、電子メール/パスワードによるサインアップを選択し、名前、電子メール、パスワードを入力して送信します。この最初のテストでは、EMAIL_PROVIDER=local を保持します。

フローが電子メール コードを要求する場合、別のブラウザー タブで http://localhost:3000/mail-preview を開き、そのアドレスの最新メッセージを見つけて、そのコードをサインイン フォームにコピーして戻します。有効期限が切れた場合は、新しいコードをリクエストしてください。これらのメッセージはローカルの送信トレイに残ります。外部の受信箱を繰り返しチェックしても見つかりません。サインアウトしてから再度サインインし、データベースにバックアップされたアカウントが機能することを確認します。

サインアップでデータベース接続またはテーブル欠落エラーが報告された場合は、ソーシャル ログインを有効にする代わりにデータベースのセットアップを終了します。 Google、GitHub、Apple、X、および Microsoft ボタンには、独自のプロバイダー アプリケーションとコールバック設定が必要です。プロバイダー ガイドが完了した後でのみ有効にしてください。 Better Auth は出荷時のデフォルト エンジンであり、ローカル電子メール サインインに有料の認証アカウントは必要ありません。

有効なログイン方法を選ぶ

基盤にはメール/パスワード、OTP、設定可能なソーシャル認証が含まれます。Better Auth が認証とセッションを所有し、アプリケーションがプロバイダー設定と OTP のトランザクショナル配信を組み立てます。

設定したソーシャルプロバイダーのみを有効にしてください。プロバイダーのクライアントシークレットと認証シークレットはサーバーに留まります。

認証をワークスペースに接続する

認証済みハンドラーはワークスペースレコードに触れる前にセッション状態を解決します。ワークスペースプロビジョニングは冪等でなければならず、ライフサイクルフックを繰り返しても所有レコードが二重に作られないようにします。

セッション動作を検証する

ログイン、無効または期限切れの OTP、一回限りの消費、ログアウト、拒否された匿名アクセスをテストします。メモリアダプターテストはハンドラー意味論をカバーします。本番データベース永続化と実プロバイダーコールバックは別の受け入れが必要です。

インストールとセットアップ

1. AUTH_SECRET を 32 文字以上のランダムな文字列に設定します——openssl rand -hex 32 が使えます。

2. 各プロバイダーの開発者コンソールで OAuth アプリを作成し、コールバック URL を登録します:Better Auth(デフォルトの AUTH_PROVIDER)では {APP_URL}/api/auth/callback/<provider>。プロバイダーがコールバックを 1 つしか許可しない場合はローカルと本番で別のアプリを使います——docs/github-auth-setup.md が GitHub の流れを端から端まで案内します。

3. プロバイダーのフラグを有効にし、クライアントのペアを設定します——AUTH_GOOGLE_ENABLED と GOOGLE_CLIENT_ID・GOOGLE_CLIENT_SECRET、Apple・GitHub・Microsoft・Twitter も同じ 3 つ組です。認証情報なしでフラグを有効にすると起動が失敗し、不足している変数が名指しされます。

4. Microsoft だけはエンジンでコールバックが異なります:Better Auth では /api/auth/callback/microsoft、Auth.js では /api/auth/callback/microsoft-entra-id。

AUTH_SECRET=<at-least-32-random-characters>
AUTH_PASSKEY_ENABLED=true
EARLY_ACCESS_INVITE_ONLY=false

AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=…
GOOGLE_CLIENT_SECRET=…

AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=…
GITHUB_CLIENT_SECRET=…

# AUTH_APPLE_ENABLED / AUTH_MICROSOFT_ENABLED / AUTH_TWITTER_ENABLED
# follow the same pattern:
# MICROSOFT_CLIENT_ID=…  MICROSOFT_CLIENT_SECRET=…
# TWITTER_CLIENT_ID=…    TWITTER_CLIENT_SECRET=…

# Workspace connected accounts (Settings → Connections):
# CONNECTED_X_CLIENT_ID=          CONNECTED_X_CLIENT_SECRET=
# CONNECTED_GOOGLE_CLIENT_ID=     CONNECTED_GOOGLE_CLIENT_SECRET=
# CONNECTED_MICROSOFT_CLIENT_ID=  CONNECTED_MICROSOFT_CLIENT_SECRET=

# Callbacks to register (Better Auth):
#   {APP_URL}/api/auth/callback/google
#   {APP_URL}/api/auth/callback/apple
#   {APP_URL}/api/auth/callback/github
#   {APP_URL}/api/auth/callback/twitter
#   {APP_URL}/api/auth/callback/microsoft   (Auth.js: microsoft-entra-id)

実装ワークフロー

ワークスペースの外部アカウントは別のサーフェスです:CONNECTED_X_*、CONNECTED_GOOGLE_*、CONNECTED_MICROSOFT_* の各ペアは 設定 → 接続 に供給し、そのコールバックは {APP_URL}/api/accounts/{x|google|microsoft}/callback 配下にあります。クライアント ID が空ならそのプロバイダーの連携フローは無効のままです——サインインアプリの認証情報をそこで再利用しないでください。

プロバイダーのクライアントシークレットは AUTH_SECRET と同様にサーバー専用です——NEXT_PUBLIC_ や EXPO_PUBLIC_ 変数には絶対に入れないでください。

サインインは動きましたか?「AI のセットアップ」に進みます。

検証とトラブルシューティング

初回サインイン、再訪セッション、キャンセルされた同意画面、無効化されたプロバイダーをテストします。よくある失敗はコールバックの不一致です——登録された URL は APP_URL とエンジンのコールバック ID に正確に一致しなければならず、env 変更後はアプリの再起動が必要です。

設定を続けるには、AI のセットアップをご覧ください。

よくある質問

14 件の質問

supastack とは何ですか?

supastack は AI SaaS 製品を構築するためのモジュラー基盤です。共通インフラをまとめて提供するので、製品固有の機能に集中できます。

Web とモバイルに対応していますか?

はい。supastack には Web とモバイル体験の出発点として Next.js アプリと Expo アプリが含まれています。

どの認証が含まれていますか?

Better Auth がメール/パスワード、OTP、ソーシャルログインをカバーします。個人ワークスペースはアカウントと一緒にプロビジョニングされ、初日からレコードが境界内に収まります。

AI はどうサポートされていますか?

supastack には設定可能なマルチプロバイダー AI、使用量追跡、予算、暗号化された自前キー(BYOK)サポートが含まれています。

サブスクリプションはどう管理されますか?

このキット上に構築された製品では、Stripe 課金・サブスクリプション・権限が有料アクセスの基盤になります。プロバイダーの秘密はサーバー側に留まります。

製品固有のコードはどこに置きますか?

製品固有の機能は別のコードベースに置き、製品側が supastack の基本モジュールを設定・統合します。

supastack の価格は?

キットは生涯アップデート付きの一回払いです:単一フレームワーク 249 ドル(期間限定のローンチ価格 — 通常価格 349 ドルから 100 ドル割引)、または全フレームワーク(Next.js・iOS・Android)499 ドル(期間限定のローンチ価格 — 通常価格 599 ドルから 100 ドル割引)、追加開発者シート 1 席 75 ドル。キットのサブスクリプションはありません。このサイトのチェックアウトはライセンスキーをメールで配信し、GitHub 招待でリポジトリアクセスを提供します。

ワークスペースはどうデータを囲いますか?

ユーザーレコードは workspaceId でスコープされます。認証、権限、AI 使用量、課金イベント、監査エントリは個人ワークスペースの境界内に留まります。

バックグラウンドジョブはどう機能しますか?

Trigger.dev が明示的なジョブランタイムです。JobRunner コントラクトは enqueue・status・cancel のみを約束し、ワークフロー意味論は Trigger.dev 固有で明示的です。

メールとアウトリーチの違いは?

トランザクションメールはタスク完了通知などの製品ワークフローをカバーします。コールドアウトリーチやキャンペーンは製品自身に属し、このキットのメールモジュールの外です。

モバイルの購入はどのように機能しますか?

モバイルでは RevenueCat によるネイティブ購入と復元に対応し、アクセス権をサーバーで検証します。公開前にストアアカウントを設定し、実機テストを完了してください。Web 課金は別に管理します。

AI プロバイダーのキーはどこにありますか?

BYOK 認証情報は暗号化され、サーバー側に留まります。キーはログでサニタイズされ、使用量と予算はワークスペースレベルで可視です。

チェックアウトで使える支払い方法は?

Stripe ホストのチェックアウトはカードを受け付け、Stripe アカウントでウォレットを有効にすれば Alipay と WeChat Pay も提供できます——中国の購入者に便利です。ウォレット認可は非同期で確定するため、決済完了と同時にライセンスページが更新されます。

返金を受けることはできますか?

リポジトリへのアクセス権を取得した後は、supastack は永久にあなたのものとなるため、返金はできません。ですがご安心ください。生涯アップデートを含む完全なソースコードを入手し、ご自身やクライアントのために無制限にプロダクトを構築・公開できます。コードの転売や、リポジトリをスターターキットやテンプレートとして再配布することのみ禁止されています。

JA
テーマ