何が起きているのか
確認、マジックリンク、招待、リセットのどのメールにも、アプリへ戻るリンクが含まれています。認証プロバイダーやフレームワークは、そのリンクを設定から組み立てます。サイト URL、リダイレクト URL、またはメーラーに設定されたホストです。その設定がまだ http://localhost:3000 のままだと、すべてのメールが開発者自身のコンピューターを指します。
リンク自体はホスト型(例:https://yourproject.supabase.co/auth/v1/verify?...)で、その後のリダイレクト先のページだけがローカルという場合もあります。確認は成功し、その後ブラウザが localhost:3000 に送られて失敗します。メールは問題なく見えるため、このパターンは見落としがちです。
Supabase での直し方(自分の Supabase プロジェクトを使う Lovable アプリを含む)
- Supabase のダッシュボードで Authentication → URL Configuration を開きます。
- Site URL を本番のアドレス(
https://your-app.lovable.appや独自ドメインなど)に設定します。新しい Supabase プロジェクトでは、ここがhttp://localhost:3000になっています。 - 使用する他のすべての環境(ステージング、プレビュードメイン、開発用の localhost)を Redirect URLs に追加します。プレビューデプロイ向けにワイルドカードも使えます。
- サインアップやサインインの呼び出し時にコードが
emailRedirectToやredirectToを渡している場合は、現在のサイト(例:window.location.origin)または環境変数から組み立ててください。許可リストにないリダイレクトは Site URL にフォールバックします。 - メールテンプレートをカスタマイズしている場合は、ハードコードしたアドレスではなく、テンプレートの確認 URL やサイト URL の変数を使っているか確認してください。
Firebase Authentication での直し方
- 確認リンクやサインインリンクを送信するときに、コードがアクションコード設定で渡す続行 URL を確認します。ハードコードした
http://localhostではなく、環境から取得するようにしてください。 - 本番ドメインを Authentication → Settings → Authorized domains に追加します。
他のスタックでの直し方
- Auth.js / NextAuth: ホストが推測しない場合は、デプロイ URL(
AUTH_URL、古いバージョンではNEXTAUTH_URL)を設定します。 - Ruby on Rails: 各環境の設定で、正しい
hostを指定してconfig.action_mailer.default_url_optionsを設定します。 - Django: リクエストまたは Sites フレームワークからリンクを組み立て、サイトのドメインが
example.comやlocalhostのままになっていないか確認します。 - Laravel: 環境ごとに
APP_URLを設定します。 - その他: コード内の
localhost:3000を検索し、環境変数に移します。
スマートフォンのシミュレーターやエミュレーターでは
iOS シミュレーターはコンピューターのネットワークを共有するため、localhost のリンクが開きます。Android エミュレーターはそうではありません。コンピューターには 10.0.2.2 でアクセスするため、localhost:3000 へのリンクでは何も開きません。エミュレーターでは、アプリのリンクを http://10.0.2.2:3000 に向けるか、できれば両方からアクセスできるステージングのアドレスに向けてください。詳しくは モバイルアプリ をご覧ください。
Proxy Mail QA による警告
テストメール内のリンクがローカルのアドレスを指している場合、または確認後にそこへリダイレクトする場合、Proxy Mail QA は Accounts の行に印を付け(「Redirects to localhost:3000」)、受信トレイで説明します。誰かが「確認が壊れている」と報告する前に、環境の設定ミスだとひと目でわかります。
意図的にローカルビルドをテストしている場合は、This is my dev environment を選んでください。そのプロジェクトでは、そのホストへのリンクに警告が付かなくなり、メールのチェックも通るようになります。プロジェクトの設定から元に戻せます。コーディングエージェントは MCP ツール mark_dev_host でホストを自らマークでき、テストスイートは POST /v1/project/dev-hosts(Node.js クライアント では markDevHost、Python ヘルパー では mark_dev_host)でマークできます。