Supabase Auth (local-development) 経由で送信されるメールタイトル・本文を変更する

はじめに

Supabase Auth にはログイン認証時などメールを送信する機能が存在します。デフォルトのままでも十分使用できますが、ローカライズしたり説明など本文やタイトルなどを変更を必要となる場面が少なからず発生します。サイト上で動作しているときは Console から変更すればよいだけですが、ローカル環境(local-development)だと所定のファイルを変更し適用する必要があります。

Supabase の設定ファイルについて

supabase init を実行すると supabase/config.toml が作成されます。 Supabase Auth 利用時に送信されるメール本文変更もこの設定ファイルに追記します。

設定変更可能なメールテンプレート

設定可能なメールテンプレートは以下の通りです。

auth.email.template.invite
auth.email.template.confirmation
auth.email.template.recovery
auth.email.template.magic_link
auth.email.template.email_change

テンプレート内で使用可能な変数

テンプレート内で利用可能な変数は下記ドキュメントに記載されています。使用するテンプレートによって使用可能な変数も異なりますので検証しながら利用してください。

テンプレートを定義する

今回は、 auth.email.template.invite のメールテンプレートを独自に定義してみます。 Supabase の設定ファイル supabase/config.toml に追記後 supabse stop && supabase start で適用することができます。

HTML ファイルを用意する

送信メールの HTML を定義します。 TXTメールは定義しませんが、定義された HTML からテキスト部分を抜き出し multipart メールとして送信してくれます。

ファイル名の指定はありませんが、わかりやすいように supabase/templates/invite.html とします。

<h2>招待メール</h2>
<p>招待メール本文</p>

Supabase の設定を変更する

supabase/config.toml に auth.email.template.invite のメール送信時に使用するテンプレートとタイトルを記載します。

[auth.email.template.invite]
subject = "招待"
content_path = "./supabase/templates/invite.html"

Supabase local を再起動する

設定を適用するために Supabase のローカル環境を再起動します。