auto-resolve sso provider icons via simple icons (#8)

* auto-resolve sso provider icons via simple icons cdn

* track errored slug to avoid stale fallback flash

useEffect runs after paint, so when the provider prop changes the
first render still sees errored=true and briefly shows the letter
avatar. Tracking the errored slug directly makes the check happen
during render.

* Hybrid SSO icons: inline SVGs for top providers, Simple Icons CDN fallback

Keep multicolor inline SVGs for Google, GitHub, GitLab, Microsoft,
Facebook, and Apple. Fall back to Simple Icons CDN for any other
provider, with a letter avatar as the final fallback.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix sso provider matching and stale error state

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: masnwilliams

packages/managed-auth-react/src/components/icons.tsx

@@ -227,6 +227,30 @@ export const GitHubMark = (p: IconProps) => (
   </svg>
 );
 
+export const GitLabMark = (p: IconProps) => (
+  <svg viewBox="0 0 24 24" aria-hidden="true" {...p}>
+    <path d="M12 23.054l3.684-11.335H8.316L12 23.054z" fill="#E24329" />
+    <path d="M12 23.054L8.316 11.719H1.647L12 23.054z" fill="#FC6D26" />
+    <path
+      d="M1.647 11.719L.253 16.01a.95.95 0 00.346 1.062L12 23.054 1.647 11.719z"
+      fill="#FCA326"
+    />
+    <path
+      d="M1.647 11.719h6.669L5.633.926a.477.477 0 00-.908 0L1.647 11.719z"
+      fill="#E24329"
+    />
+    <path d="M12 23.054l3.684-11.335h6.669L12 23.054z" fill="#FC6D26" />
+    <path
+      d="M22.353 11.719l1.394 4.291a.95.95 0 01-.346 1.062L12 23.054l10.353-11.335z"
+      fill="#FCA326"
+    />
+    <path
+      d="M22.353 11.719h-6.669l2.683-10.793a.477.477 0 01.908 0l3.078 10.793z"
+      fill="#E24329"
+    />
+  </svg>
+);
+
 export const MicrosoftMark = (p: IconProps) => (
   <svg viewBox="0 0 24 24" aria-hidden="true" {...p}>
     <path d="M1 1h10.5v10.5H1V1z" fill="#F25022" />

packages/managed-auth-react/src/components/sso-provider.tsx

@@ -1,9 +1,10 @@
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import {
   AppleMark,
   BuildingIcon,
   FacebookMark,
   GitHubMark,
+  GitLabMark,
   GoogleMark,
   KeyIcon,
   MicrosoftMark,
@@ -14,27 +15,73 @@ export interface SSOProviderInfo {
   icon: ReactNode;
 }
 
+const BUILTIN_PROVIDERS: Record<
+  string,
+  { label: string; Icon: (p: { className?: string }) => ReactNode }
+> = {
+  google: { label: "Google", Icon: GoogleMark },
+  github: { label: "GitHub", Icon: GitHubMark },
+  gitlab: { label: "GitLab", Icon: GitLabMark },
+  microsoft: { label: "Microsoft", Icon: MicrosoftMark },
+  azure: { label: "Microsoft", Icon: MicrosoftMark },
+  facebook: { label: "Facebook", Icon: FacebookMark },
+  apple: { label: "Apple", Icon: AppleMark },
+  passkey: { label: "Passkey", Icon: KeyIcon },
+  sso: { label: "SSO", Icon: BuildingIcon },
+  saml: { label: "SSO", Icon: BuildingIcon },
+};
+
+function slugify(provider: string): string {
+  return provider.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+
+function titleCase(provider: string): string {
+  return provider
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ");
+}
+
+function CDNProviderIcon({ provider }: { provider: string }) {
+  const [erroredSlug, setErroredSlug] = useState<string | null>(null);
+  const slug = slugify(provider);
+  const letter = provider.trim().charAt(0).toUpperCase() || "?";
+
+  if (!slug || erroredSlug === slug) {
+    return (
+      <span className="kma-sso-icon kma-sso-icon--letter" aria-hidden="true">
+        {letter}
+      </span>
+    );
+  }
+
+  return (
+    <img
+      src={`https://cdn.simpleicons.org/${slug}`}
+      alt=""
+      className="kma-sso-icon"
+      onError={() => setErroredSlug(slug)}
+    />
+  );
+}
+
 export function getSSOProviderInfo(provider: string): SSOProviderInfo {
-  const p = provider.toLowerCase();
-  if (p.includes("google"))
-    return { label: "Google", icon: <GoogleMark className="kma-sso-icon" /> };
-  if (p.includes("github"))
-    return { label: "GitHub", icon: <GitHubMark className="kma-sso-icon" /> };
-  if (p.includes("microsoft") || p.includes("azure"))
-    return {
-      label: "Microsoft",
-      icon: <MicrosoftMark className="kma-sso-icon" />,
-    };
-  if (p.includes("facebook"))
+  const slug = slugify(provider);
+
+  const builtinKey = Object.keys(BUILTIN_PROVIDERS).find((k) =>
+    slug.includes(k),
+  );
+  if (builtinKey) {
+    const builtin = BUILTIN_PROVIDERS[builtinKey];
     return {
-      label: "Facebook",
-      icon: <FacebookMark className="kma-sso-icon" />,
+      label: builtin.label,
+      icon: <builtin.Icon className="kma-sso-icon" />,
     };
-  if (p.includes("apple"))
-    return { label: "Apple", icon: <AppleMark className="kma-sso-icon" /> };
-  if (p.includes("saml") || p.includes("sso"))
-    return { label: "SSO", icon: <BuildingIcon className="kma-sso-icon" /> };
-  if (p.includes("passkey"))
-    return { label: "Passkey", icon: <KeyIcon className="kma-sso-icon" /> };
-  return { label: provider, icon: null };
+  }
+
+  return {
+    label: titleCase(provider),
+    icon: <CDNProviderIcon provider={provider} />,
+  };
 }

packages/managed-auth-react/src/styles/styles.css

@@ -515,6 +515,18 @@
   height: 1.25rem;
 }
 
+.kma-sso-icon--letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--kma-color-muted, #6b7280);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
 /* ---------- Form / Input ---------- */
 
 .kma-form {