diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md index 92e548a94090b..3999fdb4617fb 100644 --- a/packages/connect-react/CHANGELOG.md +++ b/packages/connect-react/CHANGELOG.md @@ -2,6 +2,12 @@ # Changelog +## [1.4.0] - 2025-08-01 + +### Added + +- Support for using custom OAuth clients + ## [1.3.3] - 2025-07-22 - Improved handling and sanitization of option objects in selection components. diff --git a/packages/connect-react/README.md b/packages/connect-react/README.md index 210abf58162e8..d2e5663f54e9b 100644 --- a/packages/connect-react/README.md +++ b/packages/connect-react/README.md @@ -153,9 +153,36 @@ type ComponentFormProps = { sdkResponse: unknown[] | unknown | undefined; /** Whether to show show errors in the form. Requires sdkErrors to be set. */ enableDebugging?: boolean; + /** OAuth app ID configuration for specific apps. + * Maps app name slugs to their corresponding OAuth app IDs. */ + oauthAppConfig?: Record; }; ``` +### OAuth App Configuration + +To connect to an OAuth app using your own OAuth client, you can specify custom OAuth app IDs for each app using the `oauthAppConfig` prop: + +```tsx +const oauthAppConfig = { + github: "oa_xxxxxxx", + google_sheets: "oa_xxxxxxx", + slack: "oa_xxxxxxx", +}; + +; +``` + +This allows you to use your own OAuth applications for specific integrations, providing better control over branding and permissions. Read how to configure OAuth clients in Pipedream here: [https://pipedream.com/docs/connect/managed-auth/oauth-clients](https://pipedream.com/docs/connect/managed-auth/oauth-clients). + +**Note**: OAuth app IDs are not sensitive, and are safe to expose in the client. + ## Customization Style individual components using the `CustomizeProvider` and a `CustomizationConfig`. @@ -164,7 +191,7 @@ Style individual components using the `CustomizeProvider` and a `CustomizationCo diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index 4ac07da3c0a25..6c5429f534709 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -1,6 +1,6 @@ { "name": "@pipedream/connect-react", - "version": "1.3.3", + "version": "1.4.0", "description": "Pipedream Connect library for React", "files": [ "dist" diff --git a/packages/connect-react/src/components/ComponentForm.tsx b/packages/connect-react/src/components/ComponentForm.tsx index 2ebe0b2dbaabf..b418e292ca3da 100644 --- a/packages/connect-react/src/components/ComponentForm.tsx +++ b/packages/connect-react/src/components/ComponentForm.tsx @@ -29,6 +29,12 @@ export type ComponentFormProps; } & ( | { externalUserId: string; userId?: never } | { userId: string; externalUserId?: never } diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx index 0535ce881c00e..0ec5ff83749dc 100644 --- a/packages/connect-react/src/components/ControlApp.tsx +++ b/packages/connect-react/src/components/ControlApp.tsx @@ -29,7 +29,9 @@ type ControlAppProps = { export function ControlApp({ app }: ControlAppProps) { const client = useFrontendClient(); - const { externalUserId } = useFormContext(); + const { + externalUserId, oauthAppConfig, + } = useFormContext(); const formFieldCtx = useFormFieldContext(); const { id, prop, value, onChange, @@ -67,7 +69,7 @@ export function ControlApp({ app }: ControlAppProps) { }; const selectProps = select.getProps("controlAppSelect", baseSelectProps); - const oauthAppId = undefined; // XXX allow customizing + const oauthAppId = oauthAppConfig?.[app.name_slug]; const { isLoading: isLoadingAccounts, // TODO error diff --git a/packages/connect-react/src/hooks/form-context.tsx b/packages/connect-react/src/hooks/form-context.tsx index 4c542d51374b1..2d89a1ecee327 100644 --- a/packages/connect-react/src/hooks/form-context.tsx +++ b/packages/connect-react/src/hooks/form-context.tsx @@ -44,6 +44,7 @@ export type FormContext = { /** @deprecated Use externalUserId instead */ userId: string; enableDebugging?: boolean; + oauthAppConfig?: Record; }; export const skippablePropTypes = [ @@ -81,7 +82,7 @@ export const FormContextProvider = ({ const id = useId(); const { - component, configuredProps: __configuredProps, propNames, externalUserId, userId, sdkResponse, enableDebugging, + component, configuredProps: __configuredProps, propNames, externalUserId, userId, sdkResponse, enableDebugging, oauthAppConfig, } = formProps; // Resolve user ID with deprecation warning @@ -594,6 +595,7 @@ export const FormContextProvider = ({ submitting, sdkErrors, enableDebugging, + oauthAppConfig, }; return {children}; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6e00927c63e9..ad9d588f234d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16070,6 +16070,14 @@ importers: specifier: ^6.0.0 version: 6.2.0 + modelcontextprotocol/node_modules2/@modelcontextprotocol/sdk/dist/cjs: {} + + modelcontextprotocol/node_modules2/@modelcontextprotocol/sdk/dist/esm: {} + + modelcontextprotocol/node_modules2/zod-to-json-schema/dist/cjs: {} + + modelcontextprotocol/node_modules2/zod-to-json-schema/dist/esm: {} + packages/ai: dependencies: '@pipedream/sdk': @@ -30051,22 +30059,22 @@ packages: superagent@3.8.1: resolution: {integrity: sha512-VMBFLYgFuRdfeNQSMLbxGSLfmXL/xc+OO+BZp41Za/NRDBet/BNbkRJrYzCUu0u4GU0i/ml2dtT8b9qgkw9z6Q==} engines: {node: '>= 4.0'} - deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net + deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net superagent@4.1.0: resolution: {integrity: sha512-FT3QLMasz0YyCd4uIi5HNe+3t/onxMyEho7C3PSqmti3Twgy2rXT4fmkTz6wRL6bTF4uzPcfkUCa8u4JWHw8Ag==} engines: {node: '>= 6.0'} - deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net + deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net superagent@5.3.1: resolution: {integrity: sha512-wjJ/MoTid2/RuGCOFtlacyGNxN9QLMgcpYLDQlWFIhhdJ93kNscFonGvrpAHSCVjRVj++DGCglocF7Aej1KHvQ==} engines: {node: '>= 7.0.0'} - deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net + deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net superagent@7.1.6: resolution: {integrity: sha512-gZkVCQR1gy/oUXr+kxJMLDjla434KmSOKbx5iGD30Ql+AkJQ/YlPKECJy2nhqOsHLjGHzoDTXNSjhnvWhzKk7g==} engines: {node: '>=6.4.0 <13 || >=14'} - deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net + deprecated: Please upgrade to superagent v10.2.2+, see release notes at https://github.com/forwardemail/superagent/releases/tag/v10.2.2 - maintenance is supported by Forward Email @ https://forwardemail.net supports-color@2.0.0: resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==} @@ -37391,6 +37399,8 @@ snapshots: '@putout/operator-filesystem': 5.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3)) '@putout/operator-json': 2.2.0 putout: 36.13.1(eslint@8.57.1)(typescript@5.6.3) + transitivePeerDependencies: + - supports-color '@putout/operator-regexp@1.0.0(putout@36.13.1(eslint@8.57.1)(typescript@5.6.3))': dependencies: