GitHub サインインを追加

初心者向けのウォークスルー

前提条件:ローカルで動作する Web アプリと、実アカウント用の移行済みデータベース。GitHub アカウントが必要です——リポジトリを所有しているものと同じアカウントで構いません。無料で、環境あたり約 5 分です。

用語メモ:GitHub OAuth アプリは、GitHub があなたの代わりにユーザーをサインインさせるための登録です。ほとんどのプロバイダーと異なり、1 つの OAuth アプリは Authorization callback URL(認証コールバック URL)をちょうど 1 つしか許可しません——そのためローカル(http://localhost:3000/…)と本番(https://yourdomain.com/…)にはそれぞれ独自のアプリが必要です。1 つのアプリを使い回してコールバックを行き来させると、毎回どちらか一方が壊れます。

1. アカウントの Developer settings(開発者設定)でローカル用 OAuth アプリを作成します。2. Client ID(クライアント ID)をコピーし、Client Secret(クライアントシークレット)を生成します。3. 3 つの環境変数を設定して再起動します。4. 公開前に実際のドメインでもう一度繰り返します。

• Web アプリを 5 分で公開
• データベースのセットアップ

ローカル用 OAuth アプリを作成する

1. github.com を開いてサインインします。右上のプロフィール写真をクリック → Settings(設定)。

2. 左サイドバーの一番下までスクロールし、Developer settings → OAuth Apps → New OAuth App(開発者設定 → OAuth アプリ → 新しい OAuth アプリ)を開きます。

3. Application name(アプリケーション名):supastack local のような名前——この名前が GitHub の認証ページでユーザーに表示されます。Homepage URL(ホームページ URL):http://localhost:3000。Authorization callback URL(認証コールバック URL):http://localhost:3000/api/auth/callback/github。Register application(アプリケーションを登録)をクリックします。

4. アプリのページで Client ID(クライアント ID)をコピーし、Generate a new client secret(新しいクライアントシークレットを生成)をクリックして、シークレットをすぐにコピーします——GitHub は一度しか表示しませんが、いつでも別のものを生成できます。

本番用 OAuth アプリを作成する

製品名、Homepage URL https://yourdomain.com、Authorization callback URL https://yourdomain.com/api/auth/callback/github で、同じ New OAuth App の手順を繰り返します。

各アプリの認証情報はそれぞれの環境に保管してください。ローカルアプリのペアは apps/web/.env.local に、本番アプリのペアはホストのシークレットストアに置きます。ローカルのシークレットが本番設定に入り込んではいけません。その逆も同様です。

値をアプリに追加する

ローカルアプリの認証情報を使って、apps/web/.env.local に以下の 3 行を設定します。AUTH_GITHUB_ENABLED=true がボタンを有効にし、このペアが OAuth アプリを識別します。

クライアントシークレットはサーバー専用のままです——NEXT_PUBLIC_/EXPO_PUBLIC_ 変数には入れず、コミットもしません。編集後は開発サーバーを再起動してください。

他で見かけるかもしれない GITHUB_APP_* の値は再利用しないでください——それらはユーザーサインインではなく、無関係の GitHub App 統合のものです。キットの docs/github-auth-setup.md が、このフロー全体を端から端まで案内する別の参考資料になります。

# apps/web/.env.local — from the LOCAL OAuth App
AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=your-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-oauth-app-secret

確認とトラブルシューティング

http://localhost:3000/auth を開き、GitHub ボタンをクリックします。github.com でアプリを認証し、サインイン状態で戻ってくることを確認します。

AUTH_GITHUB_ENABLED=true を設定するまで、/auth の GitHub オプションは表示されたまま無効です——env ファイルの名前を確認してから再起動してください。GITHUB_CLIENT_ID と GITHUB_CLIENT_SECRET の両方なしにフラグを設定すると起動が失敗し、不足している変数が指摘されます。

コールバックの不一致がよくある失敗です。アプリの Authorization callback URL は {APP_URL}/api/auth/callback/github と正確に一致する必要があります——プロトコル、ホスト、ポート、パスのすべて。デプロイ後の redirect_uri エラーは通常、APP_URL が本番を示しているのにリクエストがローカルアプリの認証情報に当たったか、その逆を意味します。

env を編集するたびに開発サーバーを再起動してください。値は起動時にのみ読み込まれます。

• 次にデータベースをセットアップ
• OAuth プロバイダーの概要