fix: add client side validation on integration credentials

Author: jainpawan21

apps/dashboard/src/components/integrations/components/integration-credentials.tsx

@@ -1,6 +1,7 @@
 import { Input } from '@/components/primitives/input';
 import { SecretInput } from '@/components/primitives/secret-input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
+import { Textarea } from '@/components/primitives/textarea';
 import { Switch } from '@/components/primitives/switch';
 import { CredentialsKeyEnum, IProviderConfig } from '@novu/shared';
 import { Control } from 'react-hook-form';
@@ -32,14 +33,24 @@ const SECURE_CREDENTIALS = [
 ];
 
 export function CredentialsSection({ provider, control }: CredentialsSectionProps) {
+  console.log(provider);
   return (
     <div className="border-neutral-alpha-200 bg-background text-foreground-600 mx-0 mt-0 flex flex-col gap-2 rounded-lg border p-3">
       {provider?.credentials?.map((credential) => (
         <FormField
           key={credential.key}
           control={control}
           name={`credentials.${credential.key}`}
-          rules={{ required: credential.required ? `${credential.displayName} is required` : false }}
+          rules={{
+            required: credential.required ? `${credential.displayName} is required` : false,
+            validate: credential.validation?.validate,
+            pattern: credential.validation?.pattern
+              ? {
+                  value: credential.validation.pattern,
+                  message: credential.validation.message || 'Invalid format',
+                }
+              : undefined,
+          }}
           render={({ field, fieldState }) => (
             <FormItem className="mb-2">
               <FormLabel htmlFor={credential.key} optional={!credential.required}>
@@ -66,6 +77,16 @@ export function CredentialsSection({ provider, control }: CredentialsSectionProp
                     </SelectContent>
                   </Select>
                 </FormControl>
+              ) : credential.type === 'textarea' ? (
+                <FormControl>
+                  <Textarea
+                    id={credential.key}
+                    placeholder={`Enter ${credential.displayName.toLowerCase()}`}
+                    value={field.value || ''}
+                    onChange={field.onChange}
+                    rows={7}
+                  />
+                </FormControl>
               ) : credential.type === 'secret' || SECURE_CREDENTIALS.includes(credential.key as CredentialsKeyEnum) ? (
                 <FormControl>
                   <SecretInput
@@ -88,7 +109,7 @@ export function CredentialsSection({ provider, control }: CredentialsSectionProp
                 </FormControl>
               )}
 
-              <FormMessage>{credential.description}</FormMessage>
+              <FormMessage>{fieldState.error?.message || credential.description}</FormMessage>
             </FormItem>
           )}
         />

packages/providers/src/lib/push/apns/apns.provider.ts

@@ -35,7 +35,7 @@ export class APNSPushProvider extends BaseProvider implements IPushProvider {
     this.config = config;
     this.provider = new apn.Provider({
       token: {
-        key: this.validateAndFormatKey(config.key),
+        key: config.key,
         keyId: config.keyId,
         teamId: config.teamId,
       },
@@ -73,20 +73,4 @@ export class APNSPushProvider extends BaseProvider implements IPushProvider {
       date: new Date().toISOString(),
     };
   }
-
-  private validateAndFormatKey(key: string): string {
-    // Check if key is already properly formatted
-    const properFormat = /^-----BEGIN PRIVATE KEY-----\n[A-Za-z0-9+/=\n]+\n-----END PRIVATE KEY-----$/;
-
-    if (properFormat.test(key)) {
-      return key; // Key is already in correct format
-    }
-
-    // If not properly formatted, clean and format the key
-    const cleanKey = key.replace(/-----BEGIN PRIVATE KEY-----|-----END PRIVATE KEY-----|[\s\n\r]/g, '');
-
-    const formattedKey = cleanKey.match(/.{1,64}/g)?.join('\n') || '';
-
-    return `-----BEGIN PRIVATE KEY-----\n${formattedKey}\n-----END PRIVATE KEY-----`;
-  }
 }

packages/shared/src/consts/providers/credentials/provider-credentials.ts

@@ -641,8 +641,22 @@ export const apnsConfig: IConfigCredentials[] = [
   {
     key: CredentialsKeyEnum.SecretKey,
     displayName: 'Private Key',
-    type: 'text',
-    required: true,
+    type: 'textarea',
+    required: true,
+    validation: {
+      validate: (value: string) => {
+        try {
+          // Check if it's a valid PEM format
+          if (!value.includes('-----BEGIN PRIVATE KEY-----') || !value.includes('-----END PRIVATE KEY-----')) {
+            return 'Invalid private key format. Must be in PEM format.';
+          }
+
+          return true;
+        } catch (e) {
+          return 'Invalid private key format. Must be in PEM format.';
+        }
+      },
+    },
   },
   {
     key: CredentialsKeyEnum.ApiKey,
@@ -668,7 +682,6 @@ export const apnsConfig: IConfigCredentials[] = [
     type: 'switch',
     required: false,
   },
-
   ...pushConfigBase,
 ];
 

packages/shared/src/consts/providers/provider.interface.ts

@@ -26,6 +26,11 @@ export interface IConfigCredentials {
     name: string;
     value: string | null;
   }>;
+  validation?: {
+    pattern?: RegExp;
+    message?: string;
+    validate?: (value: string) => boolean | string;
+  };
 }
 
 export interface ILogoFileName {