"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Callout, CodeBlock, CodeTabs, PerformanceMetrics, QuickTip, TabsContent, TabsList, TabsTrigger} = _components; if (!Callout) _missingMdxReference("Callout", true); if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeTabs) _missingMdxReference("CodeTabs", true); if (!PerformanceMetrics) _missingMdxReference("PerformanceMetrics", true); if (!QuickTip) _missingMdxReference("QuickTip", true); if (!TabsContent) _missingMdxReference("TabsContent", true); if (!TabsList) _missingMdxReference("TabsList", true); if (!TabsTrigger) _missingMdxReference("TabsTrigger", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "AWS Cognito makes it easy to handle sign‑up, password resets, multi‑factor auth, and more—but the out‑of‑the‑box messages are pretty plain. With a single Lambda \"CustomMessage\" trigger you can own every email and SMS your users see, rebranding them to match your product's look & feel and adding rich HTML, buttons, inlined styles, or even multi‑language support." }), "\n", _jsx(Callout, { type: "info", title: "What We'll Cover", children: _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "Explain Cognito's CustomMessage trigger" }) }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Scaffold a Lambda project" }), " (TypeScript or JavaScript)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Walk through handler code" }), " for all the common email types"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Deploy and wire up" }), " the trigger to your User Pool"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Test and iterate" }), " on your templates"] }), "\n", _jsx(_components.li, { children: "Share best‑practices for maintainable, localized messaging" }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "1-what-is-the-custommessage-trigger", children: _jsx(_components.a, { className: "anchor-link", href: "#1-what-is-the-custommessage-trigger", children: "1. What Is the \"CustomMessage\" Trigger?" }) }), "\n", _jsx(_components.p, { children: "When you enable the CustomMessage trigger on your Cognito User Pool, every time Cognito needs to send an email or SMS—for sign‑up verification, forgotten‑password, admin‑created users, code resends, attribute updates—you can intercept it in a Lambda and override:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "emailSubject" }) }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "emailMessage" }), " (HTML or plain text)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "smsMessage" }), " (text‑only fallback)"] }), "\n"] }), "\n", _jsxs(Callout, { type: "success", title: "Available Trigger Sources", children: [_jsxs(_components.p, { children: ["Based on the ", _jsx(_components.code, { children: "event.triggerSource" }), " you can craft completely different templates for:"] }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "CustomMessage_SignUp" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "CustomMessage_ForgotPassword" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "CustomMessage_AdminCreateUser" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "CustomMessage_ResendCode" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "CustomMessage_UpdateUserAttribute" }) }), "\n"] })] }), "\n", _jsxs(_components.p, { children: ["Cognito then uses what you set on ", _jsx(_components.code, { children: "event.response" }), " instead of its defaults."] }), "\n", _jsx(_components.h2, { id: "2-scaffolding-the-lambda-project", children: _jsx(_components.a, { className: "anchor-link", href: "#2-scaffolding-the-lambda-project", children: "2. Scaffolding the Lambda Project" }) }), "\n", _jsx(_components.h3, { id: "prerequisites", children: _jsx(_components.a, { className: "anchor-link", href: "#prerequisites", children: "Prerequisites" }) }), "\n", _jsxs(Callout, { type: "warning", title: "Before You Begin", children: [_jsx(_components.p, { children: "Make sure you have:" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "AWS CLI or Console access with permissions to create Lambda & Cognito triggers" }), "\n", _jsx(_components.li, { children: "Node.js ≥ 14 (or your preferred runtime)" }), "\n", _jsx(_components.li, { children: "A Cognito User Pool already in place" }), "\n"] })] }), "\n", _jsx(_components.h3, { id: "project-setup", children: _jsx(_components.a, { className: "anchor-link", href: "#project-setup", children: "Project Setup" }) }), "\n", _jsxs(CodeTabs, { defaultValue: "npm", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "npm", children: "NPM" }), _jsx(TabsTrigger, { value: "yarn", children: "Yarn" })] }), _jsx(TabsContent, { value: "npm", children: _jsx(CodeBlock, { title: "NPM Setup", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: [_jsx(_components.span, { className: "hljs-built_in", children: "mkdir" }), " cognito-custom-messages\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " cognito-custom-messages\nnpm init -y\nnpm install aws-lambda\nnpm install --save-dev typescript @types/aws-lambda\n"] }) }) }) }), _jsx(TabsContent, { value: "yarn", children: _jsx(CodeBlock, { title: "Yarn Setup", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: [_jsx(_components.span, { className: "hljs-built_in", children: "mkdir" }), " cognito-custom-messages\n", _jsx(_components.span, { className: "hljs-built_in", children: "cd" }), " cognito-custom-messages\nyarn init -y\nyarn add aws-lambda\nyarn add -D typescript @types/aws-lambda\n"] }) }) }) })] }), "\n", _jsxs(_components.p, { children: ["Create a basic ", _jsx(_components.code, { children: "tsconfig.json" }), ":"] }), "\n", _jsx(CodeBlock, { title: "tsconfig.json", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-json", children: [_jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"compilerOptions\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"target\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"es2020\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"module\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"commonjs\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"strict\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-literal", children: _jsx(_components.span, { className: "hljs-keyword", children: "true" }) }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"outDir\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"dist\"" }), "\n ", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), _jsx(_components.span, { className: "hljs-punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "\"include\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: ":" }), " ", _jsx(_components.span, { className: "hljs-punctuation", children: "[" }), _jsx(_components.span, { className: "hljs-string", children: "\"src/**/*\"" }), _jsx(_components.span, { className: "hljs-punctuation", children: "]" }), "\n", _jsx(_components.span, { className: "hljs-punctuation", children: "}" }), "\n"] }) }) }), "\n", _jsx(_components.p, { children: "Your folder tree should look like this:" }), "\n", _jsx(CodeBlock, { title: "Project Structure", copy: false, children: _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-text", children: "cognito-custom-messages/\n├─ src/\n│ └─ handler.ts\n├─ tsconfig.json\n└─ package.json\n" }) }) }), "\n", _jsx(_components.h2, { id: "3-writing-the-handler", children: _jsx(_components.a, { className: "anchor-link", href: "#3-writing-the-handler", children: "3. Writing the Handler" }) }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.strong, { children: "src/handler.ts" }), ", import the Cognito event type and craft your HTML templates. Here's a generic, brand‑agnostic example:"] }), "\n", _jsx(CodeBlock, { title: "src/handler.ts", copy: true, children: _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "CustomMessageTriggerEvent" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Context" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "Callback" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'aws-lambda'" }), ";\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// You can also load these from environment variables or a config file" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-variable constant_", children: "BRAND" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'YourAppName'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "logoUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'https://yourcdn.com/logo.png'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "accentColor" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'#1E88E5'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "baseColor" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'#1565C0'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "supportEmail" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'support@yourapp.com'" }), ",\n};\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " handler = ", _jsx(_components.span, { className: "hljs-title function_", children: "async" }), " (\n ", _jsx(_components.span, { className: "hljs-attr", children: "event" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "CustomMessageTriggerEvent" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "context" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Context" }), "\n): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "CustomMessageTriggerEvent" }), "> => {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Incoming CustomMessage event:'" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "(event, ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-number", children: "2" }), "));\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Header / footer can be extracted to functions or external files" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " header = ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

\n $\"",$ \n `"] }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " footer = ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

© ", _jsxs(_components.span, { className: "hljs-subst", children: ["${", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "Date" }), "().getFullYear()}"] }), " ", _jsx(_components.span, { className: "hljs-subst", children: "${BRAND.name}" }), ". All rights reserved.

\n Need help? ", _jsx(_components.span, { className: "hljs-subst", children: "${BRAND.supportEmail}" }), "\n

\n `"] }), ";\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Helper to wrap a code in a styled box" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "renderCode" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "code" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") => ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

", _jsx(_components.span, {
              className: "hljs-subst",
              children: "${code}"
            }), "

\n `"] }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { triggerSource, request, response } = event;\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " code = request.", _jsx(_components.span, { className: "hljs-property", children: "codeParameter" }), ";\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " user = request.", _jsx(_components.span, { className: "hljs-property", children: "usernameParameter" }), " ?? event.", _jsx(_components.span, { className: "hljs-property", children: "userName" }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (triggerSource) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'CustomMessage_SignUp'" }), ":\n response.", _jsx(_components.span, { className: "hljs-property", children: "emailSubject" }), " = ", _jsxs(_components.span, { className: "hljs-string", children: ["`Welcome to ", _jsx(_components.span, { className: "hljs-subst", children: "${BRAND.name}" }), "! Confirm your address`"] }), ";\n response.", _jsx(_components.span, { className: "hljs-property", children: "emailMessage" }), " = ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n ", _jsx(_components.span, { className: "hljs-subst", children: "${header}" }), "\n

Building Custom Email Workflows for AWS Cognito with Lambda