付録B　Google認証設定手順

📖 このページのゴール：第2章で書いた 「Googleでログイン」 を、実際に動かせるようにする。Google側の設定とSupabase側の設定をつなぐところまでを、手順どおりにやれば完成します。 ← 目次・はじめにへもどる

第2章では signInWithOAuth({ provider: 'google' }) というコードを書きました。でも、コードを書くだけではログインは動きません。「あなたのアプリがGoogleにログイン確認をお願いしていい」 という許可を、先にGoogle側で作っておく必要があります。

やることは大きく3ステップです。

Google Cloud側：ログイン確認をしてもらうための「鍵」を発行する
Supabase側：その鍵をSupabaseに登録して、Googleとつなぐ
アプリ側：ボタンを押したらログインが始まるようにする

💡 Supabaseのプロジェクト自体をまだ作っていない人は、先に付録A Supabaseセットアップ手順を済ませてください。認証の考え方（OAuthって何？）は第2章にあります。

🪜 手順

【Google Cloud側】鍵を発行する

プロジェクトを用意する Google Cloud Console を開きます。画面上のプロジェクト選択から、新しいプロジェクトを作成します（すでにあるならそれを選んでOK）。
「OAuth同意画面」を設定する 左メニューから「APIとサービス」→「OAuth同意画面」へ。ここは「どんなアプリが、何のために聞いてくるのか」をユーザーに見せる画面の設定です。
- ユーザーの種類：個人開発なら「外部」を選ぶ
- アプリ名・サポートメールなどを入力
- 練習中はアプリが「テスト」状態のままです。この状態では登録したテストユーザーしかログインできないので、自分のGoogleアドレスをテストユーザーに追加しておきます。
「OAuthクライアントID」を作る 左メニュー「認証情報」→「+認証情報を作成」→「OAuthクライアントID」を選びます。
- アプリケーションの種類：「ウェブアプリケーション」を選ぶ
- 作成すると クライアントID と クライアントシークレット が表示されます。この2つを必ず控えておきます（あとでSupabaseに貼ります）。
「承認済みのリダイレクトURI」を登録する 同じ作成画面の「承認済みのリダイレクトURI」に、Supabaseの戻り先（コールバック）を追加します。
```
https://<あなたのプロジェクト>.supabase.co/auth/v1/callback
```
<あなたのプロジェクト> の部分は、自分のSupabaseプロジェクトのものに置きかえます（Supabaseの「Settings」で確認できます）。ここが1文字でも違うとログインできません（後述）。

【Supabase側】鍵を登録してつなぐ

GoogleプロバイダをONにする Supabaseダッシュボード →「Authentication」→「Providers」→「Google」を開きます。有効化して、手順3で控えた クライアントID と クライアントシークレット を貼り付け、保存します。
アプリのURLを登録する 「Authentication」→「URL Configuration」を開きます。
- Site URL：あなたのアプリのURL。開発中は http://localhost:5173（使うツールのポート番号に合わせる）など
- Redirect URLs：ログイン後に戻ってよいURLを登録（Site URL と同じでOK）
ここを設定しないと、ログインしても自分のアプリに戻ってこられません。

【アプリ側】ボタンからログインを始める

ログインボタンのコード
```
await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: { redirectTo: window.location.origin },
});
```
- provider: 'google' … ログイン相手は Google だよ、という指定。
- redirectTo: window.location.origin … ログインが終わったら いま開いているページのURLに戻ってきて、という指定。
動かして確かめる ボタンを押す → Googleの画面が出る → 「許可」する → 自分のアプリに戻ってログイン状態になる。確認はこれ。
```
const { data: { user } } = await supabase.auth.getUser();
```
user が取れていれば成功です。この user.id が、第2章の auth.uid()（持ち主を指すID）です。

⚠️ 定番のハマり

リダイレクトURIの不一致（redirect_uri_mismatch というエラー） いちばん多い失敗です。Google側の「承認済みのリダイレクトURI」（手順4）と、実際に戻ってくる先がズレていると出ます。https/http、末尾の /、プロジェクト名まで一字一句そっくり同じにしてください。
戻ってこない／真っ白になる Supabaseの Site URL / Redirect URLs（手順6）が未設定だと、ログイン後に戻る先が分からず止まります。アプリのURLを登録しましょう。
自分は入れるのに、他の人が入れない OAuth同意画面が「テスト」のままだと、テストユーザーに登録した人しかログインできません。広く公開するときは、Google側で公開（本番）への切りかえが必要です。

📝 ことばメモ

OAuthクライアントID：あなたのアプリを「このアプリですよ」とGoogleに名乗るための名札
クライアントシークレット：その名札に付くひみつの合言葉（人に見せない・コードに直書きしない）
リダイレクトURI：ログインのあと戻ってくる住所。Google側に事前登録した住所しか使えない
コールバック：ログイン結果を持って戻ってくる、その戻り先の処理（Supabaseの /auth/v1/callback）
同意画面（OAuth同意画面）：「このアプリに許可していい？」とユーザーに見せる確認画面

← 目次・はじめにへもどる

付録B Google認証 設定手順

🪜 手順

【Google Cloud側】鍵を発行する

【Supabase側】鍵を登録してつなぐ

【アプリ側】ボタンからログインを始める

⚠️ 定番のハマり

📝 ことばメモ

付録B　Google認証設定手順