Customizing Cognito verification emails with HTML using AWS Lambda

This has become very common to use AWS Cognito as an authentication system in modern days. Using Cognito, when a user signs up or gets an invitation from another user, he gets an email with password and verification codes. But the email is in simple plain text. But we can easily configure a lambda function that can customize and beautify this email according to our needs.

To configure the lambda, first, we have to understand the states when we can actually trigger a lambda from Cognito. These states are (source):

1. CustomMessage_SignUp : Custom message — To send the confirmation code post-sign-up.
2. CustomMessage_AdminCreateUser : Custom message — To send the temporary password to a new user.
3. CustomMessage_ResendCode : Custom message — To resend the confirmation code to an existing user.
4. CustomMessage_ForgotPassword : Custom message — To send the confirmation code for Forgot Password request.
5. CustomMessage_UpdateUserAttribute : Custom message — When a user’s email or phone number is changed, this trigger sends a verification code automatically to the user. Cannot be used for other attributes.
6. CustomMessage_VerifyUserAttribute : Custom message — This trigger sends a verification code to the user when they manually request it for a new email or phone number.
7. CustomMessage_Authentication : Custom message — To send MFA code during authentication.

For convenience, we will only focus on the first two and hope that you can easily configure for the others. Now let’s configure the lambda.

Go to the Lambda console and click create a function and give it a name and node version then create it. Now for the code part, follow the below:

‘use strict’; exports.handler = async (event, context, callback) => {   const email = event.request.userAttributes.email;   const link = `https://example.com?userName=${email}&confirmation\_code=${event.request.codeParameter}\`;   const name = event.request.userAttributes.name;      const template = (name,link) => `          

  const templateInvite = (name,email,code)=> `   <body     style=“       background-color: #333;       font-family: PT Sans, Trebuchet MS, sans-serif;     “   >     <div       style=“         margin: 0 auto;         width: 600px;         background-color: #fff;         font-size: 1.2rem;         font-style: normal;         font-weight: normal;         line-height: 19px;       “       align=“center”     >