Google サインインを追加

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

前提条件:ローカルで動作する Web アプリ(5 分で公開)と、実アカウント用の移行済みデータベース(データベースのセットアップ)。通常の Google アカウントが必要です。ここでのすべては無料で、約 10 分かかります。

用語メモ:OAuth は、Google が Google のページでユーザーをサインインさせ、アプリに証明を渡す標準規格です。Google Cloud プロジェクトは、アプリの認証情報を保持する Google コンソール内のコンテナです。OAuth 同意画面(OAuth consent screen)は、Google がユーザーを戻す前に表示するページです。クライアント ID はアプリを Google に識別させるもので、クライアントシークレットはそのパスワードであり、サーバーにのみ保持します。

1. Google Cloud プロジェクトを作成します。2. 同意画面を構成します。3. Web OAuth クライアントを 1 つ作成し、その ID とシークレットをコピーします。4. 3 つの値を apps/web/.env.local に貼り付け、開発サーバーを再起動します。

プロジェクトは製品全体で 1 つで十分です。同じ Google Cloud プロジェクトが後で Cloud Run デプロイをホストし、モバイルサインインも同じ Web バックエンドを経由します——プラットフォームや機能ごとに個別のクライアントを作成する必要はありません。

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

Google Cloud プロジェクトを作成する

1. console.cloud.google.com を開き、Google アカウントでサインインします。

2. 上部バー(Google Cloud ロゴの隣)のプロジェクトドロップダウンをクリックし、New Project(新しいプロジェクト)を選択します。

3. 名前を付けて——製品名で構いません——Create(作成)をクリックします。サインイン認証情報に組織、カード、請求アカウントは不要です。

期待される結果:コンソールが新しいプロジェクトにリロードされ、その名前が上部バーに表示されます。デプロイガイドに進んだときは、別のプロジェクトを作成せずにこのプロジェクトを再利用してください。

OAuth 同意画面を構成する

1. 左側のナビゲーションで APIs & Services → OAuth consent screen(API とサービス → OAuth 同意画面)を開き、Get started(開始)をクリックします。

2. ユーザーに表示される App name(アプリ名)(製品名)を入力し、User support email(ユーザーサポートメール)を選択し、対象ユーザーに External(外部)を選び、開発者連絡先メールを入力して、Create(作成)までクリックを進めます。

3. この画面で必要なのはこれだけです。アプリはデフォルトの openid、email、profile スコープのみを要求し、追加のスコープや検証は不要です。

開発中は公開ステータスが Testing(テスト中)のままです。そのモードではリストされたアカウントのみサインインできるため、Audience → Test users(対象ユーザー → テストユーザー)に自分の Gmail アドレスを追加してください——さもないと Google はあなた自身もブロックします。製品が公開されたら Publish app(アプリを公開)をクリックします。機密スコープを要求していないため、公開しても Google の検証レビューは開始されません。

OAuth クライアントを作成する

1. APIs & Services → Credentials → + Create Credentials → OAuth client ID(API とサービス → 認証情報 → + 認証情報を作成 → OAuth クライアント ID)を開きます。

2. Application type(アプリケーションタイプ)を Web application(Web アプリケーション)に設定し、supastack local のような名前を付けます。

3. Authorized JavaScript origins(承認済み JavaScript 生成元)に http://localhost:3000 を追加します。Authorized redirect URIs(承認済みリダイレクト URI)に http://localhost:3000/api/auth/callback/google を追加します——このコールバックパスはキットのデフォルト認証エンジンである Better Auth のものです:{APP_URL}/api/auth/callback/google。

4. Create(作成)をクリックし、ダイアログから Client ID(クライアント ID)と Client Secret(クライアントシークレット)をコピーします。後でクライアントのページで再度開くこともできますが、今コピーしておくと手間が省けます。

本番用には 2 つ目の Web クライアントを作成するか(推奨)、このクライアントに追加します:JavaScript 生成元 https://yourdomain.com、リダイレクト URI https://yourdomain.com/api/auth/callback/google。環境ごとにクライアントを分けておけば、ローカルのシークレットが漏洩しても本番には届きません。

値をアプリに追加する

apps/web/.env.local を開きます——Next.js が読み込むのはルートの .env ではなくこのファイルです——そして以下の 3 行を設定します。AUTH_GOOGLE_ENABLED=true がボタンを有効にし、クライアントのペアが Google Cloud クライアントを識別します。

クライアントシークレットはサーバー専用です。NEXT_PUBLIC_ や EXPO_PUBLIC_ 変数に決して含めず、Git にコミットもしないでください。本番では、env ファイルではなくホストのシークレットストアに同じ 3 つの名前を設定します。

編集後は開発サーバーを再起動してください——環境の変更は起動時にのみ読み込まれます。

# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret

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

http://localhost:3000/auth を開き、Google ボタンをクリックし、Google の同意画面を完了し、アプリがサインイン状態で戻ってくることを確認します。

redirect_uri_mismatch は Google に登録したリダイレクト URI が正確に一致していないことを意味します——プロトコル(http と https)、ポート、パスを確認してください。末尾は /api/auth/callback/google でなければならず、/callback/google/ や末尾スラッシュのバリエーションではありません。

Access blocked / has not completed the Google verification process(アクセスがブロックされました / Google の検証プロセスが完了していません)は、同意画面がまだ Testing で、サインインしようとしているアカウントが Test users にリストされていないことを意味します——Audience セクションで追加してください。

Google ボタンが表示されない場合、または .env.local 編集後もサインインが失敗する場合は、開発サーバーを再起動してください。起動時に変数名を挙げて失敗する場合は、完全なクライアントペアなしでフラグだけが有効になっています。

• 次に GitHub サインインを追加
• OAuth プロバイダーの概要