Forgot Password:
You can customize how the Forgot Password workflow operates with the following options on the auth.forgotPassword property:
generateEmailHTML
Function that accepts one argument, containing { req, token, user }, that allows for overriding the HTML within emails that are sent to users attempting to reset their password. The function should return a string that supports HTML, which can be a full HTML email.
Tip:
HTML templating can be used to create custom email templates, inline CSS automatically, and more. You can make a reusable function that standardizes all email sent from Payload, which makes sending custom emails more DRY. Payload doesn’t ship with an HTML templating engine, so you are free to choose your own.
Example:
1import { CollectionConfig } from 'payload/types'
2
3export const Customers: CollectionConfig = {
4 slug: 'customers',
5 auth: {
6 forgotPassword: {
7 generateEmailHTML: ({ req, token, user }) => {
8 // Use the token provided to allow your user to reset their password
9 const resetPasswordURL = `https://yourfrontend.com/reset-password?token=${token}`
10
11 return `
12 <!doctype html>
13 <html>
14 <body>
15 <h1>Here is my custom email template!</h1>
16 <p>Hello, ${user.email}!</p>
17 <p>Click below to reset your password.</p>
18 <p>
19 <a href="${resetPasswordURL}">${resetPasswordURL}</a>
20 </p>
21 </body>
22 </html>
23 `
24 },
25 },
26 },
27}
Important:
If you specify a different URL to send your users to for resetting their password, such as a page on the frontend of your app or similar, you need to handle making the call to the Payload REST or GraphQL reset-password operation yourself on your frontend, using the token that was provided for you. Above, it was passed via query parameter.
generateEmailSubject
Similarly to the above generateEmailHTML, you can also customize the subject of the email. The function argument are the same but you can only return a string – not HTML.
Example:
1{
2 slug: 'customers',
3 auth: {
4 forgotPassword: {
5 generateEmailSubject: ({ req, user }) => {
6 return `Hey ${user.email}, reset your password!`;
7 }
8 }
9 }
10}
Email Verification:
If you’d like to require email verification before a user can successfully log in, you can enable it by passing true or an options object to auth.verify. The following options are available:
generateEmailHTML
Function that accepts one argument, containing { req, token, user }, that allows for overriding the HTML within emails that are sent to users indicating how to validate their account. The function should return a string that supports HTML, which can optionally be a full HTML email.
Example:
1import { CollectionConfig } from 'payload/types'
2
3export const Customers: CollectionConfig = {
4 slug: 'customers',
5 auth: {
6 verify: {
7 generateEmailHTML: ({ req, token, user }) => {
8 // Use the token provided to allow your user to verify their account
9 const url = `https://yourfrontend.com/verify?token=${token}`
10
11 return `Hey ${user.email}, verify your email by clicking here: ${url}`
12 },
13 },
14 },
15}
Important:
If you specify a different URL to send your users to for email verification, such as a page on the frontend of your app or similar, you need to handle making the call to the Payload REST or GraphQL verification operation yourself on your frontend, using the token that was provided for you. Above, it was passed via query parameter.
generateEmailSubject
Similarly to the above generateEmailHTML, you can also customize the subject of the email. The function argument are the same but you can only return a string – not HTML.
Example:
1{
2 slug: 'customers',
3 auth: {
4 verify: {
5 generateEmailSubject: ({ req, user }) => {
6 return `Hey ${user.email}, reset your password!`;
7 }
8 }
9 }
10}