【初心者向け】Lovable.AIでGoogle認証を実装する方法 – Supabaseの設定手順

こんにちは！
今回は Lovable.AI を使って、Google認証（Googleアカウントによるサインアップ・ログイン機能） を実装する方法を、初心者向けに わかりやすく 解説します。

本記事の内容

1. Google認証とは？ 💡

Google認証とは、ユーザーが Googleアカウント（Gmailなど）を使って、Webサイトやアプリに安全にログインできる仕組みです。

なぜGoogle認証を使うのか？

• 簡単ログイン： ユーザーがすぐに利用できる
• セキュリティ向上： 強固なGoogle認証を活用
• ユーザー体験の向上： アカウント管理の手間を削減

2. Lovable.AIとは？ 🛠️

プログラミングの知識がなくても、AIに指示を出すだけで アプリの開発・運用ができるのが特徴です。

特徴：

✅ コーディング不要でアプリ作成
✅ AIが自動で設定を提案
✅ 短時間で高度な機能を実装可能

詳細は以下noteをご確認ください。

3. Supabaseを使ったGoogle認証の設定手順 📝

Supabase | The Open Source Firebase Alternative

Step 1: Supabaseプロジェクトを作成

1. Supabase にアクセスし、「Start your project」をクリック
2. GitHubでログイン後、「New Project」を作成
3. プロジェクト名・パスワードを入力し、「Create new project」をクリック

🔗 関連リンク: Supabase公式ドキュメント

Step 2: Google認証を有効化する

1. Supabaseのダッシュボードで「Authentication」→「Providers」→「Google」を選択
2. 「Client ID」と「Client Secret」を入力（次の手順で取得）
3. 「Enable（有効化）」をクリック

Step 3: Google Cloud Consoleでクライアント情報を取得

Google Cloud Platform

1. Google Cloud Console にアクセスし、新規プロジェクトを作成
2. 「APIとサービス」→「認証情報」→「OAuth クライアントID」を作成
3. 承認済みのリダイレクトURIを設定（次項で詳しく説明）

4. 【重要】承認済みリダイレクトURIの決め方と設定方法 ⚠️

リダイレクトURIとは？

Google認証後、ユーザーをアプリに戻すためのURLです。

設定を誤ると、認証エラーが発生します！

リダイレクトURI設定

Supabaseの「Authentication」→「Settings」で「Site URL」を確認し、以下のように設定します。

設定例:

https://your-app.supabase.co/auth/v1/callback

独自ドメインを使用する場合:

https://yourdomain.com/auth/v1/callback

判断基準:

• Supabase標準ドメインを使用する場合は自動生成のURLを
• 独自ドメインを設定している場合はそのドメインを登録

5. 【注意】セキュリティ対策のポイント 🔐

Google認証を導入する際は、以下のセキュリティ対策を必ず行いましょう。
1. クライアントIDとシークレットキーを.envファイルに保存
• 例：.env ファイル内に

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

2. プロジェクトにアクセス制限を設定
• Supabaseの「Auth Settings」で、許可されたドメインのみアクセス可能にする。
3. Google CloudのAPI制限
• 「APIとサービス」→「認証情報」→「制限事項の追加」からアクセスを制御。

6. よくあるエラーと解決策 🛠️

エラー内容 原因 解決方法

1.  「リダイレクトURIが無効です」
   原因：URIのスペルミス・設定漏れ
   対策：Supabaseの設定とGoogle側のURIを再確認

2. 「403エラー（アクセス拒否）」
   原因：OAuthの権限設定不足
   対策：Google CloudでOAuthのスコープを確認

3. 「無効なクライアントIDです」
   原因：誤ったクライアントIDを設定している
   対策；正しいクライアントIDを設定

7. まとめと次のステップ 🚀

お疲れ様でした！
この記事では、Lovable.AIとSupabaseを使ったGoogle認証の実装方法を解説しました。

流れの再確認:

1. Supabaseプロジェクト作成（認証機能を設定）
2. Google CloudでOAuth設定（クライアントIDの取得）
3. リダイレクトURIの設定（間違いないように慎重に）

次のステップ:

✅ アプリの動作確認（正常にログインできるか）
✅ セキュリティ設定の最終確認
✅ アプリの公開準備

Google認証を導入し、アプリの利便性を向上させましょう！

🔗 参考リンク:
• Supabase公式ドキュメント
• Google Cloud OAuth設定ガイド

💡 AIを活用したシステム開発やお悩みはいつでもご相談ください！

「AIを活用してビジネスを加速させたい」「具体的にどう導入するか分からない」そんなお悩みに、Crown Cat株式会社がお答えします。
お気軽にお問い合わせください！

👉 今すぐ相談する