初級④ ログインをつける

初級編の山場です。無料講座「ログイン機能（認証）」で学んだSupabaseを使って、あなたのアプリに会員登録・ログインを付けます。ちなみに、いまあなたが使っているこの学習サイトの会員機能も、まったく同じ作り方です。

STEP1：Supabaseのプロジェクトを作る

1. 1supabase.com で「Start your project」→ GitHubでサインアップ（またソーシャルログイン！）。
2. 2「New project」→ 名前は my-app、Region は Tokyo（Northeast Asia）を選ぶ。
3. 3データベースのパスワードを決めて、必ずメモ（あとで使うことがある）。
4. 4数分待つと、プロジェクトのダッシュボードが開く。

STEP2：“2つの鍵”を控える

プロジェクトの 設定（Project Settings）→ API を開き、次の2つをメモ帳にコピーしておきます。

Project URL

あなたのSupabaseの住所（https://〇〇.supabase.co）。

anon public キー

ブラウザに置く前提の“公開用の鍵”。これを使う。

STEP3：Vercelに“環境変数”として渡す

鍵はコードに直書きせず、環境変数に入れます（デプロイの回で学んだやつの実践！）。

1. 1Vercelの my-app →「Settings」→「Environment Variables」。
2. 2名前 NEXT_PUBLIC_SUPABASE_URL ＝ さっきの Project URL を追加。
3. 3名前 NEXT_PUBLIC_SUPABASE_ANON_KEY ＝ anon public キーを追加。
4. 4「Deployments」から最新のデプロイを Redeploy（環境変数は再デプロイで反映される）。

STEP4：AIにログイン機能を実装してもらう

このアプリにSupabaseでメール＋パスワードのログイン機能を付けたい。@supabase/supabase-js と @supabase/ssr を使って。/login ページで会員登録とログインができて、ヘッダーにはログイン状態（メールアドレス）とログアウトボタンを表示。環境変数は NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY を使う前提で。まず計画を見せて。

計画を読んでOKしたら実行→mainに反映。山場ほど「計画→OK→実行」です。

STEP5：Supabase側の仕上げ設定

1. 1Supabaseの Authentication の設定で、テスト中は「Confirm email（メール確認）」を一旦オフにすると動作確認がスムーズ（本番公開時にオンに戻すのがおすすめ）。
2. 2URL Configuration の Site URL に、あなたの公開URL（https://〇〇.vercel.app）を設定。

STEP6：一周してみる

1. 1公開URLの /login で会員登録（自分のメールでOK）。
2. 2ログインして、ヘッダーに自分のメールが出るか確認。
3. 3ログアウトして、表示が戻るか確認。

おさらい：今日使った“言葉”

Supabase

認証＋データベースのセット。このサイトと同じ基盤。

anon キー

公開前提の鍵。service_role は絶対に出さない。

環境変数

鍵をコードに直書きせず、安全に渡す仕組み。変更後はRedeploy。

認証

「あなたは誰？」を確かめる仕組み。次回は“認可”（誰が何を見られるか）へ。