Edit Reauthentication

Name

Also known as (comma separated)

Brief definition Request to authenticate again.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Confirm it’s you" }, { "id": "actionLabel", "type": "text", "label": "Sensitive action", "default": "change your billing email" }, { "id": "email", "type": "text", "label": "Account email", "default": "jamie@example.com" }, { "id": "showPassword", "type": "toggle", "label": "Reveal password", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#BFD9F2", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<form class=\"reauth\" style=\"--accent:{{accent}};\">\n <h3 class=\"reauth__heading\">{{heading}}</h3>\n <p class=\"reauth__copy\">Please re-enter your password to {{actionLabel}}.</p>\n <label class=\"reauth__field\">\n <span class=\"reauth__label\">Password for {{email}}</span>\n <div class=\"reauth__pwrap\">\n <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" autocomplete=\"current-password\" />\n <button type=\"button\" class=\"reauth__toggle\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show password\">{{#if showPassword}}Hide{{/if}}{{#unless showPassword}}Show{{/unless}}</button>\n </div>\n </label>\n <button type=\"submit\" class=\"reauth__submit\">Confirm</button>\n</form>\n<style>\n.reauth { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 20px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }\n.reauth__heading { margin: 0 0 6px; font-size: 16px; }\n.reauth__copy { margin: 0 0 16px; font-size: 13px; color: #24143099; }\n.reauth__field { display: block; margin-bottom: 16px; }\n.reauth__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }\n.reauth input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }\n.reauth__pwrap { position: relative; }\n.reauth__pwrap input { padding-right: 56px; }\n.reauth__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: #241430; font-weight: 700; font-size: 12px; padding: 4px 6px; }\n.reauth__submit { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #241430; font-weight: 700; cursor: pointer; }\n</style>", "tailwind": "<form class=\"w-[300px] p-5 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]\">\n <h3 class=\"m-0 mb-1.5 text-base\">{{heading}}</h3>\n <p class=\"m-0 mb-4 text-[13px] text-[#241430]/60\">Please re-enter your password to {{actionLabel}}.</p>\n <label class=\"block mb-4\">\n <span class=\"block mb-1 font-semibold text-[13px]\">Password for {{email}}</span>\n <div class=\"relative\">\n <input type=\"{{#if showPassword}}text{{/if}}{{#unless showPassword}}password{{/unless}}\" autocomplete=\"current-password\" class=\"w-full box-border px-2.5 py-2 pr-14 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]\" />\n <button type=\"button\" class=\"absolute right-1.5 top-1/2 -translate-y-1/2 border-none bg-transparent cursor-pointer text-[#241430] font-bold text-xs px-1.5 py-1\" aria-pressed=\"{{showPassword}}\" aria-label=\"Show password\">{{#if showPassword}}Hide{{/if}}{{#unless showPassword}}Show{{/unless}}</button>\n </div>\n </label>\n <button type=\"submit\" class=\"w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#241430]\" style=\"background:{{accent}}\">Confirm</button>\n</form>", "react": "export function Reauthentication({\n heading = \"{{heading}}\",\n actionLabel = \"{{actionLabel}}\",\n email = \"{{email}}\",\n showPassword = {{showPassword}},\n accent = \"{{accent}}\",\n}) {\n return (\n <form style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: 20, borderRadius: 14, boxSizing: \"border-box\", border: \"1px solid #24143018\" }}>\n <h3 style={{ margin: \"0 0 6px\", fontSize: 16 }}>{heading}</h3>\n <p style={{ margin: \"0 0 16px\", fontSize: 13, color: \"#24143099\" }}>Please re-enter your password to {actionLabel}.</p>\n <label style={{ display: \"block\", marginBottom: 16 }}>\n <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Password for {email}</span>\n <div style={{ position: \"relative\" }}>\n <input type={showPassword ? \"text\" : \"password\"} autoComplete=\"current-password\"\n style={{ width: \"100%\", boxSizing: \"border-box\", padding: \"9px 10px\", paddingRight: 56, borderRadius: 8, border: \"1.5px solid #24143030\", font: \"inherit\" }} />\n <button type=\"button\" aria-pressed={showPassword} aria-label=\"Show password\"\n style={{ position: \"absolute\", right: 6, top: \"50%\", transform: \"translateY(-50%)\", border: \"none\", background: \"none\", cursor: \"pointer\", color: \"#241430\", fontWeight: 700, fontSize: 12, padding: \"4px 6px\" }}>\n {showPassword ? \"Hide\" : \"Show\"}\n </button>\n </div>\n </label>\n <button type=\"submit\" style={{ width: \"100%\", padding: 10, borderRadius: 8, border: \"none\", background: accent, color: \"#241430\", fontWeight: 700, cursor: \"pointer\" }}>Confirm</button>\n </form>\n );\n}" }