Edit Passkey

Name

Also known as (comma separated)

Brief definition Passwordless authentication credential.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Sign in with a passkey" }, { "id": "account", "type": "text", "label": "Account", "default": "jamie@example.com" }, { "id": "device", "type": "select", "label": "Device", "default": "This device", "options": [ "This device", "Phone or tablet", "Security key" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pk\" style=\"--accent:{{accent}};\">\n <span class=\"pk__icon\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"14\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M15 14h11M22 14v4M18 14v3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg></span>\n <h3 class=\"pk__heading\">{{heading}}</h3>\n <p class=\"pk__account\">{{account}}</p>\n <button type=\"button\" class=\"pk__submit\" data-device=\"{{device}}\">Continue with {{device}}</button>\n <button type=\"button\" class=\"pk__alt\">Use a password instead</button>\n</div>\n<style>\n.pk { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 24px; border-radius: 16px; box-sizing: border-box; border: 1px solid #24143018; text-align: center; }\n.pk__icon { display: inline-flex; color: var(--accent); background: #24143008; padding: 10px; border-radius: 999px; margin-bottom: 10px; }\n.pk__heading { margin: 0 0 6px; font-size: 16px; }\n.pk__account { margin: 0 0 18px; font-size: 13px; color: #24143099; }\n.pk__submit { width: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; margin-bottom: 10px; }\n.pk__alt { width: 100%; padding: 9px; border-radius: 8px; border: none; background: none; color: #241430; text-decoration: underline; cursor: pointer; font: inherit; }\n.pk__submit:focus-visible, .pk__alt:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"w-[300px] p-6 rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2] text-center\">\n <span class=\"inline-flex bg-[#24143008] p-2.5 rounded-full mb-2.5\" style=\"color:{{accent}}\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"14\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"/><path d=\"M15 14h11M22 14v4M18 14v3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg></span>\n <h3 class=\"m-0 mb-1.5 text-base\">{{heading}}</h3>\n <p class=\"m-0 mb-4 text-[13px] text-[#241430]/60\">{{account}}</p>\n <button type=\"button\" class=\"w-full py-3 rounded-lg border-none font-bold cursor-pointer text-[#14351f] mb-2.5\" style=\"background:{{accent}}\" data-device=\"{{device}}\">Continue with {{device}}</button>\n <button type=\"button\" class=\"w-full py-2 rounded-lg border-none bg-transparent text-[#241430] underline cursor-pointer\">Use a password instead</button>\n</div>", "react": "export function Passkey({\n heading = \"{{heading}}\",\n account = \"{{account}}\",\n device = \"{{device}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: 24, borderRadius: 16, boxSizing: \"border-box\", border: \"1px solid #24143018\", textAlign: \"center\" }}>\n <span style={{ display: \"inline-flex\", color: accent, background: \"#24143008\", padding: 10, borderRadius: 999, marginBottom: 10 }}>\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" aria-hidden=\"true\"><circle cx=\"10\" cy=\"14\" r=\"6\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" /><path d=\"M15 14h11M22 14v4M18 14v3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" /></svg>\n </span>\n <h3 style={{ margin: \"0 0 6px\", fontSize: 16 }}>{heading}</h3>\n <p style={{ margin: \"0 0 18px\", fontSize: 13, color: \"#24143099\" }}>{account}</p>\n <button type=\"button\" style={{ width: \"100%\", padding: 11, borderRadius: 8, border: \"none\", background: accent, color: \"#14351f\", fontWeight: 700, cursor: \"pointer\", marginBottom: 10 }}>Continue with {device}</button>\n <button type=\"button\" style={{ width: \"100%\", padding: 9, borderRadius: 8, border: \"none\", background: \"none\", color: \"#241430\", textDecoration: \"underline\", cursor: \"pointer\", font: \"inherit\" }}>Use a password instead</button>\n </div>\n );\n}" }