Edit SSO

Name

Also known as (comma separated)

Brief definition Single Sign-On.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Sign in to Acme" }, { "id": "orgName", "type": "text", "label": "Organisation", "default": "Acme Corp" }, { "id": "primaryProvider", "type": "select", "label": "Primary provider", "default": "Google", "options": [ "Google", "Microsoft", "Okta" ] }, { "id": "showEmailFallback", "type": "toggle", "label": "Show email fallback", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#241430", "presets": [ "#241430", "#BFD9F2", "#A8E6C1" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"sso\" style=\"--accent:{{accent}};\">\n <h3 class=\"sso__heading\">{{heading}}</h3>\n <p class=\"sso__org\">Managed by {{orgName}}</p>\n <button type=\"button\" class=\"sso__provider sso__provider--primary\" data-provider=\"{{primaryProvider}}\">Continue with {{primaryProvider}}</button>\n <button type=\"button\" class=\"sso__provider\">Continue with SAML</button>\n {{#if showEmailFallback}}<div class=\"sso__divider\"><span>or</span></div>\n <label class=\"sso__field\">\n <span class=\"sso__label\">Work email</span>\n <input type=\"email\" autocomplete=\"username\" placeholder=\"you@company.com\" />\n </label>{{/if}}\n</div>\n<style>\n.sso { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 22px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }\n.sso__heading { margin: 0 0 4px; font-size: 17px; }\n.sso__org { margin: 0 0 18px; font-size: 12px; color: #24143099; }\n.sso__provider { display: block; width: 100%; padding: 10px; border-radius: 8px; border: 1.5px solid #24143030; background: #FAF7F2; font-weight: 600; cursor: pointer; margin-bottom: 10px; font: inherit; }\n.sso__provider--primary { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }\n.sso__divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; color: #24143077; }\n.sso__divider::before, .sso__divider::after { content: \"\"; flex: 1; height: 1px; background: #24143020; }\n.sso__field { display: block; }\n.sso__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }\n.sso input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }\n.sso__provider:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"w-[300px] p-[22px] rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]\">\n <h3 class=\"m-0 mb-1 text-[17px]\">{{heading}}</h3>\n <p class=\"m-0 mb-4 text-xs text-[#241430]/60\">Managed by {{orgName}}</p>\n <button type=\"button\" class=\"block w-full py-2.5 rounded-lg font-semibold cursor-pointer mb-2.5 text-[#FAF7F2] border-[1.5px]\" style=\"background:{{accent}};border-color:{{accent}}\" data-provider=\"{{primaryProvider}}\">Continue with {{primaryProvider}}</button>\n <button type=\"button\" class=\"block w-full py-2.5 rounded-lg font-semibold cursor-pointer mb-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143030]\">Continue with SAML</button>\n {{#if showEmailFallback}}<div class=\"sso-tw-divider flex items-center gap-2.5 my-3.5 text-xs text-[#24143077]\"><span>or</span></div>\n <label class=\"block\">\n <span class=\"block mb-1 font-semibold text-[13px]\">Work email</span>\n <input type=\"email\" autocomplete=\"username\" placeholder=\"you@company.com\" class=\"w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]\" />\n </label>{{/if}}\n</div>\n<style>\n.sso-tw-divider::before, .sso-tw-divider::after { content: \"\"; flex: 1; height: 1px; background: #24143020; }\n</style>", "react": "export function Sso({\n heading = \"{{heading}}\",\n orgName = \"{{orgName}}\",\n primaryProvider = \"{{primaryProvider}}\",\n showEmailFallback = {{showEmailFallback}},\n accent = \"{{accent}}\",\n}) {\n const btn = { display: \"block\", width: \"100%\", padding: 10, borderRadius: 8, border: \"1.5px solid #24143030\", background: \"#FAF7F2\", fontWeight: 600, cursor: \"pointer\", marginBottom: 10, font: \"inherit\" };\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 300, padding: 22, borderRadius: 14, boxSizing: \"border-box\", border: \"1px solid #24143018\" }}>\n <h3 style={{ margin: \"0 0 4px\", fontSize: 17 }}>{heading}</h3>\n <p style={{ margin: \"0 0 18px\", fontSize: 12, color: \"#24143099\" }}>Managed by {orgName}</p>\n <button type=\"button\" style={{ ...btn, background: accent, color: \"#FAF7F2\", borderColor: accent }}>Continue with {primaryProvider}</button>\n <button type=\"button\" style={btn}>Continue with SAML</button>\n {showEmailFallback && (\n <>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, margin: \"14px 0\", fontSize: 12, color: \"#24143077\" }}>\n <span style={{ flex: 1, height: 1, background: \"#24143020\" }} /><span>or</span><span style={{ flex: 1, height: 1, background: \"#24143020\" }} />\n </div>\n <label style={{ display: \"block\" }}>\n <span style={{ display: \"block\", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Work email</span>\n <input type=\"email\" autoComplete=\"username\" placeholder=\"you@company.com\" style={{ width: \"100%\", boxSizing: \"border-box\", padding: \"9px 10px\", borderRadius: 8, border: \"1.5px solid #24143030\", font: \"inherit\" }} />\n </label>\n </>\n )}\n </div>\n );\n}" }