Connecting an RDS Supabase AI Application to an SMTP Server and Enabling Email Authentication

1. Log in to the RDS console.
2. Click in the upper left corner and select a region.
3. In the navigation pane, choose AI App Dev Platform. In the application list, locate the target Supabase application.
4. Click the name of the target Supabase application. The RDS Supabase details page is displayed.
5. In the navigation pane, choose Auth Configuration. The authentication configuration page is displayed.
6. In the Authentication Providers area, click on the right of Email to go to the email configuration panel.
7. On the email configuration panel, set related parameters. For details, see Table 1.
   Figure 1 Email configuration panel
   

   Table 1 Email configuration parameters

   Parameter	Description	Example Value
   Enable External Email Login	Turn on the switch to enable email registration.	Enabled
   SMTP Host	Enter the SMTP server address.	192.168.1.1
   SMTP Port	Enter 465 (SSL encryption port).	465
   SMTP Username	Enter your email address.	test_mail@spe.com
   SMTP Password	Enter the obtained email authorization code (not the email login password).	Authorization code
   Admin Email	Enter the administrator's email address, which is usually the same as the SMTP username.	test_mail@spe.com
   Sender Name	Enter the sender's display name, which will be visible to recipients.	RDS Supabase

8. After the configuration is complete, click OK and wait for the configuration to take effect.

After the configuration is complete, you can use the sample application to verify all email authentication functions, including registration, email confirmation, login, Magic Link password-free login, password reset, and email change.

1. Download the sample code by referring to Source Code Configuration Guide for RDS Supabase Email Authentication Demo.
2. Configure environment variables.

   Decompress the package, go to the project directory, create an .env file based on .env.example, and enter the connection information of the RDS Supabase instance.

   # Replace with your RDS Supabase public connection address.
   VITE_SUPABASE_URL=your-supabase-url(http://10.83.35.197:8443) 
   # Replace with your RDS Supabase anon key.
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key(default-anon-api-key)

3. Register with your email address.
   1. On the email login page, click the Sign Up tab.
   2. Enter your email address (for example, test_mail@spe.com) and password, and click Create Account.
   3. During registration, a password strength indicator is displayed to help you set a secure password.
   4. After the registration is successful, the message "Registration successful! Please check your email to confirm your account." is displayed.
4. Confirm your email address.
   1. Open the Foxmail client and log in to the test_mail@spe.com email account.
   2. Find the confirmation email from RDS Supabase and click the Confirm your email address link in the email to complete email verification.
   3. After the confirmation, the browser automatically redirects back to the application page.
5. Log in.
   1. On the login page, switch to the Sign In tab.
   2. Enter the registered email address and password, and click Sign In.
   3. After a successful login, the Dashboard page is displayed, showing the user avatar, user ID, email address, registration time, and last login time.
6. Log in using a Magic Link.
   1. After logging out, switch to the Magic Link tab on the login page.
   2. Enter the registered email address (test_mail@spe.com) and click Sign in with Magic Link.
   3. The message "A Magic Link has been sent to your email. Please click the link in the email to complete sign in." is displayed.
   4. In Foxmail, open the Magic Link email and click the Log In link in the email.
   5. The browser automatically redirects and completes the login, and then the Dashboard page is displayed.
7. Reset the email password.

   Reset the password using an email link (not logged in).

   1. On the login page, click Forgot Password.
   2. Enter the email address (test_mail@spe.com) and click Send Reset Link.
   3. The message "Password reset email sent. Please check your inbox." is displayed.
   4. In Foxmail, open the password reset email and click the Reset Password link in the email.
   5. The browser redirects to the password reset page. Enter a new password and submit it.
   6. After the password is updated, the login page is automatically displayed. Use the new password to log in.
8. Change the email account.
   1. After login, click Change Email on the Dashboard page.
   2. Enter the new email address and click Send Confirmation.
   3. The system sends a confirmation email to the new email address. At the same time, the Dashboard displays the new email address in the unconfirmed state.
   4. Check the confirmation email in the new email address and click the link in the email to complete the email address change.
   5. After the change is successful, the Dashboard displays the new email address. Use the new email address for login in the future.

By default, Supabase uses built-in English email templates. If you need to customize the email content, RDS Supabase supports two methods for configuring email templates.

For details about the email templates supported by Supabase, see Table 2.

• {{ .ConfirmationURL }}: confirmation URL, which is automatically replaced with the actual URL when Supabase sends an email.
• {{ .Token }}: verification code, which is a 6-digit number.
• {{ .SiteURL }}: site URL.
• {{ .Email }}: current email address of the user.
• {{ .NewEmail }}: new email address requested by the user.

Method 1: Configuring Remote Templates Using URLs

In this method, custom HTML template files are hosted in Supabase Storage and referenced using URLs.

1. Create email template files.

   Create HTML email template files as needed. The following are examples of different types of templates:

   Registration confirmation email:

   <h2>Confirm Your Email via Huawei Cloud RDS Supabase</h2>
   <p>Follow this link to confirm your user with Email:</p>
   <p><a href="{{ .ConfirmationURL }}">Confirm your email address</a></p>
   <p>Alternatively, enter the code: {{ .Token }}</p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

   Invitation email:

   <h2>You have been invited via Huawei Cloud RDS Supabase</h2>
   <p>You have been invited to create a user on <a href="{{ .SiteURL }}">{{ .SiteURL }}</a>. Follow this link to accept the invite:</p>
   <p><a href="{{ .ConfirmationURL }}">Accept the invite</a></p>
   <p>Alternatively, enter the code: {{ .Token }}</p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

   Magic Link email:

   <h2>Your Magic Link via Huawei Cloud RDS Supabase</h2>
   <p>Follow this link to direct login <a href="{{ .SiteURL }}">{{ .SiteURL }}</a></p>
   <p><a href="{{ .ConfirmationURL }}">Log In</a></p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

   Email address change confirmation email:

   <h2>Confirm Your Email Change via Huawei Cloud RDS Supabase</h2>
   <p>Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:</p>
   <p><a href="{{ .ConfirmationURL }}">Change email address</a></p>
   <p>Alternatively, enter the code: {{ .Token }}</p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

   Password reset email:

   <h2>Reset Your Password via Huawei Cloud RDS Supabase</h2>
   <p>Follow this link to reset the password for your user:</p>
   <p><a href="{{ .ConfirmationURL }}">Reset Password</a></p>
   <p>Alternatively, enter the code: {{ .Token }}</p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

   Re-authentication email:

   <h2>Confirm Your Reauthentication via Huawei Cloud RDS Supabase</h2>
   <p>Enter the code: {{ .Token }}</p>
   <p>Attention: The default validity period of the link and code is 1 hour.</p>

2. Upload the templates to Supabase Storage.
   1. On the RDS Supabase details page, go to the Supabase Dashboard.
   2. In the navigation pane on the left, click Storage and then click Create a new bucket to create a bucket.
      • Bucket name: Enter a bucket name, for example, email-bucket.
      • Public bucket: Turn on the switch to allow public access.
   3. Click Create to complete bucket creation. After entering the bucket, click Upload files in the upper right corner, and upload the HTML email template files to the bucket.
3. Configure template URLs.
   1. After the upload is complete, the URL format of the email templates is as follows:

      https://<Supabase-private-IP-address>/storage/v1/object/public/<BucketName>/<file-name>

      For example, the URL of the registration confirmation template is as follows:

      https://<Supabase-private-IP-address>/storage/v1/object/public/email-bucket/confirm-signup.html

   2. Return to the RDS Supabase console. In the navigation pane, choose Auth Configuration.
   3. In the Email Template Configuration area, enter the preceding URLs in the template URL fields.
   4. Click Save and wait until the Auth service is restarted.

Method 2: Directly Entering Template Content on the Console (Recommended)

In this method, you directly enter the HTML content of each template without the need to set up a Storage service. If both method 1 (URL) and method 2 (local content) are configured, method 2 takes precedence.

1. On the RDS Supabase console, choose Auth Configuration > Email Template Configuration and find the template content input box for each email type.
2. Enter the custom HTML content in the corresponding input box. (You can refer to the template examples in Method 1: Configuring Remote Templates Using URLs.)
3. After the configuration is complete, click Save. Wait for the Auth service to restart and then the template takes effect immediately.

In addition to the email body templates, you can also customize the subjects for different types of emails.

On the RDS Supabase console, choose Auth Configuration > Email Template Configuration and enter the subject for each email type, as shown in Table 3.

After the configuration is complete, perform the test process in Step 2: Test the Email Service again. Check the emails in Foxmail and verify that the email subjects and body content have been updated to the custom templates.