Firebase Authenticationの認証メールをSendGridのSMTPで送信してみた

2025.11.01
 Firebaseの認証メールをSendGridのSMTPで送信する はじめにFirebase Authentication は標準でメール送信機能がありますが、送信数に制限があったりします（参考: Firebase Authentication の送信制限）。より安定したメール到達のため、あるいは送信元ドメインをしっかり管理したい、といった場合には外部の SMTP サーバーを使う構成がおすすめです。
この記事では、SendGrid を SMTP サーバーとして設定し、Firebase のメール送信（たとえば認証メール）を置き換える手順を紹介します。この記事を読めば、以下の点がわかるようになります。
SendGrid 側の準備（API Key の発行方法）
Firebase Authentication コンソールでの SMTP 設定（SMTP account username が apikey 固定であることなど）
アプリ側からの送信コード（かんたんなサンプル）
 検証環境MacOS
Reactサンプルアプリ
Firebase アカウント
SendGrid アカウント（Domain Authentication または Single Sender 認証済み）
 手順 1. SendGrid の API Key を発行はじめに API Key を準備する。
参考: SendGrid SMTP 連携ガイド
SendGrid ダッシュボードにログインする。
Settings -> API Keys -> Create API Key の画面を開く。
任意の API Key Name を設定し、Create & View で表示された API Key を安全な場所に保管しておく。
 2. Firebase に SMTP を設定次に、Firebase コンソールの Authentication -> Templates -> SMTP Settings に移動し、以下を入力する。
注意: SendGrid 側で送信ドメインの認証（Domain Authentication）または Single Sender の検証が終わっていないと、送信が失敗してしまうので注意しましょう。
Sender address: <SendGridで検証済みの送信元アドレス>
SMTP server host: smtp.sendgrid.net
SMTP server port: 587, 25, 2525 (STARTTLS) / 465 (SSL)
SMTP account username: apikey
SMTP account password: <SendGridで発行したAPI Key>
SMTP security mode: STARTTLS または SSL
 3. コード（最小の送信例）これは、アプリ側から「認証メールを送る」ための最小限のサンプルコードです。React のコンテキストから sendVerificationEmail() を呼ぶことを想定しています。
// verify-email.js（一部抜粋）
import { useFirebaseAuth } from "../contexts/FirebaseAuthContext";

export function VerifyEmailButton() {
  const { sendVerificationEmail, user } = useFirebaseAuth();

  const handleVerifyEmail = async () => {
    try {
      await sendVerificationEmail();
      alert(`Verification email sent to ${user.email}. Check inbox/spam.`);
    } catch (error) {
      let errorMessage = error.message;
      if (error.code === "auth/too-many-requests") {
        errorMessage = "リクエストが多すぎます。しばらくしてから再試行してください。";
      }
      alert(`Error: ${errorMessage}`);
    }
  };

  return (
    <button onClick={handleVerifyEmail}>
      認証メールを送信
    </button>
  );
}
Firebase Web SDK を直接使う場合は、sendEmailVerification(currentUser) を呼び出すことになる。SMTP を設定しておけば、Firebase が自動的に SendGrid の SMTP 経由で送信してくれる。
 動作確認
アプリでメール送信をトリガーする。
メールが受信箱（または迷惑メールフォルダ）に届くか確認する。
もし届かない場合は、一度 Firebase の SMTP 設定を OFF にして、Firebase からの直接送信でメールが届くかを確認する。
Firebase から直接送信しても届かない場合: Firebase の設定や、受信側のメールフィルタリングの問題が考えられる。
Firebase からは届き、SMTP 経由だと届かない場合: SendGrid 側の設定に問題がある可能性が高い。SendGrid の API Key やポート設定が正しいか、ダッシュボードの Activity Feed や IP Access Management の履歴に不審な点がないかを確認する。

 まとめFirebase のメール送信を SendGrid SMTP に置き換えることで、送信制限や到達性、ドメイン整合性といった課題を解決できる。
設定のポイントは「username=apikey」「password=<あなたのAPI Key>」「smtp.sendgrid.net」の3点である。
アプリ側はこれまで通り sendVerificationEmail() などを呼ぶだけで、裏側の送信ルートが自動で SMTP に切り替わる。
 参考リンクFirebase: Authentication の送信制限
SendGrid: SMTP 連携ガイド
Firebase Web: ユーザーに確認メールを送信