GoogleやGitHubでソーシャルログインを追加する

このレッスンでは、あなたのアプリに「Googleでログイン」や「GitHubでログイン」ボタンを追加します。ソーシャルログイン（＝他のサービスのアカウントを使ってログインできる仕組み）を入れると、ユーザーはメールアドレスとパスワードを新しく覚える必要がなくなり、登録のハードルがぐっと下がります。

ホテルのチェックインで、身分証を1枚見せるだけで部屋の鍵をもらえるのに似ています。Googleが「この人は本人です」と保証してくれるので、あなたのアプリは複雑な本人確認をしなくて済みます。

所要時間は約15分です。

• Supabase（＝データベースとログインの仕組みを用意してくれるサービス）のプロジェクトが既にある
• メールアドレスとパスワードでのログインが動いている
• あなたのアプリをエディタ（Cursor や VS Code）で開いている

今回は Google と GitHub のどちらか、または両方を追加します。初めてなら Google だけでも十分です。

• 良い例: 一般向けのサービス → Google
• 良い例: 開発者向けツール → GitHub
• 悪い例: 最初から5種類全部つなごうとする（設定が大変で挫折しがち）

1. Supabaseのダッシュボード（管理画面）を開きます
2. 左メニューの「Authentication（認証）」→「Providers（ログイン方法）」を選びます
3. 使いたいサービス（Google または GitHub）の行を開き、トグルをオンにします

この時点では「Client ID」と「Client Secret」の入力欄が空のままで大丈夫です。次のステップで取得します。

GoogleやGitHub側での設定は、画面の文言が時々変わります。最新の手順はAIに聞くのが早いです。ChatGPT や Cursor のチャットに、次のようなプロンプト（＝AIへの指示文）を貼り付けてみてください。

「Supabase Authで Google ログインを有効にしたいです。Google Cloud Console で OAuth クライアント ID を作る手順を、画面のどこをクリックするかまで含めて、非エンジニア向けに日本語で順番に教えてください。リダイレクトURL（戻り先のアドレス）は https://<あなたのプロジェクト>.supabase.co/auth/v1/callback です。」

• 良い例: 自分のSupabaseプロジェクトのリダイレクトURLを渡す（AIが正しい値を提案できる）
• 悪い例: 「ログイン作って」と丸投げする（何を作るか決まらず空回りする）

取得した Client ID と Client Secret を、先ほどのSupabase管理画面の入力欄に貼り付けて保存します。

エディタで、ログイン画面のコンポーネント（＝画面の部品）を開き、AIに次のように頼みます。

「この画面に『Googleでログイン』ボタンを追加してください。Supabase JSクライアントの signInWithOAuth を使い、成功後は /dashboard に戻るようにしてください。既存のメールログイン部分は壊さないでください。」

AIが提案したコードの差分をざっと眺め、「ボタンを追加」「クリック時にログイン関数を呼ぶ」だけになっているか確認してから適用します。長大な書き換えが提案されたら、一度「変更は最小限にして」と返すのがコツです。

1. ローカルでアプリを起動する次の1行を実行します（＝あなたのパソコン上でアプリを動かす）

pnpm dev

1. ブラウザで http://localhost:3000 を開き、追加した「Googleでログイン」ボタンを押します
2. Googleのログイン画面が出たらアカウントを選び、元のアプリに戻ってきて、ログイン済みの画面が表示されれば成功です
3. Supabase管理画面の「Authentication」→「Users（ユーザー一覧）」に、いま使ったGoogleアカウントのメールが追加されているか確認します
4. 成功画面のスクリーンショットを1枚撮り、成果物として保存します

• 「redirect_uri_mismatch」というエラーが出る: GoogleやGitHub側に登録したリダイレクトURLと、Supabaseが実際に使うURLがズレています。両方を見比べて、末尾のスラッシュや http/https の違いまで揃えてください
• ボタンを押しても何も起きない: ブラウザの開発者ツール（右クリック→検証→Console）を開き、赤いエラー文をそのままAIに貼って「このエラーの原因と直し方を教えて」と聞くのが最短です
• ログイン後にユーザー情報が取れない: Supabase管理画面の「Providers」でトグルがオンになっているか、Client IDとSecretが正しく保存されているかをもう一度確認します
• 本番公開時に動かなくなる: 本番のドメイン（例: https://your-app.vercel.app）も、GoogleやGitHub側の許可リストとSupabaseの「Site URL」に追加する必要があります

• Googleまたは GitHub のボタンが表示されたログイン画面
• 実際にそのボタンでログインできた状態のスクリーンショット1枚
• Supabaseのユーザー一覧に該当ユーザーが登録されていること

ここまでできれば、あなたのアプリは「他サービスのアカウントで入れるアプリ」に一歩進化しました。