Supabase Authでログイン機能を作る

このレッスンでは、あなたが作っているアプリに「メールアドレスとパスワードでログインする仕組み」を 15 分で組み込みます。イメージは、家の玄関に鍵を取り付ける作業です。鍵の仕組み（Supabase Auth ＝ユーザー管理の裏方）そのものを作るのではなく、用意された鍵を玄関にはめ込む感覚で進めます。

コードは AI（Claude Code や Cursor など、あなたが書きたいことを伝えると代わりにコードを書いてくれる道具）に書いてもらいます。あなたの役割は「どんなログインにしたいか」を AI に伝え、出てきたコードを貼り付け、画面で動作を確かめることです。

始める前に次の 2 つが揃っていることを確認してください。

• Supabase（＝ログインやデータ保存をまとめて引き受けてくれるクラウドサービス）のプロジェクトが作成済みで、API の接続情報（URL と anon key ＝誰でも使ってよい公開鍵）を .env.local に書き込み済み
• Next.js（＝あなたのアプリの土台になる Web フレームワーク）のプロジェクトがローカルで起動できる状態

もしまだなら、先に「Supabase を AI で使える状態にする」レッスンを終わらせてから戻ってきてください。

1. Supabase のダッシュボードを開き、左メニューの「Authentication」をクリックします
2. 「Providers」タブを開き、「Email」が有効（Enabled）になっていることを確認します
3. 検証をシンプルにするため、今回は「Confirm email」（＝確認メールを送ってから登録完了にする機能）を オフ にします。本番に出す前に戻すことを忘れないでください

良い例: 開発中は Confirm email をオフにしてテストが早く回せるようにする 悪い例: オフにしたまま本番に出してしまい、なりすまし登録ができる状態にする

あなたのエディタ（Cursor や VS Code + Claude Code）を開き、AI にそのまま貼れるプロンプト（＝AI への指示文）を送ります。

次のプロンプトをコピーして、AI チャットに貼ってください。

Next.js (App Router) と Supabase を使って、
/login ページに「メール」「パスワード」「ログインボタン」「新規登録ボタン」だけの
最小のログインフォームを作ってください。
- supabase-js の signInWithPassword と signUp を使う
- 成功したら / にリダイレクトする
- エラーは画面に日本語で表示する
- クライアントコンポーネントにする
- 既にある @/lib/supabase/client.ts の createClient を使う

AI が返してきたファイル（だいたい app/login/page.tsx 1 枚）を、指示された場所に保存します。AI が「このコマンドを実行してください」と言ってきたら、それもそのままターミナル（＝命令を打ち込む黒い画面）で実行します。

良いプロンプトの例: 使うライブラリ・画面パス・成功時の挙動を 1 つずつ明示する 悪いプロンプトの例: 「ログイン作って」だけで丸投げする（無関係な機能まで盛り込まれがち）

開発サーバーを起動します。

pnpm dev

（＝手元のパソコンでアプリを起動するコマンド。ブラウザで触れるようになります）

ブラウザで http://localhost:3000/login を開き、次の 3 つを順番に試します。

1. 架空のメールアドレス（例: test1@example.com）と適当なパスワードで「新規登録」ボタンを押す → / に移動できる
2. 一度ブラウザを再読み込みし、同じメール・パスワードで「ログイン」ボタンを押す → / に移動できる
3. わざと違うパスワードで押す → 画面にエラーメッセージが日本語で出る

さらに Supabase ダッシュボードの「Authentication → Users」を開き、今作ったユーザーが一覧に出ていればログインの仕組みがつながっている証拠です。スクリーンショットを 1 枚撮っておきましょう（提出用のエビデンスになります）。

• 「Invalid API key」と出る: .env.local に書いた URL や anon key にスペースや改行が混ざっています。Supabase ダッシュボードの「Project Settings → API」から貼り直してください
• サインアップはできるのにログインできない: Confirm email がオンのままだと、確認メールを開くまでログインできません。ダッシュボードでオフにして試し直してください
• ボタンを押しても何も起きない: ブラウザの開発者ツール（右クリック →「検証」）を開いて Console タブを見ます。赤いエラーを丸ごとコピーして、AI に「このエラーを直して」と貼れば修正案が返ってきます
• createClient is not a function: @/lib/supabase/client.ts の中身を AI に見せ、「サーバー用とクライアント用、どちらを呼び分けるべきか」と聞いてください

次の 3 つがそろっていれば完了です。

• /login ページが表示され、ログイン／新規登録ボタンが並んでいる
• 新規登録したメールで Supabase の Users 一覧に行が増えている（スクリーンショット撮影済み）
• 間違ったパスワードで日本語のエラーが表示される