Email templates
Logto provides different templates for customizing email content, which are categorized based on their use cases.
It is strongly recommended that you use different templates in different scenarios. Otherwise, users may receive email content that does not match the current operation, causing confusion. If there are missing templates that are not configured, it may cause flow errors that rely on that template and affect the normal development of business.
Email template types
| usageType | Scenario |
|---|---|
| SignIn | Users sign in using their email and verify by entering verification code instead of entering a password. |
| Register | Users create an account using their email and verify it by entering a verification code sent by Logto to their email. |
| ForgotPassword | If users forget their password during login, they can choose to verify their identity using the email they've already verified with Logto. |
| Generic | This template can be used as a general backup option for various scenarios, including testing connector configurations and so on. |
| OrganizationInvitation | Use this template to send users an invitation link to join the organization. |
| UserPermissionValidation | During app usage, there may be some high-risk operations or operations with a relatively high risk level that require additional user verification, such as bank transfers, deleting resources in use, and canceling memberships. The UserPermissionValidation template can be used to define the content of the email verification code users receive in these situations. |
| BindNewIdentifier | When a user modifies their profile, they may bind an email address to their current account. In this case, the BindNewIdentifier template can be used to customize the content of the verification email. |
Verification codes expire in 10 minutes. We currently do not support the customization of verification code expiry time.
A {{code}} placeholder needs to be reserved in the template. When sending a verification code, a randomly generated code will replace this placeholder before we send email to users.
Email template examples
You can use the provided email template code examples as a starting point for customizing your UI. To create a user interface similar to the following:
Since the email templates used in different scenarios of Logto are very similar, with the only difference being the description of the current scenario and operation.
We do not show the HTML code of all templates in detail here. Instead, we only take the sign-in scenario as an example. Other scenarios, such as sign-up and forgot password, are very similar to the following sample.
Users can refer to this template and adjust according to their actual situation.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verify your email to sign in</title>
<style>
.auth-service-by:hover .mini-logo {
display: none !important;
}
.auth-service-by:hover .mini-logo-color {
display: block !important;
}
body {
font-family:
'SF Pro Text',
-apple-system,
system-ui,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Arial,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
background-color: #fff;
color: #191c1d;
max-width: 640px;
padding: 32px 0;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
h1 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
margin-top: 32px;
}
.verification-code {
margin: 20px 0;
background: #eff1f1;
border-radius: 12px;
padding: 36px;
font-size: 32px;
font-weight: 600;
line-height: 40px;
}
.footer {
text-align: center;
color: #a9acac;
margin-top: 48px;
}
</style>
</head>
<body>
<div style="max-width: 698px; border-radius: 16px; border: 1px solid #E0E3E3;">
<div style="padding: 0 24px;">
<center>
<img src="{{logoUrl}}" alt="Logo" width="auto" height="40" />
<h1>Verify your email to sign in</h1>
<p>
We have received a sign in attempt with the following code. Please enter it in the page
you opened to complete the sign in process.
</p>
<div class="verification-code">000000</div>
<p style="color: #747778;">
If you did not attempt to sign in but received this email, please ignore it. The code
will remain active for 10 minutes.
</p>
<hr style="margin: 64px 0 24px; max-width: 420px;" />
<p style="color: #747778; margin: 16px 0 0;">{{companyInfo}}</p>
</center>
</div>
</div>
<div class="footer">
<hr />
<p style="font-size: 14px; line-height: 20px; margin: 20px 0;">
<a href="https://logto.io" style="color: #A9ACAC; text-decoration: underline;">Logto</a>:
The better identity infrastructure for developers.
</p>
<table style="margin: 0 auto; width: auto; border-spacing: 0;">
<tbody>
<tr>
<td style="vertical-align: middle;">
<a href="{{discordServerUrl}}" style="display: block; margin: 0 12px;">
<img src="{{discordLogoUrl}}" style="width: 20px;" />
</a>
</td>
<td style="vertical-align: middle;">
<a href="{{githubUrl}}" style="display: block; margin: 0 12px;">
<img src="{{githubLogoUrl}}" style="width: 20px;" />
</a>
</td>
<td style="vertical-align: middle;">
<a href="{{twitterUrl}}" style="display: block; margin: 0 12px;">
<img src="{{twitterLogoUrl}}" style="width: 20px;" />
</a>
</td>
<td style="vertical-align: middle;">
<a href="{{mailToUrl}}" style="display: block; margin: 0 12px;">
<img src="{{emailIconUrl}}" style="width: 20px;" />
</a>
</td>
</tr>
</tbody>
</table>
<p style="font-size: 12px; line-height: 16px;">
© Silverhand, Inc., 2810 North Church Street, Wilmington, DE 19802
</p>
<p style="color: #A9ACAC; font-size: 12px; line-height: 16px;">
Have questions or need help?
<a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;">Contact us</a>
</p>
</div>
</body>
</html>
You can then escape the HTML code above and add it to the connector "Template" field in configs as follows (assuming using SendGrid connector):
{
"subject": "<sign-in-template-subject>",
"content": "<table cellpadding=\"0\" cellspacing=\"0\" ...",
"usageType": "SignIn",
"type": "text/html"
}
FAQs
How to use third-party email template services if templates are not configured in Logto?
You can add a new endpoint to your own web service to send emails, then use the Logto HTTP email connector to call the endpoint you maintain.
This allows you to handle email template logic on your own server.
Is there a way to use Logto email for sending our users a customized "Welcome email"?
We offer Webhook functionality. You can implement your own API endpoint to receive the User.Created event sent by the Logto Webhook, and add logic to send a customized welcome email within the webhook handler.
The Logto email connector only provides email notifications for events related to the authentication flow. Welcome emails are a business requirement and are not natively supported by the email connector, but this functionality can be achieved through Webhooks.