🔰
【バイブコーディング初心者でもできる】Supabase と Google で実装する、一番簡単なログイン機能！

2025/06/19に公開
 はじめにこんにちは！株式会社 OCT-PATHで CTO をしている黛 政隆（X はこちら）です。
日々の学習や開発、本当にお疲れ様です！

最近は Cursor や Claude のような AI コーディングツールが登場し、これまでプログラミング経験がなかった方でも、アイデアを形にできる「バイブスコーディング」が盛り上がっていますよね。素晴らしい時代だと思います！
ただ、そんな中で多くの人が最初にぶつかる大きな壁…それが「ログイン機能」ではないでしょうか。
「アプリを作ってみたいけど、ユーザー登録とか難しそう…」

「ID とパスワードの管理なんて、考えただけで頭が痛い…」
そんな風に感じている方も多いはずです。でも、ご安心ください！

今回は、そんな皆さんのために、最も簡単で、かつ多くのユーザーがすぐに使える「Google 認証」によるログイン機能を、ステップバイステップで丁寧に解説していきます。
この記事を読み終える頃には、あなたのアプリケーションに本格的なログイン機能が備わっているはずです。AI への「聞き方」のコツも紹介するので、ぜひ最後までついてきてくださいね！

 なぜ「Supabase + Google 認証」が最強の入門コンビなのか？世の中にはログイン機能を実装する方法がたくさんありますが、なぜ今回はこの組み合わせなのでしょうか？理由はとてもシンプルです。

 1. Supabase がとにかく便利！Supabase は、よく「Firebase の代替」と言われるサービスで、ログイン機能（認証）、データベース、ストレージといった、Web アプリに必須のバックエンド機能をまるっと提供してくれます。
特に嬉しいポイントは、

ローカル環境を Docker でサクッと構築できる: 自分の PC の中で、本番とそっくりな環境をコマンド一つで立ち上げられます。

本番環境の準備も簡単: Web の管理画面からポチポチするだけで、すぐに本番環境が手に入ります。

設定の切り替えが楽: ローカル環境では設定ファイル（.env）、本番環境では管理画面での設定、と明確に分かれているので混乱しません。
「サーバーサイドの難しいことはよくわからない…」という方でも、まるでフロントエンドを触っているような感覚でバックエンドの機能を使えてしまう、まさに魔法のようなサービスなんです。

 2. Google 認証がユーザーにとって一番ラク！今や、ほとんどの人が Google アカウントを持っていますよね。

サービスごとに新しい ID とパスワードを覚える必要がなく、「Google でログイン」ボタン一つで始められる手軽さは、ユーザーにとって大きなメリットです。
この「ユーザーにとっての便利さ」と「開発者にとっての作りやすさ」を両立できるのが、「Supabase + Google 認証」の組み合わせなのです。

 今回作るものの全体像これから皆さんが作るログイン機能が、どのように動くのかを先に見てみましょう。
少し複雑に見えるかもしれませんが、大丈夫です。私たちが実際にコードを書くのは、主に「あなたのアプリ（フロントエンド）」の部分だけ。残りの難しい連携は、ほとんど Supabase が自動でやってくれます！
!ここから少し技術的な解説になりますが、あらかじめ伝えておきますと、環境用意以外の手順は AIのAgentモードなどで実装可能なもの です。例えば「Supabase と Next.js を使って、Google 認証を実装してください」と言うだけで実装はできてしまうと思います。
なので、そう難しく考える必要はありません。しかし、  どういった仕組みで動いているのか？ のイメージを持ってもらいたいので（このイメージを持つことで理解が深まる）あえて細かく書いています。

 STEP1: Supabase の準備をしよう（ローカルと本番）まずは、Supabase を使えるようにしましょう。

今回は、手元で気軽に試せる「ローカル環境」と、実際に世界に公開できる「本番環境」の両方を準備します。

 1-1. 本番環境のプロジェクト作成最初に、Supabase の公式サイトでアカウント登録を済ませ、本番用のプロジェクトを一つ作っておきましょう。（2つのプロジェクトは無償で作成できるのでまずはFreePlanでお試しとしましょう）

Supabase公式サイトにアクセスし、サインアップします。
ログイン後、ダッシュボードで New Project をクリックし、組織（Organization）とプロジェクト名、データベースのパスワード、リージョン（Asia Pacific (Tokyo) がおすすめ）などを設定してプロジェクトを作成します。（今回は解説しませんがデータベースのパスワードは後ほど使うのでメモをしておきましょう）


必要な情報を入力するだけで、数分で本番環境が完成します。
プロジェクトが完成したら、一旦この画面はそのままにしておきます。

 1-2. ローカル開発環境のセットアップ次に、自分の PC の中に開発環境を作ります。

Supabase は Docker という技術を使って、これを驚くほど簡単にしてくれます。
Docker とは？

PC の中に、OS ごと隔離された「コンテナ」と呼ばれる小さな仮想環境をたくさん作れる技術です。これにより、自分の PC の環境を汚さずに、様々なツールを気軽に試すことができます。
まず、お使いの PC に Docker と Supabase CLI（コマンドラインツール）をインストールしてください。
Docker Desktop のインストール
Supabase CLI のインストール（ターミナルで以下のコマンドを実行）

Mac/Linux の場合 (Homebrew): brew install supabase/tap/supabase-cli

Windows の場合 (Scoop): scoop bucket add supabase https://github.com/supabase/scoop-bucket.git, scoop install supabase

インストールが終わったら、ターミナルで以下のコマンドを順に実行します。
# 1. プロジェクト用のフォルダを作成して、そこに移動
mkdir my-awesome-app
cd my-awesome-app

# 2. Supabaseプロジェクトを初期化
# これで supabase フォルダが作られ、設定ファイルが中に生成されます
supabase init

# 3. Supabaseをローカルで起動！
# Dockerが裏側で動き出し、必要なサービスを立ち上げてくれます
supabase start
supabase start を実行後、最後に以下のような情報が表示されれば成功です！

この情報は後で使うので、ターミナルは開いたままにしておくか、内容をメモ帳にコピーしておきましょう。
Supabase URL: http://localhost:54321
Supabase Storage URL: http://localhost:54321
Supabase DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
JWT secret: your-super-secret-jwt-token-with-at-least-32-characters-long
anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOi...
service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOi...

 【重要】ローカルと本番の設定の違いを理解するここが一つ目の大事なポイントです。

Google 認証のような外部サービスと連携する設定は、本番環境とローカル環境でやり方が異なります。

本番環境: Web の管理画面から、ポチポチとクリックして設定します。

ローカル環境: supabase/config.toml という設定ファイルに、直接書き込む必要があります。
この違いを覚えておくだけで、後のトラブルをぐっと減らせますよ！

 STEP2: Google Cloud Platform (GCP)で「許可証」をもらおうSupabase がユーザーの代わりに Google と話をするためには、「許可証」が必要です。この許可証（クライアントIDとクライアントシークレット）を発行してくれるのが、Google Cloud Platform (GCP) です。
少し手順が多いですが、画像付きで解説するので焦らず進めましょう。

Google Cloud コンソールにアクセスし、Google アカウントでログインします。
画面上部のプロジェクト選択メニューから 新しいプロジェクト を作成します。
左側のメニューから API とサービス > OAuth 同意画面 を選択します。

User Type は 外部 を選択して 作成 をクリック。

アプリ名、ユーザーサポートメール、デベロッパーの連絡先情報 を入力して 保存して次へ をクリック。（他の項目は空で OK）

スコープ と テストユーザー の画面は何もせず 保存して次へ で進みます。

次に、左側メニューから API とサービス > 認証情報 を選択します。
画面上部の ＋ 認証情報を作成 > OAuth クライアント ID を選択します。

アプリケーションの種類 で ウェブ アプリケーション を選択。

承認済みのリダイレクト URI の ＋ URI を追加 をクリックし、Supabase から指定された URI を入力します。



アプリケーションの種類は「ウェブ アプリケーション」を選択します。
リダイレクト URI はどこで確認するの？

Supabase の管理画面（本番環境）の Authentication > Providers > Google を開くと、「Callback URL」が表示されています。これをコピーして貼り付けましょう。ローカル環境でも URL 以外は同じです。
入力が終わったら 作成 をクリックすると、ついにクライアント IDとクライアント シークレットが表示されます！これは非常に大事な情報なので、必ず誰にも見られない安全な場所にコピーしておいてください。


この2つの情報が、Supabase と Google を繋ぐ「鍵」になります。

 STEP3: Supabase に Google の「許可証」を登録しよう手に入れた「許可証」を Supabase に教えましょう。

ここでも、本番とローカルで設定方法が違うので、それぞれ行います。

 3-1. 本番環境への設定（Web 画面でポチポチ）Supabase の本番プロジェクトのダッシュボードを開きます。
左のメニューから Authentication > Providers に進みます。

Google を選択し、先ほど GCP で取得した Client ID と Client Secret を入力します。

Enable Google のトグルを ON にして、Save をクリックすれば完了です！

 3-2. ローカル環境への設定（config.toml を編集）あなたのプロジェクトフォルダにある supabase/config.toml ファイルを開きます。
ファイルの一番下に、以下の内容を追記します。
supabase/config.toml
# [auth.external.google] の部分を追加
[auth.external.google]
enabled = true
client_id = "ここにGCPで取得したクライアントIDを貼り付け"
secret = "ここにGCPで取得したクライアントシークレットを貼り付け"
ファイルを保存したら、一度 Supabase を再起動して設定を反映させましょう。

ターミナルで Ctrl + C を押して一度停止し、再度 supabase start を実行します。
# ターミナルで実行
supabase stop

# 再度起動
supabase start
これで、ローカル環境でも Google 認証が使えるようになりました！

 STEP4: フロントエンドにログインボタンを設置しようさあ、いよいよ最後のステップです。

あなたのアプリにログインボタンを設置し、クリックしたら Google 認証が動くようにします。

ここでは、JavaScript を使った簡単な例を紹介します。

 4-1. Supabase クライアントの準備まず、Supabase とやり取りするためのライブラリをインストールします。
# npm を使っている場合
npm install @supabase/supabase-js
次に、Supabase プロジェクトに接続するためのクライアントを作成します。

このとき、ローカル環境と本番環境で接続先が違うので、環境変数（.env.local ファイル）を使って切り替えるのが定石です。
プロジェクトのルートに .env.local というファイルを作成し、以下のように記述します。
.env.local
# ローカル環境の情報 (supabase start で表示されたもの)
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたのanon key

# 本番環境の情報 (Supabaseダッシュボードの Settings > API で確認)
# NEXT_PUBLIC_SUPABASE_URL=https://あなたのプロジェクトID.supabase.co
# NEXT_PUBLIC_SUPABASE_ANON_KEY=あなたのanon key
そして、アプリのコード内でこのようにクライアントを初期化します。
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

 4-2. ログイン・ログアウト処理の実装準備が整ったので、あとはボタンがクリックされたときに実行する関数を定義するだけです。

たったこれだけで、あの複雑な認証フローが実現できてしまいます。
// Googleでログインする関数
async function signInWithGoogle() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  })
}

// ログアウトする関数
async function signOut() {
  const { error } = await supabase.auth.signOut()
}

// あとは、HTML側でボタンにこれらの関数を紐付けるだけ
// <button onClick={signInWithGoogle}>Googleでログイン</button>
// <button onClick={signOut}>ログアウト</button>
どうですか？驚くほどシンプルですよね！

 困ったときは AI に聞こう！魔法の質問フレーズここまで設定してもうまく動かないこともあるかもしれません。そんな時は、AI コーディングツールの出番です！

ただ、漠然と「動きません」と聞いても、良い答えは返ってきません。
以下のように、 「状況」「やりたいこと」「試したこと」 を具体的に伝えるのがコツです。
AI への質問テンプレート
Supabase と Next.js を使って、Google 認証を実装しています。

ローカル環境で試しているのですが、Google ログインボタンをクリックしても redirect_uri_mismatch というエラーが出てしまいます。
GCP の認証情報画面で、リダイレクト URI は http://localhost:54321/auth/v1/callback と設定しました。

supabase/config.toml にもクライアント ID とシークレットを設定済みです。
何か設定が漏れている可能性はありますか？確認すべき点を教えてください。
このように具体的に質問すれば、AI は優秀な壁打ち相手になってくれますよ！

 おわりに（次回予告）いかがだったでしょうか？

一見すると難しそうなログイン機能も、Supabase のような便利なサービスと AI を組み合わせれば、初心者の方でも十分に実装できることがお分かりいただけたかと思います。
今回実装した Google 認証でログインすると、Supabase のデータベースに自動でユーザー情報が保存されます。これは本当に便利です！
次回は、 「ログインしたユーザーだけが自分のデータを保存・閲覧できる」 という、よりアプリケーションらしい機能の実装解説をしたいと思います。今回作った仕組みがそのまま土台になるので、ぜひ楽しみにしていてください。
AI を「便利な部下」や「優秀なアシスタント」として使いこなし、人間はより創造的なアイデア出しや設計に集中する。そんな新しい開発スタイルを、ぜひ皆さんも楽しんでみてください！
Happy Hacking!!🐙
最後に、企業向けサービスのご案内をさせてください 🙏

 AI・Web3 開発サービス弊社は最先端の AI 技術を活用し、高品質かつ短納期での開発サービスを提供しております。特に AI・Web3 領域において豊富な実績と専門性を有しており、お客様のデジタルトランスフォーメーションを強力にサポートいたします。
サービスにご関心をお持ちの企業様は、ぜひ弊社ホームページよりお気軽にお問い合わせください。

 NeoTechPark コミュニティ連携弊社が運営するエンジニアコミュニティ「NeoTechPark」には、優秀なインドネシアの若手エンジニアが多数参加しており、活発な技術交流が行われております。
現在、企業様との共同ハッカソン開催による人材発掘・技術交流の取り組みを積極的に推進しております。特に昨今注目を集めている AI エージェントの構築をはじめ、最新の AI 技術を活用したソリューション開発に焦点を当てたイベントの企画・運営が可能です。
グローバル人材との協業や次世代 AI 技術の実用化にご興味のある企業様は、ぜひお声がけいただければ幸いです。
お問い合わせ・ご相談は弊社ホームページよりお待ちしております。
【バイブコーディング初心者でもできる】Supabase と Google で実装する、一番簡単なログイン機能！

はじめに

なぜ「Supabase + Google 認証」が最強の入門コンビなのか？

1. Supabase がとにかく便利！

2. Google 認証がユーザーにとって一番ラク！

今回作るものの全体像

STEP1: Supabase の準備をしよう（ローカルと本番）

1-1. 本番環境のプロジェクト作成

1-2. ローカル開発環境のセットアップ

【重要】ローカルと本番の設定の違いを理解する

STEP2: Google Cloud Platform (GCP)で「許可証」をもらおう

STEP3: Supabase に Google の「許可証」を登録しよう

3-1. 本番環境への設定（Web 画面でポチポチ）

3-2. ローカル環境への設定（`config.toml` を編集）

STEP4: フロントエンドにログインボタンを設置しよう

4-1. Supabase クライアントの準備

4-2. ログイン・ログアウト処理の実装

困ったときは AI に聞こう！魔法の質問フレーズ

おわりに（次回予告）

AI・Web3 開発サービス

NeoTechPark コミュニティ連携

Discussion
