@stigmer/react 0.2.2 → 0.2.3

package/src/github/useGitHubConnection.ts

@@ -42,6 +42,52 @@ export interface GitHubConnectOptions {
   readonly popup?: boolean;
 }
 
+/**
+ * Optional configuration for {@link useGitHubConnection}.
+ *
+ * Enables desktop and non-browser environments to participate in the
+ * GitHub OAuth flow without relying on `window.open()` popups.
+ */
+export interface UseGitHubConnectionConfig {
+  /**
+   * Custom function to open the authorization URL in a browser.
+   *
+   * When provided, the hook calls this instead of `window.open()` during
+   * popup-mode `connect()` flows. This enables desktop environments
+   * (e.g. Tauri, Electron) where webview popups are blocked but the
+   * system browser is available.
+   *
+   * When used with {@link callbackUrl}, the callback page processes the
+   * token exchange and the consumer calls {@link UseGitHubConnectionReturn.reconcile}
+   * to pick up the token from the personal environment.
+   *
+   * When used without {@link callbackUrl} (e.g. localhost callback server),
+   * the consumer calls {@link UseGitHubConnectionReturn.handleCallback}
+   * with the code, state, and redirect URI to complete the exchange.
+   */
+  readonly openUrl?: (url: string) => void | Promise<void>;
+
+  /**
+   * Override the OAuth callback URL.
+   *
+   * When provided, this replaces the `redirectUri` parameter passed to
+   * `connect()` by UI components like `WorkspaceEditor`. Use this to
+   * route the GitHub callback to a specific URL — for example, the
+   * Stigmer web console's callback page for desktop flows, or a
+   * localhost server for local development.
+   *
+   * When the callback page handles the token exchange itself (cloud
+   * desktop flows), the consumer triggers re-reconciliation via
+   * {@link UseGitHubConnectionReturn.reconcile} after the callback
+   * completes externally.
+   *
+   * When the consumer handles the exchange (localhost flows), the same
+   * URL must be passed to `handleCallback()` — GitHub requires an
+   * exact match between the authorize and exchange redirect URIs.
+   */
+  readonly callbackUrl?: string;
+}
+
 /** Return value of {@link useGitHubConnection}. */
 export interface UseGitHubConnectionReturn {
   /** Whether a valid GitHub token exists. */
@@ -72,6 +118,16 @@ export interface UseGitHubConnectionReturn {
     state: string,
     redirectUri: string,
   ) => Promise<void>;
+  /**
+   * Trigger re-reconciliation from the personal environment.
+   *
+   * Call this when the token exchange was handled externally (e.g. by
+   * the Stigmer web callback page during a desktop OAuth flow) and the
+   * token is already stored server-side. The hook will refetch the
+   * personal environment, reveal the token, and update
+   * {@link isConnected}.
+   */
+  readonly reconcile: () => void;
   /** Clear the stored token and user info. */
   readonly disconnect: () => void;
 }
@@ -93,6 +149,39 @@ async function fetchGitHubUser(token: string): Promise<GitHubUser | null> {
   }
 }
 
+/**
+ * Reads the OAuth state from the opener window's sessionStorage when
+ * running inside a popup (same-origin). Falls back to the current
+ * window's sessionStorage for redirect-based flows or when the
+ * opener is unavailable.
+ */
+function getSavedOAuthState(): string | null {
+  try {
+    if (window.opener && !window.opener.closed) {
+      const openerState = window.opener.sessionStorage.getItem(
+        STORAGE_KEY_STATE,
+      );
+      if (openerState) return openerState;
+    }
+  } catch {
+    // Cross-origin or closed opener — fall through to local storage.
+  }
+  return sessionStorage.getItem(STORAGE_KEY_STATE);
+}
+
+/**
+ * Removes the OAuth state key from both the current window's and the
+ * opener's sessionStorage (best-effort).
+ */
+function clearOAuthState(): void {
+  sessionStorage.removeItem(STORAGE_KEY_STATE);
+  try {
+    window.opener?.sessionStorage?.removeItem(STORAGE_KEY_STATE);
+  } catch {
+    // Cross-origin or closed opener — ignore.
+  }
+}
+
 /**
  * Checks whether the personal environment's redacted data contains a given key.
  * The key is present even when the value is redacted (`***REDACTED***`).
@@ -127,6 +216,8 @@ function personalEnvHasKey(
  *
  * @param org - The active organization slug. Required for server-side
  *   token storage. Pass `null` to skip all server operations.
+ * @param config - Optional configuration for desktop / non-browser
+ *   environments. See {@link UseGitHubConnectionConfig}.
  *
  * @example
  * ```tsx
@@ -155,9 +246,23 @@ function personalEnvHasKey(
  *   );
  * }
  * ```
+ *
+ * @example Desktop (Tauri) — open in system browser, callback via deep link
+ * ```tsx
+ * function DesktopGitHubConnect({ org }: { org: string }) {
+ *   const gh = useGitHubConnection(org, {
+ *     openUrl: (url) => invoke("open_auth_in_browser", { authUrl: url }),
+ *     callbackUrl: "https://app.stigmer.ai/auth/github/callback?source=desktop",
+ *   });
+ *   // The web callback page processes the exchange, then redirects to
+ *   // stigmer://github/callback-done. The desktop deep link handler
+ *   // calls gh.reconcile() to pick up the token.
+ * }
+ * ```
  */
 export function useGitHubConnection(
   org: string | null,
+  config?: UseGitHubConnectionConfig,
 ): UseGitHubConnectionReturn {
   const stigmer = useStigmer();
   const [token, setToken] = useState<string | null>(null);
@@ -287,8 +392,12 @@ export function useGitHubConnection(
 
   const connect = useCallback(
     async (redirectUri: string, options?: GitHubConnectOptions) => {
+      const effectiveRedirectUri = config?.callbackUrl ?? redirectUri;
+
       const { authorizeUrl, state } =
-        await stigmer.github.getOAuthAuthorizeUrl({ redirectUri });
+        await stigmer.github.getOAuthAuthorizeUrl({
+          redirectUri: effectiveRedirectUri,
+        });
 
       sessionStorage.setItem(STORAGE_KEY_STATE, state);
 
@@ -297,7 +406,18 @@ export function useGitHubConnection(
         return;
       }
 
-      // If a popup is already open, bring it to focus.
+      // ── External opener (desktop / non-browser) ─────────────────────
+      // When `config.openUrl` is provided, delegate to the consumer
+      // instead of using `window.open()`. The consumer is responsible
+      // for delivering the callback data via `handleCallback()` or
+      // triggering re-reconciliation via `reconcile()`.
+      if (config?.openUrl) {
+        setIsConnecting(true);
+        await config.openUrl(authorizeUrl);
+        return;
+      }
+
+      // ── Browser popup ───────────────────────────────────────────────
       if (popupRef.current && !popupRef.current.closed) {
         popupRef.current.focus();
         return;
@@ -327,43 +447,62 @@ export function useGitHubConnection(
           popupPollRef.current = null;
           popupRef.current = null;
           setIsConnecting(false);
+
+          // The callback page may have exchanged the code and stored
+          // the token server-side (e.g. cross-origin popup flow for
+          // platform builders). Re-reconcile from the personal
+          // environment to pick up the token.
+          setIsLoading(true);
+          reconciled.current = false;
+          personalEnvRef.current.refetch();
         }
       }, POPUP_CLOSE_POLL_MS);
       popupPollRef.current = pollId;
     },
-    [stigmer],
+    [stigmer, config?.openUrl, config?.callbackUrl],
   );
 
   const handleCallback = useCallback(
     async (code: string, state: string, redirectUri: string) => {
-      const savedState = sessionStorage.getItem(STORAGE_KEY_STATE);
+      const savedState = getSavedOAuthState();
       if (savedState && savedState !== state) {
         throw new Error("OAuth state mismatch — possible CSRF attack");
       }
-      sessionStorage.removeItem(STORAGE_KEY_STATE);
-
-      const { accessToken } = await stigmer.github.exchangeOAuthCode({
-        code,
-        state,
-        redirectUri,
-      });
-
-      const tokenVar = {
-        [GITHUB_TOKEN_KEY]: { value: accessToken, isSecret: true },
-      };
-      const env = await personalEnvRef.current.getOrCreate(tokenVar);
-      if (!personalEnvHasKey(env, GITHUB_TOKEN_KEY)) {
-        await personalEnvRef.current.addVariables(tokenVar);
-      }
+      clearOAuthState();
 
-      setToken(accessToken);
+      try {
+        const { accessToken } = await stigmer.github.exchangeOAuthCode({
+          code,
+          state,
+          redirectUri,
+        });
+
+        const tokenVar = {
+          [GITHUB_TOKEN_KEY]: { value: accessToken, isSecret: true },
+        };
+        const env = await personalEnvRef.current.getOrCreate(tokenVar);
+        if (!personalEnvHasKey(env, GITHUB_TOKEN_KEY)) {
+          await personalEnvRef.current.addVariables(tokenVar);
+        }
 
-      const u = await fetchGitHubUser(accessToken);
-      setUser(u);
+        setToken(accessToken);
+
+        const u = await fetchGitHubUser(accessToken);
+        setUser(u);
+      } finally {
+        setIsConnecting(false);
+      }
     },
     [stigmer],
   );
 
+  const reconcile = useCallback(() => {
+    setIsConnecting(false);
+    setIsLoading(true);
+    reconciled.current = false;
+    personalEnvRef.current.refetch();
+  }, []);
+
   const disconnect = useCallback(() => {
     sessionStorage.removeItem(STORAGE_KEY_STATE);
     setToken(null);
@@ -396,6 +535,7 @@ export function useGitHubConnection(
     token,
     connect,
     handleCallback,
+    reconcile,
     disconnect,
   };
 }

package/src/identity-provider/IdentityProviderWizard.tsx

@@ -26,7 +26,7 @@ export interface IdentityProviderWizardProps {
   readonly className?: string;
 }
 
-type WizardStep = "pick" | "configure" | "review";
+type WizardStep = "pick" | "configure" | "review" | "success";
 
 /**
  * Multi-step wizard for creating a new identity provider.
@@ -88,6 +88,9 @@ export function IdentityProviderWizard({
   const [autoGrantRole, setAutoGrantRole] = useState<IamRole>(IamRole.iam_role_unspecified);
   const [tenantOrgClaim, setTenantOrgClaim] = useState("");
 
+  // Success step
+  const [createdIdp, setCreatedIdp] = useState<IdentityProvider | null>(null);
+
   // -- Step transitions ------------------------------------------------
 
   const handlePickProvider = useCallback((selected: ProviderPreset) => {
@@ -186,7 +189,8 @@ export function IdentityProviderWizard({
             }),
           }),
         });
-        onCreated?.(idp);
+        setCreatedIdp(idp);
+        setStep("success");
       } catch {
         // error state is managed by useCreateIdentityProvider
       }
@@ -194,7 +198,7 @@ export function IdentityProviderWizard({
     [
       name, org, jwksUri, issuers, audience, userinfoEndpoint,
       isSso, oidcClientId, autoProvision, autoGrant, autoGrantRole,
-      tenantOrgClaim, create, clearError, onCreated,
+      tenantOrgClaim, create, clearError,
     ],
   );
 
@@ -267,6 +271,18 @@ export function IdentityProviderWizard({
           onCancel={onCancel}
         />
       )}
+
+      {step === "success" && createdIdp && (
+        <SuccessStep
+          identityProvider={createdIdp}
+          org={org}
+          isSso={isSso}
+          autoProvision={autoProvision}
+          autoGrant={autoGrant}
+          autoGrantRole={autoGrantRole}
+          onDone={() => onCreated?.(createdIdp)}
+        />
+      )}
     </div>
   );
 }
@@ -279,6 +295,7 @@ const STEPS: { key: WizardStep; label: string }[] = [
   { key: "pick", label: "Provider" },
   { key: "configure", label: "Configure" },
   { key: "review", label: "Review" },
+  { key: "success", label: "Done" },
 ];
 
 function StepIndicator({ current }: { current: WizardStep }) {
@@ -608,6 +625,98 @@ function ReviewStep({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Success step (step 4)
+// ---------------------------------------------------------------------------
+
+function SuccessStep({
+  identityProvider,
+  org,
+  isSso,
+  autoProvision,
+  autoGrant,
+  autoGrantRole,
+  onDone,
+}: {
+  identityProvider: IdentityProvider;
+  org: string;
+  isSso: boolean;
+  autoProvision: boolean;
+  autoGrant: boolean;
+  autoGrantRole: IamRole;
+  onDone: () => void;
+}) {
+  const displayName =
+    identityProvider.spec?.displayName ||
+    identityProvider.metadata?.name ||
+    "Identity provider";
+
+  const roleName =
+    autoGrantRole !== IamRole.iam_role_unspecified
+      ? IamRole[autoGrantRole]
+      : "viewer";
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border border-primary/30 bg-primary-subtle px-3 py-2.5">
+        <p className="text-xs font-medium text-foreground">
+          {displayName} created successfully
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <p className="text-xs font-medium text-foreground">What happens next</p>
+
+        {isSso ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Users can sign in via SSO at{" "}
+            <span className="font-mono text-foreground">
+              /login?org={org}
+            </span>
+            . Accounts are auto-provisioned and granted the{" "}
+            <span className="font-medium text-foreground">viewer</span> role on
+            this organization.
+          </p>
+        ) : autoProvision && autoGrant ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Users authenticating with JWTs from this provider will be
+            automatically provisioned and granted the{" "}
+            <span className="font-medium text-foreground">{roleName}</span> role
+            on this organization. No additional setup is required.
+          </p>
+        ) : autoProvision ? (
+          <p className="text-[0.65rem] text-muted-foreground">
+            Accounts are auto-provisioned on first authentication, but no
+            organization role is granted automatically. Use the Members page to
+            grant access.
+          </p>
+        ) : (
+          <p className="text-[0.65rem] text-muted-foreground">
+            The trust relationship is configured. Accounts must be created
+            manually before users can authenticate.
+          </p>
+        )}
+
+        <p className="text-[0.65rem] text-muted-foreground">
+          To verify the setup, have a user authenticate with a JWT from this
+          provider and confirm they can access the organization&apos;s resources.
+        </p>
+      </div>
+
+      <button
+        type="button"
+        onClick={onDone}
+        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-hover",
+        )}
+      >
+        Done
+      </button>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Shared primitives
 // ---------------------------------------------------------------------------

package/src/index.ts

@@ -315,6 +315,7 @@ export {
 export type {
   GitHubUser,
   GitHubConnectOptions,
+  UseGitHubConnectionConfig,
   UseGitHubConnectionReturn,
   GitHubRepo,
   GitHubBranch,

package/src/organization/OrgProfilePanel.tsx

@@ -12,6 +12,8 @@ import { getUserMessage } from "@stigmer/sdk";
 import type { Organization } from "@stigmer/protos/ai/stigmer/tenancy/organization/v1/api_pb";
 import { useOrganization } from "./useOrganization";
 import { useUpdateOrganization } from "./useUpdateOrganization";
+import { useIdentityProviderList } from "../identity-provider/useIdentityProviderList";
+import { useResourceAvailable, ApiResourceKind } from "../deployment-mode";
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -338,10 +340,106 @@ export function OrgProfilePanel({
           </button>
         )}
       </div>
+
+      {/* -- Identity Providers summary -- */}
+      <IdentityProvidersSummary orgSlug={serverSlug} />
     </form>
   );
 }
 
+// ---------------------------------------------------------------------------
+// IdentityProvidersSummary — shows linked IDPs on the org profile
+// ---------------------------------------------------------------------------
+
+function IdentityProvidersSummary({ orgSlug }: { orgSlug: string }) {
+  const idpAvailable = useResourceAvailable(ApiResourceKind.identity_provider);
+  const { identityProviders, isLoading } = useIdentityProviderList(
+    idpAvailable && orgSlug ? orgSlug : null,
+  );
+
+  if (!idpAvailable || !orgSlug) return null;
+
+  return (
+    <>
+      <hr className="border-border" />
+      <div className="space-y-2">
+        <p className="text-[0.65rem] font-medium text-muted-foreground uppercase tracking-wider">
+          Identity Providers
+        </p>
+
+        {isLoading ? (
+          <div className="bg-muted-subtle h-8 animate-pulse rounded" />
+        ) : identityProviders.length === 0 ? (
+          <p className="text-xs text-muted-foreground">
+            No identity providers configured.{" "}
+            <a
+              href="/settings/identity-providers"
+              className="text-primary hover:text-primary-hover underline underline-offset-2"
+            >
+              Set up federated authentication
+            </a>
+          </p>
+        ) : (
+          <div className="space-y-1.5">
+            {identityProviders.map((idp) => {
+              const spec = idp.spec;
+              const displayName =
+                spec?.displayName || idp.metadata?.name || "Unnamed";
+              const isSso = spec?.isSsoProvider;
+              const isJit = !isSso && spec?.autoProvisionAccounts;
+
+              return (
+                <div
+                  key={idp.metadata?.id}
+                  className="flex items-center gap-2 text-xs"
+                >
+                  <ShieldSmallIcon />
+                  <span className="text-foreground truncate">{displayName}</span>
+                  {isSso && (
+                    <span className="rounded-full border border-primary/30 bg-primary-subtle px-1.5 py-px text-[0.6rem] font-medium text-primary">
+                      SSO
+                    </span>
+                  )}
+                  {isJit && (
+                    <span className="rounded-full border border-primary/30 bg-primary-subtle px-1.5 py-px text-[0.6rem] font-medium text-primary">
+                      JIT
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+            <a
+              href="/settings/identity-providers"
+              className="inline-block text-[0.65rem] text-primary hover:text-primary-hover underline underline-offset-2"
+            >
+              Manage
+            </a>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function ShieldSmallIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="shrink-0 text-muted-foreground"
+    >
+      <path d="M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // ReadOnlyField — copiable label/value pair
 // ---------------------------------------------------------------------------