Loading...

2023-12-01(金) 15:00

📨 Supabaseのメール送信をResend経由で独自ドメインを使って行うための設定手順

SupabaseResend
Supabaseのユーザーの新規登録時やパスワードリセット時、ユーザー招待時のメール送信をSupabaseではなくResend経由で自分の独自ドメインから送信するための設定手順を解説します。

目次

前提と注意事項

以下が前提と注意事項になります。

  • Supabase のアカウントは作成済みとします。
  • Resend のアカウントは作成済みとします。
  • Resend の独自ドメイン設定が完了している必要があります。

上記の Resend の独自ドメインの作設定手順は以下にまとめていますので必要な方は参考にしてみてください。

⚙️ Resendで独自ドメインを使うための設定手順

Resendで独自ドメインからのメールを送信するために独自ドメインを設定する手順を解説します。

ritaiz.com

この記事のゴール

Supabase でのユーザー新規登録時やパスワードリセット時のメール送信を Resend 経由で自分の独自ドメインから送信できるようにすることがこの記事のゴールです。 この記事の手順は、以下の Resend の公式ドキュメントを参考にしました。

Supabase with SMTP

Learn how to integrate Supabase Auth with Resend SMTP.

resend.com

Resend で API キーを作成する

まずResendにログインして、以下のようにサイドメニューのAPI Keysをクリックして API キーのページを開き、そのページにあるCreate API keyボタンをクリックします。

ResendでAPIキーを作成する

Create API keyボタンをクリックすると、以下のように API キーの設定フォームが表示されます。 Nameは任意の名前、Permissionはここではメール送信に限定してSending accessを選択します。Domainはすでに Resend で設定済みの独自ドメインが表示されるので好きなものを選択します。

APIキーの設定フォーム

Addボタンをクリックすると、以下のように作成した Resend の API キーが表示されます。
この API キーをどこかに保存しておきます。なお、この API キーは一度しか表示されず、二度と確認できません。どこかに保存してからCloseを押してダイアログを閉じてください。

作成したResendのAPIキー

以上で Resend の API キーの作成は完了です。

Supabase の SMTP 設定を変更する

Supabase の Web 管理画面にログインし、以下のようにサイドメニューのProject Settings(歯車マーク)をクリックして設定画面を開きます。
設定画面のAuthenticationタブページを開いて、そのページ内にあるSMTP SettingsのEnable Custom SMTPのスイッチをクリックしてオンにします。

SupabaseのSMTP設定

Enable Custom SMTPのスイッチをクリックしてオンにすると、SMTP 設定用の入力フォームが以下のように表示されます。

SupabaseのSMTP設定例

上記の各項目は以下のようになっています。

  • Sender email: 送信元メールアドレス。Resend で設定した独自ドメインのメールアドレスを指定します。
  • Sender name: 送信者名。メールの送信者名として表示されます。
  • Host: SMTP サーバーのホスト名。ここでは Resend から送信するためにsmtp.resend.comを指定します。
  • Port number: SMTP サーバーのポート番号。ここでは465を指定します。
  • Minium interval between emails being sent: メール送信の最小間隔。ここでは記事公開時点でデフォルトの36秒を指定します。
  • Username: SMTP サーバーのユーザー名。ここではresendを入力します。
  • Password: SMTP サーバーのパスワード。ここでは先ほど作成した Resend の API キーを入力します。

上記を入力してら最後にSaveボタンをクリックして設定を保存します。 以上で Resend 経由でメールを送信するための Supabase の SMTP の設定が完了です。

動作確認する

試しに、以下のように Supabase の Web 管理画面のユーザーページからユーザーに招待メールを送信してみます。

Supabaseのユーザー招待メール送信

Send invitationをクリックすると、招待メールを送信したいユーザーのメールアドレスを入力するダイアログが表示されます。ここで適当な実在するメールアドレスを入力して、Invite userボタンをクリックします。

Supabaseのユーザー招待メール送信ダイアログ

Invite userボタンをクリックすると、Resend 経由で招待メールが送信され、デフォルトだと以下のように招待メールを送信したユーザーのLast Sign In部分にWainting for verification..と表示されます。
これはメールアドレスの確認を行うための招待メールが送信されて、ユーザーによるメールアドレスの確認待ち状態を意味します。 実際に送信された招待メールの中にはメールアドレスの確認ボタンやリンクが用意されており、それをクリックしてメールアドレスの確認が処理されるとこのWainting for verification..というラベル表示が消えます。

Supabaseのユーザー招待メール送信後の表示

なお、本記事では説明しませんが、ここの招待メールの本文やその中に含めるリンクの設定などは、以下のようにAuthenticationページのEmail Templatesページで編集できます。

Supabaseのメールテンプレート設定

まとめ

Supabase で自分の独自ドメインを使って Resend からメール送信を行うための設定手順を解説しました。 必要な項目を入力するだけすぐに設定できます。