Merge pull request #211 from kepler-inc/admin-redirect-uri

Pre configured Admin redirectURI

examples/email-client/arkw.config.ts

@@ -18,7 +18,7 @@ export const config: Config = {
   ],
   db: {
     provider: 'postgres',
-    uri: 'postgresql://postgres:[email protected]:5433/arkwright?schema=arkw',
+    uri: 'postgresql://postgres:[email protected]:5432/arkwright?schema=arkw',
   },
   systemHostURL: process.env.APP_URL!,
   routeRegistrationPath: '/api/arkw',

packages/admin/src/app/integrations/create/page.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
+import { framework } from '@/lib/framework-utils';
+
 import { CreateIntegrationClientLayout } from '@/domains/integrations/components/create-integration-client-layout';
 import { getIntegrations } from '@/domains/integrations/utils';
 
 const CreateIntegrationPage = async () => {
   const integrations = await getIntegrations();
-  return <CreateIntegrationClientLayout integrations={integrations} />;
+  const defaultRedirectURI = framework?.makeRedirectURI() || 'Not Availiable';
+
+  return <CreateIntegrationClientLayout redirectURI={defaultRedirectURI} integrations={integrations} />;
 };
 
 export default CreateIntegrationPage;

packages/admin/src/app/integrations/page.tsx

@@ -19,7 +19,10 @@ const IntegrationsPage = async () => {
         <IntegrationHeader />
       </div>
       <div
-        className={cn('grid gap-3 mx-auto mt-2 overflow-hidden', availableIntegrations.length > 1 ? 'grid-cols-2' : '')}
+        className={cn(
+          'grid gap-3 flex-grow mx-auto mt-2 overflow-hidden',
+          availableIntegrations.length > 1 ? 'grid-cols-2' : '',
+        )}
       >
         {availableIntegrations.map(({ name, integration }) => {
           const OAuthConnectionRoute = framework?.makeConnectURI({

packages/admin/src/domains/integrations/components/create-integration-client-layout.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import Breadcrumb from '@/components/ui/breadcrumbs';
+import { CopyButton } from '@/components/ui/copy-button';
 import { Input } from '@/components/ui/input';
 
 import { Icon } from '@/app/components/icon';
@@ -22,10 +23,11 @@ type PkgManagers = keyof typeof pkgManagerToCommandMap;
 
 interface CreateIntegrationClientLayoutProps {
   integrations: IntegrationPackage[];
+  redirectURI: string;
 }
 
 // let packageInstalled = false;
-export const CreateIntegrationClientLayout = ({ integrations }: CreateIntegrationClientLayoutProps) => {
+export const CreateIntegrationClientLayout = ({ integrations, redirectURI }: CreateIntegrationClientLayoutProps) => {
   const [packageManager, setPackageManager] = React.useState<PkgManagers>('npm');
   const [searchTerm, setSearchTerm] = React.useState('');
 
@@ -61,6 +63,13 @@ export const CreateIntegrationClientLayout = ({ integrations }: CreateIntegratio
               pageClassName="font-medium"
             />
           </div>
+          <pre className="flex bg-transparent  items-center gap-2 justify-between  px-2 rounded font-mono text-[0.75rem]">
+            <code>
+              <span className="font-medium">RedirectURI</span>{' '}
+              <span className="text-arkw-el-3 bg-arkw-bg-4 p-1 px-2 rounded-sm">{redirectURI}</span>
+            </code>
+            <CopyButton classname="" snippet={redirectURI} />
+          </pre>
         </div>
       </div>
       <div className="px-3 mx-auto max-w-[40em]">

packages/admin/src/domains/integrations/utils.ts

@@ -12,8 +12,6 @@ export const getIntegrationConfigAndWriteCredentialToEnv = async ({
   integrationName: string;
   credential: CredentialInfo;
 }) => {
-  // @todo: allow for redirectPath to be configurable?
-  const redirectPath = '/api/arkw/connect/callback';
   const envFilePath = path.join(process.cwd(), '.env');
   const fileEnvService = new FileEnvService(envFilePath);
   const upperCasedIntegrationName = integrationName.toUpperCase();
@@ -24,49 +22,24 @@ export const getIntegrationConfigAndWriteCredentialToEnv = async ({
   const loweredCasedIntName = integrationName.toLowerCase();
 
   switch (loweredCasedIntName) {
-    case 'mailchimp':
-      integrationConfigString = `{
-          config: {
-            CLIENT_ID: process.env.MAILCHIMP_CLIENT_ID!,
-            CLIENT_SECRET: process.env.MAILCHIMP_CLIENT_SECRET!,
-            REDIRECT_URI: new URL(${JSON.stringify(redirectPath)}, process.env.APP_URL).toString(),
-          },
-        }`;
-      break;
-
-    case 'slack':
-      integrationConfigString = `
-        {
-          config: {
-            CLIENT_ID: process.env.SLACK_CLIENT_ID!,
-            CLIENT_SECRET: process.env.SLACK_CLIENT_SECRET!,
-            REDIRECT_URI: new URL(${JSON.stringify(redirectPath)}, process.env.APP_URL).toString(),
-          },
-        }`;
-      break;
-
     case 'google':
       integrationConfigString = `
         {
           config: {
             CLIENT_ID: process.env.GOOGLE_CLIENT_ID!,
             CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET!,
-            REDIRECT_URI: new URL(${JSON.stringify(redirectPath)}, process.env.APP_URL).toString(),
             TOPIC: process.env.GOOGLE_MAIL_TOPIC!,
           }
         }`;
       break;
 
-    case 'x':
-      integrationConfigString = `
-        {
-          config: {
-            CLIENT_ID: process.env.X_CLIENT_ID!,
-            CLIENT_SECRET: process.env.X_CLIENT_SECRET!,
-            REDIRECT_URI: new URL(${JSON.stringify(redirectPath)}, process.env.APP_URL).toString()
-          }
-        }`;
-      break;
+    default:
+      integrationConfigString = `{
+    config: {
+      CLIENT_ID: process.env.${upperCasedIntegrationName}_CLIENT_ID!,
+      CLIENT_SECRET: process.env.${upperCasedIntegrationName}_CLIENT_SECRET!,
+    },
+  }`;
   }
 
   return integrationConfigString;

packages/admin/tsconfig.json

@@ -18,7 +18,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "react": ["./node_modules/@types/react"]
     },
     "forceConsistentCasingInFileNames": true
   },