Adding support for custom OAuth in connect-react (#17902)

* Custom OAuth clients

* Update pnpm-lock.yaml

* Update ControlApp.tsx

* Update README.md

* Updating refs to oauth_apps

Author: dannyroosevelt

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.

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<string, string>;
 };
 ```
 
+### 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",
+};
+
+<ComponentFormContainer
+  userId={userId}
+  componentKey="slack-send-message-to-channel"
+  configuredProps={configuredProps}
+  onUpdateConfiguredProps={setConfiguredProps}
+  oauthAppConfig={oauthAppConfig}
+/>;
+```
+
+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
 <FrontendClientProvider client={client}>
   <CustomizeProvider {...customizationConfig}>
     <ComponentFormContainer
-      key="slack-send-message"
+      key="slack-send-message-to-channel"
       configuredProps={configuredProps}
       onUpdateConfiguredProps={setConfiguredProps}
     />

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"

packages/connect-react/src/components/ComponentForm.tsx

@@ -29,6 +29,12 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   hideOptionalProps?: boolean;
   sdkResponse?: unknown | undefined;
   enableDebugging?: boolean;
+  /**
+   * OAuth app ID configuration for specific apps.
+   * Maps app name slugs to their corresponding OAuth app IDs.
+   * Example: { 'github': 'oa_xxxxxxx', 'google_sheets': 'oa_xxxxxxx' }
+   */
+  oauthAppConfig?: Record<string, string>;
 } & (
   | { externalUserId: string; userId?: never }
   | { userId: string; externalUserId?: never }

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<ConfigurablePropApp>();
   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

packages/connect-react/src/hooks/form-context.tsx

@@ -44,6 +44,7 @@ export type FormContext<T extends ConfigurableProps> = {
   /** @deprecated Use externalUserId instead */
   userId: string;
   enableDebugging?: boolean;
+  oauthAppConfig?: Record<string, string>;
 };
 
 export const skippablePropTypes = [
@@ -81,7 +82,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   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 = <T extends ConfigurableProps>({
     submitting,
     sdkErrors,
     enableDebugging,
+    oauthAppConfig,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };