前提と注意事項
以下が前提と注意事項になります。
- Supabase のアカウントは作成済みとします。
- Resend のアカウントは作成済みとします。
- Resend の独自ドメイン設定が完了している必要があります。
上記の Resend の独自ドメインの作設定手順は以下にまとめていますので必要な方は参考にしてみてください。
この記事のゴール
Supabase でのユーザー新規登録時やパスワードリセット時のメール送信を Resend 経由で自分の独自ドメインから送信できるようにすることがこの記事のゴールです。 この記事の手順は、以下の Resend の公式ドキュメントを参考にしました。
Resend で API キーを作成する
まずResendにログインして、以下のようにサイドメニューのAPI Keysをクリックして API キーのページを開き、そのページにあるCreate API keyボタンをクリックします。
Create API keyボタンをクリックすると、以下のように API キーの設定フォームが表示されます。
Nameは任意の名前、Permissionはここではメール送信に限定してSending accessを選択します。Domainはすでに Resend で設定済みの独自ドメインが表示されるので好きなものを選択します。
Addボタンをクリックすると、以下のように作成した Resend の API キーが表示されます。
この API キーをどこかに保存しておきます。なお、この API キーは一度しか表示されず、二度と確認できません。どこかに保存してからCloseを押してダイアログを閉じてください。
以上で Resend の API キーの作成は完了です。
Supabase の SMTP 設定を変更する
Supabase の Web 管理画面にログインし、以下のようにサイドメニューのProject Settings（歯車マーク）をクリックして設定画面を開きます。
設定画面のAuthenticationタブページを開いて、そのページ内にあるSMTP SettingsのEnable Custom SMTPのスイッチをクリックしてオンにします。
Enable Custom SMTPのスイッチをクリックしてオンにすると、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 管理画面のユーザーページからユーザーに招待メールを送信してみます。
Send invitationをクリックすると、招待メールを送信したいユーザーのメールアドレスを入力するダイアログが表示されます。ここで適当な実在するメールアドレスを入力して、Invite userボタンをクリックします。
Invite userボタンをクリックすると、Resend 経由で招待メールが送信され、デフォルトだと以下のように招待メールを送信したユーザーのLast Sign In部分にWainting for verification..と表示されます。
これはメールアドレスの確認を行うための招待メールが送信されて、ユーザーによるメールアドレスの確認待ち状態を意味します。
実際に送信された招待メールの中にはメールアドレスの確認ボタンやリンクが用意されており、それをクリックしてメールアドレスの確認が処理されるとこのWainting for verification..というラベル表示が消えます。
なお、本記事では説明しませんが、ここの招待メールの本文やその中に含めるリンクの設定などは、以下のようにAuthenticationページのEmail Templatesページで編集できます。
まとめ
Supabase で自分の独自ドメインを使って Resend からメール送信を行うための設定手順を解説しました。 必要な項目を入力するだけすぐに設定できます。