@flaredev/cli 0.1.2 → 0.3.0

package/templates/app/components/auth/auth-shell.tsx

@@ -0,0 +1,284 @@
+import Link from "next/link";
+import { CheckIcon, XIcon } from "lucide-react";
+import { site } from "@/lib/site";
+import { authLayout } from "@/lib/theme";
+import { cn } from "@/lib/utils";
+
+interface ShellProps {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  /** Links under the form ("No account? Sign up"). */
+  footer?: React.ReactNode;
+  /** Sign-up screens get the highlights panel in the default theme. */
+  page?: "sign-in" | "sign-up" | "flow";
+}
+
+/**
+ * The app's mark: its initial on the brand colour. Swap in your logo here. It links
+ * home unless `link={false}` (inside another link, where a nested <a> isn't valid HTML).
+ */
+export function BrandMark({ className, link = true }: { className?: string; link?: boolean }) {
+  const mark = (
+    <span className="grid size-9 place-items-center rounded-[calc(var(--radius)+2px)] bg-brand text-lg font-bold text-brand-foreground [background-image:var(--brand-gradient,none)]">
+      {site.name.charAt(0).toUpperCase()}
+    </span>
+  );
+  if (!link) return <span className={cn("inline-flex items-center gap-2.5", className)}>{mark}</span>;
+  return (
+    <Link href="/" aria-label={`${site.name} home`} className={cn("inline-flex items-center gap-2.5", className)}>
+      {mark}
+    </Link>
+  );
+}
+
+function Wordmark({ className }: { className?: string }) {
+  return (
+    <Link href="/" className={cn("text-xl font-bold tracking-tight text-foreground", className)}>
+      {site.name}
+    </Link>
+  );
+}
+
+function Legal({ className }: { className?: string }) {
+  return (
+    <p className={cn("text-xs leading-5 text-foreground-muted", className)}>
+      By continuing, you agree to the{" "}
+      <Link href={site.links.terms} className="underline underline-offset-2 hover:text-foreground">
+        Terms of Service
+      </Link>{" "}
+      and{" "}
+      <Link href={site.links.privacy} className="underline underline-offset-2 hover:text-foreground">
+        Privacy Policy
+      </Link>
+      .
+    </p>
+  );
+}
+
+function Heading({ title, subtitle, align = "center", size = "text-2xl" }: { title: string; subtitle?: string; align?: "center" | "left"; size?: string }) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", align === "center" && "items-center text-center")}>
+      <h1 className={cn(size, "leading-tight text-foreground text-balance")}>{title}</h1>
+      {subtitle && <p className="text-sm text-foreground-muted">{subtitle}</p>}
+    </div>
+  );
+}
+
+function Highlights() {
+  return (
+    <div className="flex max-w-md flex-col gap-8">
+      <h2 className="text-3xl leading-tight text-balance">
+        {site.name}, <span className="text-link">{site.tagline.toLowerCase()}</span>.
+      </h2>
+      <ul className="flex flex-col gap-4">
+        {site.highlights.map((item) => (
+          <li key={item} className="flex items-start gap-3 text-[15px] text-foreground-muted">
+            <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-brand/15 text-link">
+              <CheckIcon className="size-3.5" strokeWidth={3} />
+            </span>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function Testimonial({ large = false }: { large?: boolean }) {
+  const initials = site.testimonial.author
+    .split(" ")
+    .map((part) => part.charAt(0))
+    .join("");
+  return (
+    <figure className="flex max-w-lg flex-col gap-6">
+      <blockquote className={cn("leading-snug text-foreground text-balance", large ? "text-3xl" : "text-xl")}>
+        <span aria-hidden="true" className="mb-2 block font-serif text-6xl leading-none text-foreground-muted/40">
+          &ldquo;
+        </span>
+        {site.testimonial.quote}
+      </blockquote>
+      <figcaption className="flex items-center gap-3">
+        <span className="grid size-10 place-items-center rounded-full bg-brand/15 text-sm font-semibold text-link">{initials}</span>
+        <span className="flex flex-col text-sm">
+          <span className="font-medium text-foreground">{site.testimonial.author}</span>
+          <span className="text-foreground-muted">{site.testimonial.role}</span>
+        </span>
+      </figcaption>
+    </figure>
+  );
+}
+
+/**
+ * The frame around every sign-in screen. The active theme (lib/theme.ts) picks one of
+ * six layouts; the form inside is the same everywhere.
+ */
+export function AuthShell({ title, subtitle, children, footer, page = "flow" }: ShellProps) {
+  const form = (
+    <div className="flex w-full flex-col gap-5">
+      {children}
+      {footer && <div className="text-center text-sm text-foreground-muted">{footer}</div>}
+    </div>
+  );
+
+  switch (authLayout) {
+    // Coral: a big rounded card floating over a soft, blurred glimpse of the app.
+    case "modal":
+      return (
+        <main className="relative grid min-h-dvh place-items-center overflow-hidden bg-surface-muted p-4">
+          <div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 gap-6 p-8 opacity-60 blur-[2px] sm:grid-cols-4">
+            {Array.from({ length: 8 }, (_, index) => (
+              <div key={index} className="flex flex-col gap-3">
+                <div className="aspect-[4/3] rounded-2xl bg-gradient-to-br from-brand/25 via-brand/10 to-surface" />
+                <div className="h-3 w-3/4 rounded bg-border" />
+                <div className="h-3 w-1/2 rounded bg-border" />
+              </div>
+            ))}
+          </div>
+          <div className="absolute inset-0 bg-foreground/35" aria-hidden="true" />
+          <div className="relative w-full max-w-[560px] rounded-[28px] bg-surface px-6 py-10 shadow-2xl sm:px-12">
+            <Link href="/" aria-label="Close" className="absolute top-5 right-5 grid size-9 place-items-center rounded-full text-foreground hover:bg-surface-muted">
+              <XIcon className="size-5" />
+            </Link>
+            <div className="mb-7 flex flex-col items-center gap-4">
+              <BrandMark />
+              <Heading title={title} subtitle={subtitle} size="text-[28px]" />
+            </div>
+            {form}
+          </div>
+        </main>
+      );
+
+    // Amber: wordmark on top, a plain bordered box, footer links under a rule.
+    case "boxed":
+      return (
+        <main className="flex min-h-dvh flex-col items-center bg-surface">
+          <div className="flex w-full flex-col items-center px-4 pt-6">
+            <Wordmark className="mb-4" />
+            <div className="w-full max-w-[400px] rounded-lg border border-border px-6 py-7 sm:px-8">
+              <h1 className="mb-5 text-[28px] leading-tight">{title}</h1>
+              {form}
+              <Legal className="mt-5" />
+            </div>
+          </div>
+          <footer className="mt-10 flex w-full flex-col items-center gap-2 border-t border-border py-6 text-xs">
+            <nav className="flex gap-4">
+              <Link className="text-link hover:underline" href={site.links.terms}>Conditions of use</Link>
+              <Link className="text-link hover:underline" href={site.links.privacy}>Privacy notice</Link>
+              <a className="text-link hover:underline" href={site.links.support}>Help</a>
+            </nav>
+            <p className="text-foreground-muted">© {new Date().getFullYear()} {site.name}</p>
+          </footer>
+        </main>
+      );
+
+    // Sky: a top bar and a bold, left-aligned heading; social sign-in first.
+    case "banner":
+      return (
+        <main className="min-h-dvh bg-surface">
+          <header className="flex items-center justify-between px-6 py-5">
+            <BrandMark />
+            <a href={site.links.support} className="rounded-[var(--button-radius)] border border-border px-4 py-2 text-sm font-medium hover:bg-surface-muted">
+              Support
+            </a>
+          </header>
+          <div className="mx-auto flex w-full max-w-[560px] flex-col gap-8 px-6 pt-6 pb-16">
+            <Heading title={title} subtitle={subtitle ?? site.tagline} align="left" size="text-4xl" />
+            {form}
+            <Legal />
+          </div>
+        </main>
+      );
+
+    // Mono: a fine grid with a soft glow behind the form, a showcase panel beside it.
+    case "showcase":
+      return (
+        <main className="grid min-h-dvh lg:grid-cols-[1.25fr_1fr]">
+          <section className="relative flex flex-col items-center overflow-hidden px-6 py-8">
+            <div
+              aria-hidden="true"
+              className="absolute inset-0 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:72px_72px] [mask-image:radial-gradient(ellipse_at_top,black_20%,transparent_70%)]"
+            />
+            <div aria-hidden="true" className="absolute -top-40 left-1/2 h-80 w-[36rem] -translate-x-1/2 rounded-full bg-[conic-gradient(from_90deg,#fde68a,#f9a8d4,#a5b4fc,#99f6e4,#fde68a)] opacity-25 blur-3xl" />
+            <Wordmark className="relative text-2xl" />
+            <div className="relative my-auto flex w-full max-w-[420px] flex-col gap-7 py-12">
+              <Heading title={title} subtitle={subtitle} size="text-2xl" />
+              {form}
+            </div>
+            <Legal className="relative max-w-[420px] text-center" />
+          </section>
+          <aside className="hidden flex-col justify-center gap-10 border-l border-border bg-surface-muted p-12 lg:flex">
+            <div className="flex flex-col gap-6 rounded-2xl bg-gradient-to-br from-foreground to-foreground/80 p-8 text-background shadow-xl">
+              <p className="text-2xl leading-snug font-semibold text-balance">&ldquo;{site.testimonial.quote}&rdquo;</p>
+              <p className="text-sm opacity-80">
+                {site.testimonial.author}, {site.testimonial.role}
+              </p>
+            </div>
+            <ul className="grid grid-cols-1 gap-3">
+              {site.highlights.map((item) => (
+                <li key={item} className="flex items-center gap-3 text-sm text-foreground-muted">
+                  <CheckIcon className="size-4 text-foreground" />
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </aside>
+        </main>
+      );
+
+    // Emerald: the form in a narrow column, a customer quote filling the rest.
+    case "quote":
+      return (
+        <main className="grid min-h-dvh lg:grid-cols-[minmax(0,560px)_1fr]">
+          <section className="flex flex-col px-8 py-8 sm:px-16">
+            <Link href="/" className="flex items-center gap-2 text-xl font-semibold">
+              <span className="grid size-7 place-items-center rounded-md bg-brand text-sm font-bold text-brand-foreground">{site.name.charAt(0).toUpperCase()}</span>
+              {site.name}
+            </Link>
+            <div className="my-auto flex w-full max-w-[400px] flex-col gap-7 py-12">
+              <Heading title={title} subtitle={subtitle} align="left" size="text-[32px]" />
+              {form}
+            </div>
+            <Legal className="max-w-[400px] text-center" />
+          </section>
+          <aside className="hidden items-center justify-center border-l border-border bg-surface-muted p-16 lg:flex">
+            <Testimonial large />
+          </aside>
+        </main>
+      );
+
+    // Default: centred and quiet; sign-up adds the highlights panel.
+    default:
+      if (page === "sign-up") {
+        return (
+          <main className="grid min-h-dvh lg:grid-cols-2">
+            <section className="flex flex-col items-center bg-surface-muted px-6 py-10">
+              <div className="my-auto flex w-full max-w-[400px] flex-col gap-8">
+                <div className="flex flex-col items-center gap-5">
+                  <BrandMark />
+                  <Heading title={title} subtitle={subtitle} />
+                </div>
+                {form}
+              </div>
+              <Legal className="max-w-[400px] text-center" />
+            </section>
+            <aside className="hidden items-center justify-center p-16 lg:flex">
+              <Highlights />
+            </aside>
+          </main>
+        );
+      }
+      return (
+        <main className="flex min-h-dvh flex-col items-center px-6 py-10">
+          <div className="my-auto flex w-full max-w-[400px] flex-col gap-8">
+            <div className="flex flex-col items-center gap-5">
+              <BrandMark />
+              <Heading title={title} subtitle={subtitle} />
+            </div>
+            {form}
+          </div>
+          <Legal className="max-w-[400px] text-center" />
+        </main>
+      );
+  }
+}

package/templates/app/components/auth/otp-input.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  /** Called once the last character is typed or pasted, so nobody taps "Continue". */
+  onComplete?: (value: string) => void;
+  length?: number;
+  label?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  /** Backup codes are letters and digits; emailed codes are digits. */
+  mode?: "numeric" | "alphanumeric";
+  id?: string;
+}
+
+/**
+ * A code box that is really one input with the cells drawn behind it.
+ *
+ * The obvious build — one input per digit — breaks paste, iOS and Android code
+ * autofill, backspace across cells and screen readers, all of which a single input
+ * gets for free from `autocomplete="one-time-code"`.
+ */
+export function OtpInput({ value, onChange, onComplete, length = 6, label = "Verification code", autoFocus, disabled, mode = "numeric", id }: Props) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const input = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
+
+  const clean = (raw: string) => (mode === "numeric" ? raw.replace(/\D/g, "") : raw.replace(/[^a-zA-Z0-9]/g, "").toUpperCase()).slice(0, length);
+
+  const handle = (raw: string) => {
+    const next = clean(raw);
+    onChange(next);
+    if (next.length === length) onComplete?.(next);
+  };
+
+  const characters = [...value];
+  // The cursor sits on the first empty cell, or the last one when it's full.
+  const cursor = Math.min(value.length, length - 1);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor={fieldId} className="sr-only">
+        {label}
+      </label>
+      <div className="relative" onClick={() => input.current?.focus()}>
+        <input
+          ref={input}
+          id={fieldId}
+          value={value}
+          onChange={(event) => handle(event.target.value)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onPaste={(event) => {
+            event.preventDefault();
+            handle(event.clipboardData.getData("text"));
+          }}
+          inputMode={mode === "numeric" ? "numeric" : "text"}
+          autoComplete="one-time-code"
+          autoCorrect="off"
+          spellCheck={false}
+          maxLength={length}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          aria-label={label}
+          // Invisible but really there, so autofill, paste and the caret all work.
+          // The right padding keeps a password manager's icon off the last cell.
+          className="absolute inset-0 h-full w-full cursor-text pr-10 text-transparent caret-transparent opacity-0 outline-none"
+        />
+        <div className="flex gap-2" aria-hidden="true">
+          {Array.from({ length }, (_, index) => {
+            const active = focused && index === cursor;
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "relative grid h-13 flex-1 place-items-center rounded-[calc(var(--radius)-2px)] border border-border bg-surface text-lg font-medium tabular-nums transition-[border-color,box-shadow]",
+                  active && "border-brand ring-[3px] ring-brand/20",
+                  disabled && "opacity-60",
+                )}
+              >
+                {characters[index] ?? ""}
+                {active && !characters[index] && <span className="absolute h-5 w-px animate-pulse bg-foreground" />}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/app/components/auth/password-field.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { CheckIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { checkPassword, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH } from "@/lib/password-rules";
+import { cn } from "@/lib/utils";
+import { AuthInput, AuthLabel } from "./ui";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+  id?: string;
+  name?: string;
+  autoComplete?: "new-password" | "current-password";
+  autoFocus?: boolean;
+  required?: boolean;
+  placeholder?: string;
+  /** Show the rules and strength as they type. Off for "your current password". */
+  showRules?: boolean;
+  /** Their name and email: a password shouldn't contain either. */
+  avoid?: (string | null | undefined)[];
+}
+
+const BAR_COLOURS = ["bg-danger", "bg-danger", "bg-warning", "bg-success/70", "bg-success"];
+
+/**
+ * A password input that says what it wants before you get it wrong: the rules and a
+ * strength reading update as you type, and the eye shows what you've typed.
+ *
+ * Only the length is enforced; everything else reads as advice (see lib/password-rules.ts).
+ */
+export function PasswordField({
+  value,
+  onChange,
+  label = "Password",
+  id,
+  name = "password",
+  autoComplete = "new-password",
+  autoFocus,
+  required = true,
+  placeholder,
+  showRules = autoComplete === "new-password",
+  avoid = [],
+}: Props) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const hintId = `${fieldId}-hint`;
+  const [visible, setVisible] = useState(false);
+  const check = useMemo(() => checkPassword(value, avoid), [value, avoid.join("\u0000")]);
+  const started = value.length > 0;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <AuthLabel htmlFor={fieldId}>{label}</AuthLabel>
+      <div className="relative">
+        <AuthInput
+          id={fieldId}
+          name={name}
+          type={visible ? "text" : "password"}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          required={required}
+          placeholder={placeholder}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          minLength={autoComplete === "new-password" ? PASSWORD_MIN_LENGTH : undefined}
+          maxLength={PASSWORD_MAX_LENGTH}
+          aria-describedby={showRules ? hintId : undefined}
+          // A styling hook, so the field can go green without any state plumbing.
+          data-has-passed-validation={showRules && check.valid ? "" : undefined}
+          className={cn("pr-11", showRules && check.valid && "border-success/60")}
+        />
+        <button
+          type="button"
+          onClick={() => setVisible(!visible)}
+          aria-pressed={visible}
+          aria-controls={fieldId}
+          aria-label={visible ? "Hide password" : "Show password"}
+          title={visible ? "Hide password" : "Show password"}
+          className="absolute inset-y-0 right-0 grid w-11 place-items-center text-foreground-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+        >
+          {visible ? <EyeOffIcon className="size-4.5" /> : <EyeIcon className="size-4.5" />}
+        </button>
+      </div>
+
+      {showRules && (
+        <div id={hintId} className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <div className="flex h-1 flex-1 gap-1" aria-hidden="true">
+              {[0, 1, 2, 3].map((step) => (
+                <span key={step} className={cn("h-full flex-1 rounded-full transition-colors", started && check.score > step ? BAR_COLOURS[check.score] : "bg-border")} />
+              ))}
+            </div>
+            <span className={cn("text-xs tabular-nums", started ? "text-foreground-muted" : "text-transparent")}>{check.label}</span>
+          </div>
+
+          {/* Announced politely: it changes on every keystroke, so it mustn't interrupt. */}
+          <ul className="flex flex-col gap-1" aria-live="polite">
+            {check.rules.map((rule) => (
+              <li key={rule.id} className={cn("flex items-center gap-2 text-xs", rule.met ? "text-success" : "text-foreground-muted")}>
+                <span className={cn("grid size-3.5 shrink-0 place-items-center rounded-full border", rule.met ? "border-success bg-success/15" : "border-border")}>
+                  {rule.met && <CheckIcon className="size-2.5" />}
+                </span>
+                {rule.label}
+                {rule.required && !rule.met && <span className="text-foreground-muted">(required)</span>}
+              </li>
+            ))}
+          </ul>
+
+          {started && check.advice && <p className="text-xs text-foreground-muted">{check.advice}</p>}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/app/components/auth/password-forms.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { checkPassword } from "@/lib/password-rules";
+import { PasswordField } from "./password-field";
+import { authErrorMessage } from "./sign-in-flow";
+import { AuthInput, AuthLabel, FormMessage, PrimaryButton } from "./ui";
+
+/** Asks for a reset link. Says the same thing whether or not the address has an account. */
+export function ForgotPasswordForm({ initialEmail }: { initialEmail: string }) {
+  const [email, setEmail] = useState(initialEmail);
+  const [pending, setPending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.requestPasswordReset({ email, redirectTo: "/reset-password" });
+    setPending(false);
+    if (error) return setError(authErrorMessage(error));
+    setSent(true);
+  };
+
+  if (sent) {
+    return <FormMessage tone="success">If {email} has an account, a reset link is on its way. It expires in 1 hour.</FormMessage>;
+  }
+  return (
+    <form className="flex flex-col gap-4" onSubmit={submit}>
+      <div className="flex flex-col gap-2">
+        <AuthLabel htmlFor="email">Email</AuthLabel>
+        <AuthInput id="email" type="email" autoComplete="email" value={email} onChange={(event) => setEmail(event.target.value)} required autoFocus />
+      </div>
+      <FormMessage>{error}</FormMessage>
+      <PrimaryButton type="submit" pending={pending}>
+        Send reset link
+      </PrimaryButton>
+    </form>
+  );
+}
+
+/** Sets the new password from the emailed link's token. */
+export function ResetPasswordForm({ token }: { token: string }) {
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const check = checkPassword(password);
+    if (!check.valid) return setError(check.advice ?? "That password is too short.");
+    if (password !== confirm) return setError("The two passwords don't match.");
+    setPending(true);
+    setError(null);
+    const { error } = await authClient.resetPassword({ newPassword: password, token });
+    setPending(false);
+    if (error) {
+      return setError(error.code === "INVALID_TOKEN" ? "This link has expired or was already used. Ask for a new one." : authErrorMessage(error));
+    }
+    window.location.href = "/sign-in?reset=1";
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={submit}>
+      <PasswordField id="password" label="New password" value={password} onChange={setPassword} autoFocus />
+      <PasswordField id="confirm" label="Confirm it" name="confirm" value={confirm} onChange={setConfirm} showRules={false} />
+      <FormMessage>{error}</FormMessage>
+      <PrimaryButton type="submit" pending={pending}>
+        Set new password
+      </PrimaryButton>
+    </form>
+  );
+}

package/templates/app/components/auth/provider-icons.tsx

@@ -0,0 +1,39 @@
+import type { SocialProvider } from "@/lib/auth-config";
+
+/** Provider marks for the social sign-in buttons (brand colours, as each provider's guidelines ask). */
+export function ProviderIcon({ provider, className = "size-5" }: { provider: SocialProvider; className?: string }) {
+  switch (provider) {
+    case "google":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z" />
+          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
+          <path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.1V7.06H2.18A11 11 0 0 0 1 12c0 1.78.43 3.45 1.18 4.94l3.66-2.84Z" />
+          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A10.97 10.97 0 0 0 12 1 11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38Z" />
+        </svg>
+      );
+    case "github":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="currentColor" d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.17c-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" />
+        </svg>
+      );
+    case "apple":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="currentColor" d="M16.37 12.64c-.03-2.6 2.13-3.86 2.23-3.92-1.22-1.78-3.11-2.02-3.78-2.05-1.6-.17-3.13.95-3.95.95-.82 0-2.07-.93-3.4-.9a5.03 5.03 0 0 0-4.25 2.58c-1.83 3.17-.47 7.84 1.3 10.4.87 1.25 1.9 2.66 3.25 2.61 1.3-.05 1.8-.84 3.38-.84 1.57 0 2.02.84 3.4.81 1.4-.02 2.29-1.27 3.15-2.53a11 11 0 0 0 1.42-2.93 4.55 4.55 0 0 1-2.75-4.18ZM13.8 5.02c.72-.88 1.2-2.09 1.07-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.25 2.01-1.09 3.19 1.15.09 2.33-.59 3.06-1.45Z" />
+        </svg>
+      );
+    case "microsoft":
+      return (
+        <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+          <path fill="#F25022" d="M2 2h9.5v9.5H2z" />
+          <path fill="#7FBA00" d="M12.5 2H22v9.5h-9.5z" />
+          <path fill="#00A4EF" d="M2 12.5h9.5V22H2z" />
+          <path fill="#FFB900" d="M12.5 12.5H22V22h-9.5z" />
+        </svg>
+      );
+  }
+}
+
+export const PROVIDER_LABELS: Record<SocialProvider, string> = { google: "Google", github: "GitHub", apple: "Apple", microsoft: "Microsoft" };