RDS Supabase allows you to configure an SMTP mail server to enable email authentication features for your application, such as user sign-up, sign-in verification, and password resets. This guide uses NetEase Mail (163.com) as an example to demonstrate setting up an SMTP service, enabling email authentication, testing with a sample application, and customizing email templates.
Prerequisites
-
You have purchased an RDS Supabase instance and its status is Running.
-
You have an SMTP mail server ready. This guide uses NetEase Mail (163.com) as an example.
Step 1: Get your SMTP information
Before you configure email authentication in RDS Supabase, you must enable the SMTP service in your email provider's settings and get an authorization code. The following steps use NetEase Mail (163.com) as an example.
-
Sign in to NetEase Mail (163.com). In the top navigation bar, click Settings, and then select POP3/SMTP/IMAP.
-
In the IMAP/SMTP service section, click Enable. Follow the on-screen instructions to complete the security verification. The system then generates an authorization code.
ImportantSave this authorization code securely. You will use it as your SMTP password. The code is displayed only once and cannot be retrieved after you close the page.
-
Record the following SMTP server information. You will need it when configuring RDS Supabase:
Parameter
Description
SMTP server address
For NetEase Mail (163.com), it is
smtp.163.com. For Alibaba Mail, it issmtp.qiye.aliyun.com.SMTP port
The SSL-encrypted port is
465.SMTP username
Your email address, for example,
your_email@163.com.SMTP password
The authorization code you obtained in the previous step (not your email account password).
For more details on SMTP server addresses and port configurations, see SMTP Server Address and Port Reference.
Step 2: Configure email authentication
-
Go to the RDS Console Home. In the left-side navigation pane, click AI Application Development.
-
Select a region at the top of the page. In the RDS Supabase list, click the Project ID of your target instance to open its details page.
-
On the Basic Information page, in the Network Information section, record the public endpoint. You will need this to configure the API endpoint later.
-
In the left-side navigation pane, click Auth Configuration to open the authentication settings page.
-
In the Authentication providers section, click Configured (or Not Configured) next to Email to open the email configuration panel.
-
In the email configuration panel, configure the following parameters:
Parameter
Description
Enable Email Provider
Turn on the switch to enable the email sign-in feature.
SMTP port
Enter
465(the SSL-encrypted port).Email Sender Name
Enter the display name for the sender, for example,
Test Email Sender. Recipients will see this name.SMTP User
Enter your email address, for example,
your_email@163.com.SMTP Password
Enter the authorization code you obtained in Step 1, not your email account password.
Admin Email
Enter the administrator's email address. This is typically the same as the SMTP User.
SMTP Host
Enter the SMTP server address. For NetEase Mail (163.com), it is
smtp.163.com.Email Auto Confirmation
Disable this switch. When disabled, users must confirm their email address to complete registration. When enabled, the confirmation step is skipped. To ensure that user emails are valid, keep this switch disabled.
site URL
Enter your application's frontend URL, for example,
http://localhost:3000. This URL is used as the base for confirmation links in emails.API endpoint
Enter the public endpoint of your RDS Supabase instance (recorded earlier). Use the format
http://<your_public_ip>:80.Email OTP Length
The length of the email One-Time Password (OTP). The default is
6characters.Email OTP Expiry
The duration in seconds for which the email OTP is valid. The default is
3600(1 hour). -
After completing the configuration, click OK and wait for the instance to restart.
Step 3: Configure the Supabase allowlist
To ensure your application can access the RDS Supabase instance, you must add your application's public IP address to the instance's access allowlist.
-
Go to the RDS Console Home. In the left-side navigation pane, click AI Application Development.
-
Select a region at the top of the page. In the RDS Supabase list, click the Project ID of your target instance to go to its details page.
-
On the Basic Information page, in the Allowlist information section, click Add allowlist group to add the IP address of your client to the allowlist.
Step 4: Test the email service
After completing the configuration, you can use the following React sample application to test the sign-up, sign-in, and password reset features.
Download the sample code
Download and extract the sample project package: supabase_auth_email.zip
Configure environment variables
After extracting the package, navigate to the project directory. Create a .env file based on the .env.example template and enter your RDS Supabase instance connection details:
# Replace with your RDS Supabase public endpoint
VITE_SUPABASE_URL=your-supabase-url
# Replace with your RDS Supabase Anon Key
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
You can find the Supabase URL and Anon Key on the RDS Supabase instance details page.
Run the test
Install the dependencies and start the development server:
npm install
npm run dev
Once the server is running, open the application in your browser and test the following features in order:
-
Sign Up: Enter an email and password, then click Sign Up. A message appears: "Please check your email to confirm your account."
-
Email confirmation: Check your inbox for a confirmation email from Supabase. Click the Confirm your email address link to verify your email.
-
Sign In: After confirming your email, sign in with your registered email and password. Upon successful sign-in, the application displays your user information.
-
Password reset: On the sign-in page, click "Forgot Password?". Enter your email to receive a password reset email. Click the link in the email to set a new password.
Step 5: Customize email templates (Optional)
By default, Supabase uses built-in English email templates. If you need to customize the email content, for example, by translating it into another language, you can host custom HTML templates in Supabase Storage.
Upload email templates
-
Create HTML files for the email templates you need. Supabase supports the following six types of email templates, which you can customize:
Confirmation email
File name:
confirm-signup.html<h2>Confirm your signup</h2> <p>Follow this link to confirm your user:</p> <p><a href="{{ .ConfirmationURL }}">Confirm your mail</a></p>Invitation email
File name:
invite-user.html<h2>You have been invited</h2> <p>You have been invited to create a user on {{ .SiteURL }}. Follow this link to accept the invite:</p> <p><a href="{{ .ConfirmationURL }}">Accept the invite</a></p>Magic link
File name:
magic-link.html<h2>Magic Link</h2> <p>Follow this link to login:</p> <p><a href="{{ .ConfirmationURL }}">Log In</a></p>Email change
File name:
change-email.html<h2>Confirm Change of Email</h2> <p>Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:</p> <p><a href="{{ .ConfirmationURL }}">Change Email</a></p>Password reset
File name:
reset-password.html<h2>Reset Password</h2> <p>Follow this link to reset the password for your user:</p> <p><a href="{{ .ConfirmationURL }}">Reset Password</a></p>Reauthentication
File name:
reauthentication.html<h2>Confirm reauthentication</h2> <p>Enter the code: {{ .Token }}</p>NoteThe templates use
{{ .ConfirmationURL }}as a placeholder for the confirmation link and{{ .Token }}as a placeholder for the verification code. Supabase automatically replaces these placeholders with the actual values when sending the email. -
On the RDS Supabase instance details page, go to the Network Information section and click the public endpoint link (for example,
42.121.191.108:80) to open the Supabase Dashboard. -
In the left-side navigation pane of the Supabase Dashboard, click Storage, then click Create a new bucket to create a bucket with the following settings:
-
Bucket name: Enter a name for the bucket, for example,
email-bucket. -
Public bucket: Turn on the switch to make the bucket publicly accessible.
-
-
Click Create. After the bucket is created, open it and click Upload files in the upper-right corner to upload your email template HTML files.
Configure email template URL
After the upload is complete, the URL for your email template has the following format:
http://<your_public_endpoint>/storage/v1/object/public/<BucketName>/<file_name>
For example, the URL for the password reset template would be:
http://<your_public_endpoint>/storage/v1/object/public/email-bucket/reset-password.html
-
Return to the RDS Supabase console. In the left-side navigation pane, click Auth Configuration.
-
Click the Email Configuration tab. In the Password reset template field, enter the URL above.
-
Click Confirm and wait for the instance to restart.
After the configuration is complete, you can test the password reset feature again to see your custom email template in use.