@pipedream/connect-react 1.3.3 → 1.4.0

package/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}
     />