Mariano/fix 13 (#1900)

* refactor(integration): add support for additional OAuth settings in integrations

Author: Marfuen

apps/api/src/integration-platform/controllers/admin-integrations.controller.ts

@@ -72,6 +72,8 @@ export class AdminIntegrationsController {
           createAppUrl: manifest.auth.config.createAppUrl,
           requiredScopes: manifest.auth.config.scopes,
           authorizeUrl: manifest.auth.config.authorizeUrl,
+          additionalOAuthSettings:
+            manifest.auth.config.additionalOAuthSettings || [],
         }),
       };
     });
@@ -114,6 +116,8 @@ export class AdminIntegrationsController {
         createAppUrl: manifest.auth.config.createAppUrl,
         requiredScopes: manifest.auth.config.scopes,
         callbackUrl: `${process.env.BASE_URL || 'http://localhost:3333'}/v1/integrations/oauth/callback`,
+        additionalOAuthSettings:
+          manifest.auth.config.additionalOAuthSettings || [],
       }),
     };
   }

apps/api/src/integration-platform/controllers/oauth.controller.ts

@@ -146,15 +146,17 @@ export class OAuthController {
       redirectUrl,
     });
 
-    // Build authorization URL, replacing any placeholders with custom settings
+    // Build authorization URL, replacing any placeholders with additional OAuth settings
     let authorizeUrl = oauthConfig.authorizeUrl;
-    if (credentials.customSettings) {
-      // Replace {APP_NAME} placeholder with custom setting (used by Rippling, etc.)
-      if (credentials.customSettings.appName) {
-        authorizeUrl = authorizeUrl.replace(
-          '{APP_NAME}',
-          String(credentials.customSettings.appName),
-        );
+    if (credentials.customSettings && oauthConfig.additionalOAuthSettings) {
+      // Dynamically replace tokens based on additionalOAuthSettings definition
+      for (const setting of oauthConfig.additionalOAuthSettings) {
+        if (setting.token && credentials.customSettings[setting.id]) {
+          authorizeUrl = authorizeUrl.replace(
+            setting.token,
+            String(credentials.customSettings[setting.id]),
+          );
+        }
       }
     }
     const authUrl = new URL(authorizeUrl);

apps/app/src/app/(app)/admin/integrations/page.tsx

@@ -7,7 +7,6 @@ import { Card, CardContent } from '@comp/ui/card';
 import { Input } from '@comp/ui/input';
 import { Label } from '@comp/ui/label';
 import {
-  AlertCircle,
   CheckCircle2,
   ExternalLink,
   Key,
@@ -21,6 +20,17 @@ import Image from 'next/image';
 import { useState } from 'react';
 import useSWR from 'swr';
 
+interface AdditionalOAuthSetting {
+  id: string;
+  label: string;
+  type: 'text' | 'password' | 'textarea' | 'select' | 'combobox';
+  placeholder?: string;
+  helpText?: string;
+  required: boolean;
+  options?: { value: string; label: string }[];
+  token?: string;
+}
+
 interface Integration {
   id: string;
   name: string;
@@ -38,6 +48,7 @@ interface Integration {
   createAppUrl?: string;
   requiredScopes?: string[];
   authorizeUrl?: string;
+  additionalOAuthSettings?: AdditionalOAuthSetting[];
 }
 
 function IntegrationCard({
@@ -50,17 +61,21 @@ function IntegrationCard({
   const [showConfig, setShowConfig] = useState(false);
   const [clientId, setClientId] = useState('');
   const [clientSecret, setClientSecret] = useState('');
-  const [appName, setAppName] = useState('');
+  const [customSettingsValues, setCustomSettingsValues] = useState<Record<string, string>>({});
   const [isSaving, setIsSaving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Check if this integration needs an app name (has {APP_NAME} placeholder in authorize URL)
-  const needsAppName = integration.authorizeUrl?.includes('{APP_NAME}');
+  const additionalSettings = integration.additionalOAuthSettings || [];
 
   const handleSave = async () => {
     if (!clientId || !clientSecret) return;
-    if (needsAppName && !appName) return;
+
+    // Validate required additional settings
+    const hasAllRequiredSettings = additionalSettings.every(
+      (setting) => !setting.required || customSettingsValues[setting.id],
+    );
+    if (!hasAllRequiredSettings) return;
 
     setIsSaving(true);
     setError(null);
@@ -69,14 +84,16 @@ function IntegrationCard({
       providerSlug: integration.id,
       clientId,
       clientSecret,
-      customSettings: needsAppName ? { appName } : undefined,
+      customSettings:
+        Object.keys(customSettingsValues).length > 0 ? customSettingsValues : undefined,
     });
 
     if (response.error) {
       setError(response.error);
     } else {
       setClientId('');
       setClientSecret('');
+      setCustomSettingsValues({});
       setShowConfig(false);
       onRefresh();
     }
@@ -227,26 +244,51 @@ function IntegrationCard({
                         onChange={(e) => setClientSecret(e.target.value)}
                       />
                     </div>
-                    {needsAppName && (
-                      <div>
-                        <Label className="text-sm">App Name</Label>
-                        <Input
-                          className="font-mono text-sm"
-                          placeholder="e.g., compai533c"
-                          value={appName}
-                          onChange={(e) => setAppName(e.target.value)}
-                        />
-                        <p className="text-xs text-muted-foreground mt-1">
-                          The app name from your Rippling developer portal (used in the authorize
-                          URL)
-                        </p>
-                      </div>
+
+                    {/* Additional OAuth Settings - provider-specific OAuth configuration */}
+                    {additionalSettings.length > 0 && (
+                      <>
+                        <div className="border-t pt-3 mt-1">
+                          <h4 className="text-xs font-medium text-muted-foreground mb-3 uppercase tracking-wide">
+                            Additional OAuth Settings
+                          </h4>
+                        </div>
+                        {additionalSettings.map((setting) => (
+                          <div key={setting.id}>
+                            <Label className="text-sm">
+                              {setting.label}
+                              {setting.required && <span className="text-destructive ml-1">*</span>}
+                            </Label>
+                            <Input
+                              className="font-mono text-sm"
+                              placeholder={setting.placeholder}
+                              value={customSettingsValues[setting.id] || ''}
+                              onChange={(e) =>
+                                setCustomSettingsValues({
+                                  ...customSettingsValues,
+                                  [setting.id]: e.target.value,
+                                })
+                              }
+                            />
+                            {setting.helpText && (
+                              <p className="text-xs text-muted-foreground mt-1">
+                                {setting.helpText}
+                              </p>
+                            )}
+                          </div>
+                        ))}
+                      </>
                     )}
                   </div>
 
                   <Button
                     onClick={handleSave}
-                    disabled={!clientId || !clientSecret || (needsAppName && !appName) || isSaving}
+                    disabled={
+                      !clientId ||
+                      !clientSecret ||
+                      additionalSettings.some((s) => s.required && !customSettingsValues[s.id]) ||
+                      isSaving
+                    }
                   >
                     {isSaving ? (
                       <Loader2 className="h-4 w-4 animate-spin mr-2" />

packages/integration-platform/src/manifests/rippling/index.ts

@@ -37,6 +37,17 @@ export const ripplingManifest: IntegrationManifest = {
 4. Enable the required scopes under HR information: "Read access to Workers"
 5. Note your app name - it's used in the authorize URL`,
       createAppUrl: 'https://app.rippling.com/partner',
+      additionalOAuthSettings: [
+        {
+          id: 'appName',
+          label: 'Rippling App Name',
+          type: 'text',
+          helpText:
+            'Your app name from the Rippling developer portal. This appears in the authorize URL (app.rippling.com/apps/PLATFORM/{appName}/authorize).',
+          required: true,
+          token: '{APP_NAME}',
+        },
+      ],
     },
   },
 

packages/integration-platform/src/manifests/vercel/index.ts

@@ -36,12 +36,11 @@ Copy the **Client ID** and **Client Secret** (click Reveal)
 Enter the Client ID, Secret, and the integration slug (from \`vercel.com/integrations/{slug}\`) in the admin page.
 
 > **Team Support**: When connecting, you'll choose whether to install for your personal account or a team. If you select a team, all API calls will be scoped to that team.`,
-      customSettings: [
+      additionalOAuthSettings: [
         {
           id: 'appSlug',
           label: 'Vercel Integration Slug',
           type: 'text',
-          placeholder: 'comp-ai',
           helpText:
             'The slug from your Vercel integration URL (https://vercel.com/integrations/{slug}). Used to launch the correct install page.',
           required: true,

packages/integration-platform/src/types.ts

@@ -37,11 +37,12 @@ export const OAuthConfigSchema = z.object({
    */
   refreshUrl: z.string().url().optional(),
   /**
-   * Custom settings that admins need to configure alongside client ID/secret.
-   * These are used for provider-specific settings like Vercel's integration slug
-   * or Rippling's app name. The `token` field replaces placeholders in authorizeUrl.
+   * Additional OAuth settings that admins configure alongside client ID/secret.
+   * These are provider-specific settings like Vercel's integration slug or Rippling's app name.
+   * The `token` field allows replacing placeholders in authorizeUrl with these values.
+   * Example: Vercel uses {APP_SLUG} in the authorize URL which gets replaced with the configured slug.
    */
-  customSettings: z
+  additionalOAuthSettings: z
     .array(
       z.object({
         id: z.string(),