@workos-inc/widgets 1.20.0-next.1791237372282 → 1.20.0

package/CHANGELOG.md

@@ -1,11 +1,13 @@
 # Changelog
 
-## 1.20.0-next.1791237372282
+## 1.20.0
 
 ### Minor Changes
 
 - Prepare the sectioned `<Pipes>` and `<PipesAdmin>` experiences (`enableSharedConnections`) for multiple connections per provider. Nothing changes until multiple connections are enabled for your environment; until then each provider keeps its single connection and looks as it did before. Once enabled, a provider with several connections renders as a group with one row per connection, oldest first, each with its own status and actions. "Add connection" and "Connect another account" add one (asking for an optional name) when the API reports it available, and connections can be renamed. Repairs target the exact connection, and adds are retry-safe.
 
+- Add the optional PipesAdmin `userId` prop for attributing shared API-key and client-credentials writes with application credential tokens. User sessions send their authenticated user automatically. Block missing actors and mismatched session actors with configuration guidance instead of actor-entry UI. Application-token hosts must supply an acting WorkOS user before upgrading; publish only after the API accepts attribution.
+
 - Surface data integration connection failures in the Pipes widget
 
   When an OAuth handoff popup fails or closes without completing, the widget now

package/README.md

@@ -3,3 +3,47 @@
 A suite of React components providing functionality for enterprise app workflows.
 
 [Read the documentation](https://workos.com/docs/widgets)
+
+## Shared Pipes credentials
+
+`PipesAdmin` defaults to provider settings only. Opt in to shared connections
+with `enableSharedConnections`. User-backed widget sessions and AuthKit user
+access tokens attribute shared API-key and client-credentials writes to the
+signed-in user without any new host prop.
+
+Hosts using an application credential token must pass the acting person's
+WorkOS user ID programmatically when connecting, rotating, or repairing shared
+credentials:
+
+```tsx
+<PipesAdmin
+  authToken={applicationCredentialToken}
+  enableSharedConnections
+  userId={authenticatedWorkOsUser.id}
+/>
+```
+
+Source `authenticatedWorkOsUser.id` from the host's authenticated user context
+or an existing mapping to that WorkOS user (`user_...`), not an arbitrary
+application-local ID or the credential token's subject. `userId` is an optional
+React prop, never a rendered field or member picker. A missing actor blocks
+these shared credential writes with configuration guidance, while reads,
+provider configuration, and OAuth flows remain available. User-session hosts
+should omit the prop; a different ID is rejected. Standalone widget sessions
+cannot supply an actor through this prop.
+
+An authorized application caller asserts whom it acts on behalf of. Passing
+`userId` does not authenticate that person or grant write access: the API still
+validates permissions, identity, and active membership of the token-scoped
+organization. If there is no acting person, do not fabricate one; machine-managed
+credentials require separate policy support.
+
+### Upgrade and rollout
+
+Before upgrading application-token hosts, supply `userId` from their authenticated
+user context for shared credential actions. User-session hosts require no changes.
+Publish this widget change only after the deployed Widgets GraphQL API accepts
+`userId` on both organization credential inputs (PVIT-1079). Subsequent server-side
+required-actor enforcement (PVIT-1081) also requires operator confirmation of the
+affected hosts' upgrade and communication plan; publication alone does not prove
+adoption.

package/dist/cjs/api/claims.cjs

@@ -1,9 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/api/claims.ts
+function getAuthenticatedUserId(claims) {
+	return (claims.sub_profile === void 0 || claims.sub_profile === "user") && (claims.sub_type === "authkit" || claims.sub_type === void 0 && !!claims.sid && typeof claims.auth_time === "number") && claims.sub?.startsWith("user_") ? claims.sub : void 0;
+}
 function getClaims(accessToken) {
 	return JSON.parse(atob(accessToken.split(".")[1]));
 }
 //#endregion
+exports.getAuthenticatedUserId = getAuthenticatedUserId;
 exports.getClaims = getClaims;
 
 //# sourceMappingURL=claims.cjs.map

package/dist/cjs/api/claims.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"claims.cjs","names":[],"sources":["../../../src/api/claims.ts"],"sourcesContent":["interface Claims {\n  sid: string;\n  permissions?: string[];\n  exp?: number;\n}\n\nexport function getClaims(accessToken: string): Claims {\n  return JSON.parse(atob(accessToken.split(\".\")[1]));\n}\n"],"mappings":";;AAMA,SAAgB,UAAU,aAA6B;CACrD,OAAO,KAAK,MAAM,KAAK,YAAY,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;AACnD"}
+{"version":3,"file":"claims.cjs","names":[],"sources":["../../../src/api/claims.ts"],"sourcesContent":["interface Claims {\n  sid?: string;\n  sub?: string;\n  sub_type?: string;\n  sub_profile?: string;\n  auth_time?: number;\n  permissions?: string[];\n  exp?: number;\n}\n\nexport function getAuthenticatedUserId(claims: Claims): string | undefined {\n  const isUserSession =\n    (claims.sub_profile === undefined || claims.sub_profile === \"user\") &&\n    (claims.sub_type === \"authkit\" ||\n      (claims.sub_type === undefined &&\n        !!claims.sid &&\n        typeof claims.auth_time === \"number\"));\n\n  return isUserSession && claims.sub?.startsWith(\"user_\")\n    ? claims.sub\n    : undefined;\n}\n\nexport function getClaims(accessToken: string): Claims {\n  return JSON.parse(atob(accessToken.split(\".\")[1]));\n}\n"],"mappings":";;AAUA,SAAgB,uBAAuB,QAAoC;CAQzE,QANG,OAAO,gBAAgB,UAAa,OAAO,gBAAgB,YAC3D,OAAO,aAAa,aAClB,OAAO,aAAa,UACnB,CAAC,CAAC,OAAO,OACT,OAAO,OAAO,cAAc,aAEV,OAAO,KAAK,WAAW,OAAO,IAClD,OAAO,MACP;AACN;AAEA,SAAgB,UAAU,aAA6B;CACrD,OAAO,KAAK,MAAM,KAAK,YAAY,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;AACnD"}

package/dist/cjs/api/claims.d.cts

@@ -1,9 +1,14 @@
 //#region src/api/claims.d.ts
 interface Claims {
-  sid: string;
+  sid?: string;
+  sub?: string;
+  sub_type?: string;
+  sub_profile?: string;
+  auth_time?: number;
   permissions?: string[];
   exp?: number;
 }
+export declare function getAuthenticatedUserId(claims: Claims): string | undefined;
 export declare function getClaims(accessToken: string): Claims;
 //#endregion
 //# sourceMappingURL=claims.d.cts.map

package/dist/cjs/lib/pipes-credential-attribution.cjs

@@ -0,0 +1,33 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_lib_i18n_use_translation = require("./i18n/use-translation.cjs");
+const require_api_claims = require("../api/claims.cjs");
+const require_api_api_provider = require("../api/api-provider.cjs");
+let react = require("react");
+//#region src/lib/pipes-credential-attribution.tsx
+const PipesCredentialUserIdContext = (0, react.createContext)(void 0);
+function usePipesCredentialAttribution() {
+	const hostUserId = (0, react.useContext)(PipesCredentialUserIdContext)?.trim();
+	const { authToken } = require_api_api_provider.useApi();
+	const translate = require_lib_i18n_use_translation.useTranslation();
+	const claims = authToken ? require_api_claims.getClaims(authToken) : void 0;
+	const sessionUserId = claims && require_api_claims.getAuthenticatedUserId(claims);
+	const userId = sessionUserId ?? (claims?.sub_type === "client_api_credential" && hostUserId?.startsWith("user_") ? hostUserId : void 0);
+	return {
+		userId,
+		error: sessionUserId && hostUserId && hostUserId !== sessionUserId ? translate({
+			defaultMessage: "Shared credentials must be attributed to the signed-in user. The application must omit PipesAdmin's userId prop or pass the signed-in user's WorkOS user ID.",
+			description: "Configuration error when the host-supplied PipesAdmin user ID differs from the authenticated user",
+			id: "pipesCredentialUserMismatch"
+		}) : !userId ? translate({
+			defaultMessage: "Shared credentials require an acting WorkOS user. The application must use a user-backed session or supply the acting person's WorkOS user ID through PipesAdmin's userId prop when using an application credential token.",
+			description: "Configuration guidance for shared credential writes without an acting user; no user ID entry is requested",
+			id: "pipesCredentialUserRequired"
+		}) : void 0
+	};
+}
+//#endregion
+exports.PipesCredentialUserIdContext = PipesCredentialUserIdContext;
+exports.usePipesCredentialAttribution = usePipesCredentialAttribution;
+
+//# sourceMappingURL=pipes-credential-attribution.cjs.map

package/dist/cjs/lib/pipes-credential-attribution.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipes-credential-attribution.cjs","names":["createContext","useContext","useApi","useTranslation","getClaims","getAuthenticatedUserId"],"sources":["../../../src/lib/pipes-credential-attribution.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport { useApi } from \"../api/api-provider.js\";\nimport { getAuthenticatedUserId, getClaims } from \"../api/claims.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\nexport const PipesCredentialUserIdContext = createContext<string | undefined>(\n  undefined,\n);\n\nexport function usePipesCredentialAttribution() {\n  const hostUserId = useContext(PipesCredentialUserIdContext)?.trim();\n  const { authToken } = useApi();\n  const translate = useTranslation();\n  const claims = authToken ? getClaims(authToken) : undefined;\n  const sessionUserId = claims && getAuthenticatedUserId(claims);\n  const userId =\n    sessionUserId ??\n    (claims?.sub_type === \"client_api_credential\" &&\n    hostUserId?.startsWith(\"user_\")\n      ? hostUserId\n      : undefined);\n\n  const error =\n    sessionUserId && hostUserId && hostUserId !== sessionUserId\n      ? translate({\n          defaultMessage:\n            \"Shared credentials must be attributed to the signed-in user. The application must omit PipesAdmin's userId prop or pass the signed-in user's WorkOS user ID.\",\n          description:\n            \"Configuration error when the host-supplied PipesAdmin user ID differs from the authenticated user\",\n          id: \"pipesCredentialUserMismatch\",\n        })\n      : !userId\n        ? translate({\n            defaultMessage:\n              \"Shared credentials require an acting WorkOS user. The application must use a user-backed session or supply the acting person's WorkOS user ID through PipesAdmin's userId prop when using an application credential token.\",\n            description:\n              \"Configuration guidance for shared credential writes without an acting user; no user ID entry is requested\",\n            id: \"pipesCredentialUserRequired\",\n          })\n        : undefined;\n\n  return { userId, error };\n}\n"],"mappings":";;;;;;;AAOA,MAAa,gCAAA,GAA+BA,MAAAA,cAAAA,CAC1C,MACF;AAEA,SAAgB,gCAAgC;CAC9C,MAAM,cAAA,GAAaC,MAAAA,WAAAA,CAAW,4BAA4B,CAAC,EAAE,KAAK;CAClE,MAAM,EAAE,cAAcC,yBAAAA,OAAO;CAC7B,MAAM,YAAYC,iCAAAA,eAAe;CACjC,MAAM,SAAS,YAAYC,mBAAAA,UAAU,SAAS,IAAI;CAClD,MAAM,gBAAgB,UAAUC,mBAAAA,uBAAuB,MAAM;CAC7D,MAAM,SACJ,kBACC,QAAQ,aAAa,2BACtB,YAAY,WAAW,OAAO,IAC1B,aACA;CAqBN,OAAO;EAAE;EAAQ,OAlBf,iBAAiB,cAAc,eAAe,gBAC1C,UAAU;GACR,gBACE;GACF,aACE;GACF,IAAI;EACN,CAAC,IACD,CAAC,SACC,UAAU;GACR,gBACE;GACF,aACE;GACF,IAAI;EACN,CAAC,IACD;CAEe;AACzB"}

package/dist/cjs/lib/pipes-credential-attribution.d.cts

@@ -0,0 +1,8 @@
+//#region src/lib/pipes-credential-attribution.d.ts
+export declare const PipesCredentialUserIdContext: import("react").Context<string | undefined>;
+export declare function usePipesCredentialAttribution(): {
+  userId: string | undefined;
+  error: string | undefined;
+};
+//#endregion
+//# sourceMappingURL=pipes-credential-attribution.d.cts.map

package/dist/cjs/lib/pipes.cjs

@@ -19,6 +19,7 @@ const require_lib_data_integration_icon = require("./data-integration-icon.cjs")
 const require_lib_api_pipes = require("./api/pipes.cjs");
 const require_lib_pipes_connections = require("./pipes-connections.cjs");
 const require_lib_redacted_secret = require("./redacted-secret.cjs");
+const require_lib_pipes_credential_attribution = require("./pipes-credential-attribution.cjs");
 let react = require("react");
 let _radix_ui_themes = require("@radix-ui/themes");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -748,6 +749,8 @@ const API_KEY_REDACTED_PREFIX = "••••";
 */
 function ApiKeyDialog({ integration, installation = integration.installation, owner = "user", target = require_lib_pipes_connections.getConnectionTarget(installation), open, onOpenChange, onSuccess, collectName = false }) {
 	const invalidateConnections = require_lib_api_pipes.useInvalidateConnections(owner);
+	const attribution = require_lib_pipes_credential_attribution.usePipesCredentialAttribution();
+	const attributionError = owner === "organization" ? attribution.error : void 0;
 	const [name, setName] = (0, react.useState)("");
 	const isRotation = installation?.auth_method === "api_key" && installation.state === "connected";
 	const last4 = installation?.api_key_last_4;
@@ -779,8 +782,13 @@ function ApiKeyDialog({ integration, installation = integration.installation, ow
 			...require_lib_pipes_connections.toCreationTargetInput(target),
 			...collectName ? require_lib_pipes_connections.toAccountDisplayNameInput(name) : {}
 		};
-		if (owner === "organization") organizationUpsert.mutate(input);
-		else userUpsert.mutate(input);
+		if (owner === "organization") {
+			if (attributionError || !attribution.userId) return;
+			organizationUpsert.mutate({
+				...input,
+				userId: attribution.userId
+			});
+		} else userUpsert.mutate(input);
 	};
 	(0, react.useEffect)(() => {
 		reset();
@@ -816,11 +824,11 @@ function ApiKeyDialog({ integration, installation = integration.installation, ow
 					mt: "1",
 					children: integration.description
 				}),
-				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Root, {
+				(attributionError || error) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Root, {
 					my: "3",
 					color: "red",
 					role: "alert",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Text, { children: errorMessage ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Text, { children: attributionError ?? errorMessage ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {
 						defaultMessage: "An error occurred. Please check the value and try again.",
 						id: "bYLbLL",
 						description: "Generic error message for API key submission failure"
@@ -882,7 +890,7 @@ function ApiKeyDialog({ integration, installation = integration.installation, ow
 						})
 					}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_elements.Button, {
 						type: "button",
-						disabled: isPending || !secret.trim(),
+						disabled: !!attributionError || isPending || !secret.trim(),
 						loading: isPending,
 						onClick: () => upsertApiKey(secret.trim()),
 						children: isRotation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {
@@ -933,6 +941,8 @@ function ApiKeyConnectButton({ integration }) {
 */
 function ClientCredentialsDialog({ integration, installation = integration.installation, owner = "user", target = require_lib_pipes_connections.getConnectionTarget(installation), fields, open, onOpenChange, onSuccess, collectName = false }) {
 	const invalidateConnections = require_lib_api_pipes.useInvalidateConnections(owner);
+	const attribution = require_lib_pipes_credential_attribution.usePipesCredentialAttribution();
+	const attributionError = owner === "organization" ? attribution.error : void 0;
 	const [name, setName] = (0, react.useState)("");
 	const isUpdate = installation?.auth_method === "client_credentials";
 	const storedConfig = (0, react.useMemo)(() => isUpdate ? installation?.config ?? {} : {}, [isUpdate, installation?.config]);
@@ -975,6 +985,7 @@ function ClientCredentialsDialog({ integration, installation = integration.insta
 	const { error, isPending } = owner === "organization" ? organizationUpsert : userUpsert;
 	const errorMessage = error instanceof require_api_errors.ApiError && error.message ? error.message : null;
 	const handleSubmit = () => {
+		if (attributionError) return;
 		if (!configForm.validate()) return;
 		const config = configForm.isDirty ? configForm.buildConfigPayload(storedConfig) : void 0;
 		const input = {
@@ -985,8 +996,13 @@ function ClientCredentialsDialog({ integration, installation = integration.insta
 			...require_lib_pipes_connections.toCreationTargetInput(target),
 			...collectName ? require_lib_pipes_connections.toAccountDisplayNameInput(name) : {}
 		};
-		if (owner === "organization") organizationUpsert.mutate(input);
-		else userUpsert.mutate(input);
+		if (owner === "organization") {
+			if (!attribution.userId) return;
+			organizationUpsert.mutate({
+				...input,
+				userId: attribution.userId
+			});
+		} else userUpsert.mutate(input);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes_components_dialog.Root, {
 		open,
@@ -1009,11 +1025,11 @@ function ClientCredentialsDialog({ integration, installation = integration.insta
 						values: { integrationName: integration.name }
 					})
 				}),
-				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Root, {
+				(attributionError || error) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Root, {
 					my: "3",
 					color: "red",
 					role: "alert",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Text, { children: errorMessage ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_themes.Callout.Text, { children: attributionError ?? errorMessage ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {
 						defaultMessage: "An error occurred. Please check the value and try again.",
 						id: "bYLbLL",
 						description: "Generic error message for API key submission failure"
@@ -1109,7 +1125,7 @@ function ClientCredentialsDialog({ integration, installation = integration.insta
 						})
 					}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_elements.Button, {
 						type: "button",
-						disabled: isPending || !clientId.trim() || secretMissing || configForm.hasMissingRequired,
+						disabled: !!attributionError || isPending || !clientId.trim() || secretMissing || configForm.hasMissingRequired,
 						loading: isPending,
 						onClick: handleSubmit,
 						children: isUpdate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_i18n_translation.Translation, {