search

aws-amplify / amplify-cli

The AWS Amplify CLI is a toolchain for simplifying serverless web and mobile development.
Apache License 2.0
2.81k stars 821 forks source link

Auth CustomMessage Lambda: Email message HTML not rendering correctly for CustomMessage_AdminCreateUser event #12911

Open poyashad opened 1 year ago

poyashad commented 1 year ago

How did you install the Amplify CLI?

No response

If applicable, what version of Node.js are you using?

No response

Amplify CLI Version

12.1.1

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

Added Lambda Trigger Custom Message 

/* eslint-disable */
/**
 * @type {import('@types/aws-lambda').CustomMessageTriggerHandler}
 */

function getEnv(env) {
  return env == "prod" ? "app" : env;
}

exports.handler = async (event) => {
  console.log(event);
  const { email } = event.request.userAttributes;
  const { codeParameter } = event.request;
  const env = getEnv(process.env.ENV);
  const baseLink = `http://${env}.appname.com`;

  const generateHtml = (header, paragraph, link, linkText) => `<html>
  <body style="background-color: #333; font-family: PT Sans, Trebuchet MS, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh;">
      <div style="width: 600px; background-color: #fff; font-size: 1.2rem; font-style: normal; font-weight: normal; line-height: 19px; text-align: center; padding: 20px;">
          <h2 style="font-size: 28px; margin-top: 20px; margin-bottom: 0; font-style: normal; font-weight: bold; color: #000; line-height: 32px; text-align: center;">${header}</h2>
          <p style="margin-top: 20px; margin-bottom: 5px; font-size: 16px; line-height: 24px; color: #000;">${paragraph}</p>
          <a style="border-radius: 4px;display: block;font-size: 14px;font-weight: bold;line-height: 24px;padding: 12px 24px 13px 24px;text-align: center;text-decoration: none !important;transition: opacity 0.1s ease-in;color: #ffffff !important;box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);background-color: #3b5998;font-family: PT Sans, Trebuchet MS, sans-serif; letter-spacing: 0.05rem; margin-bottom: 20px;" href="${link}">${linkText}</a>
          <p style="margin-top: 20px; margin-bottom: 0; font-size: 16px; line-height: 24px; color: #000;">Ser du inte knappen ovan? Klistra in följande länk i din webbläsare: <a href="${link}">${link}</a></p>
          <p style="margin-top: 20px; margin-bottom: 0; font-size: 16px; line-height: 24px; color: #000;">Med vänliga hälsningar,<br /> AppName</p>
      </div>
  </body>
  </html>`;

  if (event.triggerSource === "CustomMessage_SignUp") {
    const header = "Välkommen till AppName";
    const paragraph = "Din registreringsbegäran godkändes framgångsrikt. Klicka nedan för att slutföra registreringen.";
    const linkText = "KLICKA HÄR FÖR ATT VERIFIERA DIN E-POST";
    const link =  `${baseLink}/verify-account/${email}/${codeParameter}/true`;

    event.response = {
      emailSubject: "Välkommen till AppName | Verifiera din email",
      emailMessage: generateHtml(header, paragraph, link, linkText),
    };
  } else if (event.triggerSource === "CustomMessage_AdminCreateUser") {
    const header = "Välkommen till AppName";
    const paragraph = "En kollega har bjudit in dig till AppName. Klicka nedan för att registrera dig.";
    const linkText = "KLICKA HÄR FÖR ATT REGISTRERA DIG";
    const link =  `${baseLink}/sign-in/${email}/${codeParameter}`;

    event.response = {
      emailSubject: "AppName | Du har blivit inbjuden till AppName",
      emailMessage: generateHtml(header, paragraph, link, linkText),
    };
  }

  console.log(event.response);
  return event;
};

Describe the bug

I have encountered an issue where the HTML content is not rendering correctly in the email message when the event is triggered as "CustomMessage_AdminCreateUser". The code appears to be generating the HTML correctly, as I can see the expected HTML structure in the logs. However, when the email is received, the HTML content is not displayed properly.

The generated HTML content is not rendering properly in the email message for the CustomMessage_AdminCreateUser event.

I am getting the default Email Message "Your username is {username} and temporary password is {####}" but the Email Subject is changed as according to my code

Please note that this issue does not occur when the event is triggered as "CustomMessage_SignUp". In that case, the HTML content is correctly displayed in the email message.

Expected behavior

The email message for the CustomMessage_AdminCreateUser event should display the generated HTML content correctly, including the header, paragraph, and button/link.

Reproduction steps

To reproduce the issue, follow these steps:

  1. Trigger the CustomMessage_AdminCreateUser event.
  2. Check the received email and observe that the HTML content is not rendered correctly.

Project Identifier

No response

Log output

``` # Put your logs below this line ```

Additional information

No response

Before submitting, please confirm:

josefaidt commented 1 year ago

Hey @poyashad :wave: thanks for raising this! You should be able to set this trigger through the CLI, which will configure things for you. Do you see the same result after creating this trigger through the CLI with amplify update auth?

poyashad commented 1 year ago

Hi sorry I misunderstood "Manual changes to the cloud resources managed by Amplify". I have used Amplify CLI for adding the trigger.

? Do you want to configure Lambda Triggers for Cognito? Yes
? Which triggers do you want to enable for Cognito (Press <space> to select, 
<a> to toggle all, <i> to invert selection)
❯◯ Learn More
 ──────────────
 ◯ Create Auth Challenge
 ◉ Custom Message
 ◯ Define Auth Challenge
 ◯ Post Authentication
 ◉ Post Confirmation
josefaidt commented 1 year ago

Hey @poyashad no worries! I'm seeing similar behavior where I've created a user in the Cognito User Pool console and received the invitation message with the subject specified in my custom message Lambda but the body from the default setting image

image

going through a React frontend and creating an account I can confirm the HTML renders properly image

I also tried removing the HTML block from the emailMessage to see if it was related to the returned HTML but was not successful. It appears that the message is ignored entirely when sending an invitation message.

I'm going to mark this as a dependency issue and bring this to the Cognito team for further investigation

poyashad commented 1 year ago

Hi @josefaidt thank you for testing the code!

poyashad commented 1 year ago

Hi @josefaidt, do you have any updates on this? Is there a workaround available? Additionally, can we consider using a transactional service(like sendgrid) to send both the verification and invitation messages? We really need the styling.

Thanks!