@stigmer/react 0.0.71 → 0.0.73

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -0,0 +1,684 @@
+"use client";
+
+import {
+  useCallback,
+  useState,
+  type FormEvent,
+} from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
+import { ProviderPicker } from "./ProviderPicker";
+import { useCreateIdentityProvider } from "./useCreateIdentityProvider";
+import { useOidcDiscovery } from "./useOidcDiscovery";
+import type { ProviderPreset, ProviderConfig } from "./presets";
+
+/** Props for {@link IdentityProviderWizard}. */
+export interface IdentityProviderWizardProps {
+  /** Organization slug — the IdP will be created in this org. */
+  readonly org: string;
+  /** Fired with the newly created identity provider on success. */
+  readonly onCreated?: (idp: IdentityProvider) => void;
+  /** Fired when the user cancels the wizard. */
+  readonly onCancel?: () => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+type WizardStep = "pick" | "configure" | "review";
+
+/**
+ * Multi-step wizard for creating a new identity provider.
+ *
+ * Guides the user through three steps:
+ *
+ * 1. **Pick** — select a well-known provider preset or "Custom OIDC"
+ * 2. **Configure** — fill in provider-specific variables (e.g., Auth0
+ *    tenant name) plus the IdP display name and expected audience
+ * 3. **Review** — verify auto-populated OIDC configuration, optionally
+ *    enable SSO, and submit
+ *
+ * For known presets, URLs are constructed from deterministic templates
+ * (no network call). For "Custom OIDC", the wizard attempts OIDC
+ * Discovery and falls back to manual entry if the fetch fails.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <IdentityProviderWizard
+ *   org="acme"
+ *   onCreated={(idp) => { refetch(); setShowWizard(false); }}
+ *   onCancel={() => setShowWizard(false)}
+ * />
+ * ```
+ */
+export function IdentityProviderWizard({
+  org,
+  onCreated,
+  onCancel,
+  className,
+}: IdentityProviderWizardProps) {
+  const { create, isCreating, error: createError, clearError } =
+    useCreateIdentityProvider();
+  const { discover, isDiscovering, error: discoveryError } =
+    useOidcDiscovery();
+
+  // Step state
+  const [step, setStep] = useState<WizardStep>("pick");
+  const [preset, setPreset] = useState<ProviderPreset | null>(null);
+
+  // Configure step
+  const [vars, setVars] = useState<Record<string, string>>({});
+  const [name, setName] = useState("");
+  const [audience, setAudience] = useState("");
+
+  // Review step
+  const [jwksUri, setJwksUri] = useState("");
+  const [issuers, setIssuers] = useState("");
+  const [userinfoEndpoint, setUserinfoEndpoint] = useState("");
+  const [isSso, setIsSso] = useState(false);
+  const [oidcClientId, setOidcClientId] = useState("");
+  const [discoveryFailed, setDiscoveryFailed] = useState(false);
+
+  // -- Step transitions ------------------------------------------------
+
+  const handlePickProvider = useCallback((selected: ProviderPreset) => {
+    setPreset(selected);
+    setVars(
+      Object.fromEntries(selected.variables.map((v) => [v.key, v.options?.[0]?.value ?? ""])),
+    );
+    setName("");
+    setAudience("");
+    setStep("configure");
+  }, []);
+
+  const handleBackToPick = useCallback(() => {
+    setStep("pick");
+    setPreset(null);
+  }, []);
+
+  const populateReview = useCallback((config: ProviderConfig | null) => {
+    setJwksUri(config?.jwksUri ?? "");
+    setIssuers(config?.allowedIssuers.join(", ") ?? "");
+    setUserinfoEndpoint(config?.userinfoEndpoint ?? "");
+    setIsSso(false);
+    setOidcClientId("");
+    setDiscoveryFailed(!config);
+  }, []);
+
+  const handleContinueToReview = useCallback(async () => {
+    if (!preset) return;
+
+    if (preset.id === "custom") {
+      const result = await discover(vars.issuerUrl ?? "");
+      populateReview(
+        result
+          ? { ...result, allowedIssuers: [result.issuer] }
+          : null,
+      );
+    } else {
+      populateReview(preset.buildConfig(vars));
+    }
+    setStep("review");
+  }, [preset, vars, discover, populateReview]);
+
+  const handleBackToConfigure = useCallback(() => {
+    setStep("configure");
+    clearError();
+  }, [clearError]);
+
+  // -- Submit ----------------------------------------------------------
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      clearError();
+      try {
+        const idp = await create({
+          name: name.trim(),
+          org,
+          displayName: name.trim(),
+          jwksUri: jwksUri.trim(),
+          allowedIssuers: issuers
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean),
+          expectedAudience: audience.trim(),
+          userinfoEndpoint: userinfoEndpoint.trim() || undefined,
+          ...(isSso && {
+            isSsoProvider: true,
+            oidcClientId: oidcClientId.trim(),
+          }),
+        });
+        onCreated?.(idp);
+      } catch {
+        // error state is managed by useCreateIdentityProvider
+      }
+    },
+    [
+      name, org, jwksUri, issuers, audience, userinfoEndpoint,
+      isSso, oidcClientId, create, clearError, onCreated,
+    ],
+  );
+
+  // -- Render ----------------------------------------------------------
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Step indicator */}
+      <StepIndicator current={step} />
+
+      {step === "pick" && (
+        <>
+          <p className="text-muted-foreground text-xs">
+            Choose your identity provider to get started. Known providers
+            will have their OIDC configuration auto-populated.
+          </p>
+          <ProviderPicker onSelect={handlePickProvider} />
+          {onCancel && (
+            <div className="pt-1">
+              <CancelButton onClick={onCancel} />
+            </div>
+          )}
+        </>
+      )}
+
+      {step === "configure" && preset && (
+        <ConfigureStep
+          preset={preset}
+          vars={vars}
+          onVarChange={(key, value) =>
+            setVars((prev) => ({ ...prev, [key]: value }))
+          }
+          name={name}
+          onNameChange={setName}
+          audience={audience}
+          onAudienceChange={setAudience}
+          isLoading={isDiscovering}
+          discoveryError={discoveryError}
+          onBack={handleBackToPick}
+          onContinue={handleContinueToReview}
+          onCancel={onCancel}
+        />
+      )}
+
+      {step === "review" && (
+        <ReviewStep
+          discoveryFailed={discoveryFailed}
+          jwksUri={jwksUri}
+          onJwksUriChange={setJwksUri}
+          issuers={issuers}
+          onIssuersChange={setIssuers}
+          userinfoEndpoint={userinfoEndpoint}
+          onUserinfoEndpointChange={setUserinfoEndpoint}
+          isSso={isSso}
+          onIsSsoChange={setIsSso}
+          oidcClientId={oidcClientId}
+          onOidcClientIdChange={setOidcClientId}
+          isCreating={isCreating}
+          createError={createError}
+          onBack={handleBackToConfigure}
+          onSubmit={handleSubmit}
+          onCancel={onCancel}
+        />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step indicator
+// ---------------------------------------------------------------------------
+
+const STEPS: { key: WizardStep; label: string }[] = [
+  { key: "pick", label: "Provider" },
+  { key: "configure", label: "Configure" },
+  { key: "review", label: "Review" },
+];
+
+function StepIndicator({ current }: { current: WizardStep }) {
+  const currentIdx = STEPS.findIndex((s) => s.key === current);
+  return (
+    <nav aria-label="Wizard progress" className="flex items-center gap-1.5">
+      {STEPS.map((s, i) => {
+        const state =
+          i < currentIdx ? "done" : i === currentIdx ? "active" : "upcoming";
+        return (
+          <span key={s.key} className="flex items-center gap-1.5">
+            {i > 0 && (
+              <span
+                className={cn(
+                  "h-px w-4",
+                  state === "upcoming" ? "bg-border" : "bg-primary/40",
+                )}
+              />
+            )}
+            <span
+              className={cn(
+                "text-[0.65rem] font-medium",
+                state === "active"
+                  ? "text-primary"
+                  : state === "done"
+                    ? "text-muted-foreground"
+                    : "text-muted-foreground/50",
+              )}
+            >
+              {s.label}
+            </span>
+          </span>
+        );
+      })}
+    </nav>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Configure step (step 2)
+// ---------------------------------------------------------------------------
+
+function ConfigureStep({
+  preset,
+  vars,
+  onVarChange,
+  name,
+  onNameChange,
+  audience,
+  onAudienceChange,
+  isLoading,
+  discoveryError,
+  onBack,
+  onContinue,
+  onCancel,
+}: {
+  preset: ProviderPreset;
+  vars: Record<string, string>;
+  onVarChange: (key: string, value: string) => void;
+  name: string;
+  onNameChange: (v: string) => void;
+  audience: string;
+  onAudienceChange: (v: string) => void;
+  isLoading: boolean;
+  discoveryError: Error | null;
+  onBack: () => void;
+  onContinue: () => void;
+  onCancel?: () => void;
+}) {
+  const allVarsFilled = preset.variables.every(
+    (v) => (vars[v.key] ?? "").trim() !== "",
+  );
+  const canContinue =
+    allVarsFilled &&
+    name.trim() !== "" &&
+    audience.trim() !== "" &&
+    !isLoading;
+
+  return (
+    <div className="space-y-3">
+      <p className="text-muted-foreground text-xs">
+        {preset.variables.length > 0
+          ? `Enter your ${preset.label} details to auto-populate the OIDC configuration.`
+          : `${preset.label} configuration is fully automatic — just provide a name and audience.`}
+      </p>
+
+      {/* Provider-specific variables */}
+      {preset.variables.map((v) => (
+        <FieldInput
+          key={v.key}
+          id={`stgm-idp-var-${v.key}`}
+          label={v.label}
+          value={vars[v.key] ?? ""}
+          onChange={(val) => onVarChange(v.key, val)}
+          placeholder={v.placeholder}
+          hint={v.hint}
+          disabled={isLoading}
+          type={v.type}
+          options={v.options}
+        />
+      ))}
+
+      <hr className="border-border/40" />
+
+      {/* Common fields */}
+      <FieldInput
+        id="stgm-idp-wiz-name"
+        label="Display name"
+        value={name}
+        onChange={onNameChange}
+        placeholder="e.g., Acme Corp SSO"
+        hint="Human-readable name shown in the UI"
+        disabled={isLoading}
+      />
+
+      <FieldInput
+        id="stgm-idp-wiz-audience"
+        label="Expected audience"
+        value={audience}
+        onChange={onAudienceChange}
+        placeholder="stigmer-api"
+        hint="The aud claim value expected in JWTs from this provider"
+        disabled={isLoading}
+      />
+
+      {discoveryError && (
+        <p className="text-destructive text-[0.65rem]" role="alert">
+          {getUserMessage(discoveryError)}
+        </p>
+      )}
+
+      <div className="flex items-center gap-2 pt-1">
+        <button
+          type="button"
+          onClick={onContinue}
+          disabled={!canContinue}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "disabled:pointer-events-none disabled:opacity-40",
+          )}
+        >
+          {isLoading && <SpinnerIcon />}
+          Continue
+        </button>
+        <TextButton onClick={onBack} disabled={isLoading}>
+          Back
+        </TextButton>
+        {onCancel && (
+          <CancelButton onClick={onCancel} disabled={isLoading} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Review step (step 3)
+// ---------------------------------------------------------------------------
+
+function ReviewStep({
+  discoveryFailed,
+  jwksUri,
+  onJwksUriChange,
+  issuers,
+  onIssuersChange,
+  userinfoEndpoint,
+  onUserinfoEndpointChange,
+  isSso,
+  onIsSsoChange,
+  oidcClientId,
+  onOidcClientIdChange,
+  isCreating,
+  createError,
+  onBack,
+  onSubmit,
+  onCancel,
+}: {
+  discoveryFailed: boolean;
+  jwksUri: string;
+  onJwksUriChange: (v: string) => void;
+  issuers: string;
+  onIssuersChange: (v: string) => void;
+  userinfoEndpoint: string;
+  onUserinfoEndpointChange: (v: string) => void;
+  isSso: boolean;
+  onIsSsoChange: (v: boolean) => void;
+  oidcClientId: string;
+  onOidcClientIdChange: (v: string) => void;
+  isCreating: boolean;
+  createError: Error | null;
+  onBack: () => void;
+  onSubmit: (e: FormEvent) => void;
+  onCancel?: () => void;
+}) {
+  const canSubmit =
+    jwksUri.trim() !== "" &&
+    issuers.trim() !== "" &&
+    (!isSso || oidcClientId.trim() !== "") &&
+    !isCreating;
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      {discoveryFailed && (
+        <div
+          className="rounded-md border border-warning/30 bg-warning/5 px-3 py-2 text-xs text-warning-foreground"
+          role="alert"
+        >
+          Auto-discovery could not reach the provider. Enter the
+          configuration manually below.
+        </div>
+      )}
+
+      <p className="text-muted-foreground text-xs">
+        Review the OIDC configuration. All fields are editable.
+      </p>
+
+      <FieldInput
+        id="stgm-idp-wiz-jwks"
+        label="JWKS URI"
+        value={jwksUri}
+        onChange={onJwksUriChange}
+        placeholder="https://example.com/.well-known/jwks.json"
+        disabled={isCreating}
+        required
+      />
+
+      <FieldInput
+        id="stgm-idp-wiz-issuers"
+        label="Allowed issuers"
+        value={issuers}
+        onChange={onIssuersChange}
+        placeholder="https://issuer.example.com/"
+        hint="Comma-separated list of trusted JWT issuer values"
+        disabled={isCreating}
+        required
+      />
+
+      <FieldInput
+        id="stgm-idp-wiz-userinfo"
+        label="Userinfo endpoint"
+        value={userinfoEndpoint}
+        onChange={onUserinfoEndpointChange}
+        placeholder="https://example.com/userinfo"
+        hint="Optional — used to fetch user profile data during token exchange"
+        disabled={isCreating}
+      />
+
+      {/* SSO toggle */}
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          role="switch"
+          aria-checked={isSso}
+          onClick={() => onIsSsoChange(!isSso)}
+          disabled={isCreating}
+          className={cn(
+            "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
+            isSso ? "bg-primary" : "bg-muted",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          <span
+            className={cn(
+              "pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
+              isSso ? "translate-x-4" : "translate-x-0",
+            )}
+          />
+        </button>
+        <span className="text-xs font-medium text-foreground">
+          SSO provider
+        </span>
+      </div>
+
+      {isSso && (
+        <FieldInput
+          id="stgm-idp-wiz-client-id"
+          label="OIDC client ID"
+          value={oidcClientId}
+          onChange={onOidcClientIdChange}
+          placeholder="public-client-id"
+          hint="Client ID for the PKCE-based Authorization Code flow"
+          disabled={isCreating}
+          required
+        />
+      )}
+
+      {createError && (
+        <p className="text-destructive text-[0.65rem]" role="alert">
+          {getUserMessage(createError)}
+        </p>
+      )}
+
+      <div className="flex items-center gap-2 pt-1">
+        <button
+          type="submit"
+          disabled={!canSubmit}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "disabled:pointer-events-none disabled:opacity-40",
+          )}
+        >
+          {isCreating && <SpinnerIcon />}
+          Create identity provider
+        </button>
+        <TextButton onClick={onBack} disabled={isCreating}>
+          Back
+        </TextButton>
+        {onCancel && (
+          <CancelButton onClick={onCancel} disabled={isCreating} />
+        )}
+      </div>
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared primitives
+// ---------------------------------------------------------------------------
+
+function FieldInput({
+  id,
+  label,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  disabled,
+  required,
+  type = "text",
+  options,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  hint?: string;
+  disabled?: boolean;
+  required?: boolean;
+  type?: "text" | "select";
+  options?: readonly { readonly value: string; readonly label: string }[];
+}) {
+  return (
+    <div className="space-y-1">
+      <label htmlFor={id} className="text-xs font-medium text-foreground">
+        {label}
+      </label>
+      {type === "select" && options ? (
+        <select
+          id={id}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          className={cn(
+            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      ) : (
+        <input
+          id={id}
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          className={cn(
+            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        />
+      )}
+      {hint && (
+        <p className="text-[0.65rem] text-muted-foreground">{hint}</p>
+      )}
+    </div>
+  );
+}
+
+function TextButton({
+  onClick,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "rounded-md px-2.5 py-1.5 text-xs",
+        "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function CancelButton({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <TextButton onClick={onClick} disabled={disabled}>
+      Cancel
+    </TextButton>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}