Move existing integration authorization and creation into separate steps

frontend/src/components/basic/Layout.tsx

@@ -199,13 +199,13 @@ const Layout = ({ children }: LayoutProps) => {
           .split('/')
           [router.asPath.split('/').length - 1].split('?')[0];
 
-        if (!['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId)) {
+        if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
           localStorage.setItem('projectData.id', intendedWorkspaceId);
         }
-
+        
         // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
         if (
-          !['heroku', 'vercel', 'github', 'netlify', 'azure-key-vault'].includes(intendedWorkspaceId) &&
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
           !userWorkspaces
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)

frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx

@@ -1,120 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-interface IntegrationOption {
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  selectedIntegrationOption: IntegrationOption | null
-  handleIntegrationOption: (arg:{
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-})=>void;
-};
-
-const IntegrationAccessTokenDialog = ({
-    isOpen,
-    closeModal,
-    selectedIntegrationOption,
-    handleIntegrationOption
-}:Props) => {
-    const [accessToken, setAccessToken] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const submit = async () => {
-        try {
-            if (selectedIntegrationOption && accessToken !== '') {
-                handleIntegrationOption({
-                    integrationOption: selectedIntegrationOption,
-                    accessToken
-                });
-                closeModal();
-                setAccessToken('');
-            }
-        } catch (err) {
-            console.log(err);
-        }
-    }
-
-    return (
-        <div>
-            <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as="div" className="relative z-10" onClose={() => {
-                    closeModal();
-                }}>
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black bg-opacity-70" />
-                    </Transition.Child>
-                    <div className="fixed inset-0 overflow-y-auto">
-                        <div className="flex min-h-full items-center justify-center p-4 text-center">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="ease-out duration-300"
-                                enterFrom="opacity-0 scale-95"
-                                enterTo="opacity-100 scale-100"
-                                leave="ease-in duration-200"
-                                leaveFrom="opacity-100 scale-100"
-                                leaveTo="opacity-0 scale-95"
-                            >
-                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
-                                <Dialog.Title
-                                    as="h3"
-                                    className="text-lg font-medium leading-6 text-gray-400"
-                                >
-                                    {`Enter your ${selectedIntegrationOption?.name} API Key`}
-                                </Dialog.Title>
-                                <div className="mt-2 mb-2">
-                                    <p className="text-sm text-gray-500">
-                                        {`This integration requires you to obtain an API key from ${selectedIntegrationOption?.name ?? ''} and store it with Infisical. `}
-                                        You can learn how to do this <a target="_blank" rel="noreferrer" className="text-primary cursor-pointer underline underline-offset-2" href="https://infisical.com/docs/integrations/cloud/render">here</a>.
-                                    </p>
-                                </div>
-                                <div className="mt-4 max-w-full">
-                                    <InputField
-                                        label="API Key"
-                                        onChangeHandler={setAccessToken}
-                                        type="varName"
-                                        value={accessToken}
-                                        placeholder=""
-                                        isRequired
-                                    />
-                                    <div className="mt-4 max-w-[5.5rem]">
-                                        <Button 
-                                            onButtonPressed={submit}
-                                            color="mineshaft"
-                                            text="Connect"
-                                            size="md"
-                                        />
-                                    </div>
-                                </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
-                    </div>
-                </Dialog>
-            </Transition>
-        </div>
-    );
-}
-
-export default IntegrationAccessTokenDialog;

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -0,0 +1,3 @@
+export {
+    useGetIntegrationAuthApps,
+    useGetIntegrationAuthById} from './queries';

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -0,0 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import {
+    App,
+    IntegrationAuth} from './types';
+
+const integrationAuthKeys = {
+    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
+    getIntegrationAuthApps: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthApps'] as const,
+}
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
+    return data.integrationAuth;
+}
+
+const fetchIntegrationAuthApps = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ apps: App[] }>(`/api/v1/integration-auth/${integrationAuthId}/apps`);
+    return data.apps;
+}
+
+export const useGetIntegrationAuthById = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+        enabled: true
+    });
+}
+
+export const useGetIntegrationAuthApps = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId),
+        queryFn: () =>  fetchIntegrationAuthApps(integrationAuthId),
+        enabled: true
+    });
+}

frontend/src/hooks/api/integrationAuth/types.ts

@@ -0,0 +1,13 @@
+export type IntegrationAuth = {
+    _id: string;
+    workspace: string;
+    integration: string;
+    teamId?: string;
+    accountId?: string;
+}
+
+export type App = {
+    name: string;
+    appId?: string;
+    owner?: string;
+}

frontend/src/pages/api/integrations/createIntegration.ts

@@ -4,6 +4,10 @@ interface Props {
   integrationAuthId: string;
   isActive: boolean;
   app: string | null;
+  appId: string | null;
+  sourceEnvironment: string;
+  targetEnvironment: string | null;
+  owner: string | null;
 }
 /**
  * This route creates a new integration based on the integration authorization with id [integrationAuthId]
@@ -14,7 +18,11 @@ interface Props {
 const createIntegration = ({ 
     integrationAuthId,
     isActive,
-    app
+    app,
+    appId,
+    sourceEnvironment,
+    targetEnvironment,
+    owner
 }: Props) =>
   SecurityClient.fetchCall('/api/v1/integration', {
     method: 'POST',
@@ -24,7 +32,11 @@ const createIntegration = ({
     body: JSON.stringify({
         integrationAuthId,
         isActive,
-        app
+        app,
+        appId,
+        sourceEnvironment,
+        targetEnvironment,
+        owner
     })
   }).then(async (res) => {
     if (res && res.status === 200) {

frontend/src/pages/azure-key-vault.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-
-import { 
-  Button, 
-  Card, 
-  CardTitle, 
-  FormControl, 
-  Input, 
-  Select, 
-  SelectItem 
-} from '../components/v2';
-import { useGetWorkspaceById } from '../hooks/api/workspace';
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-import createIntegration from './api/integrations/createIntegration';
-
-interface IntegrationAuth {
-  _id: string;
-  integration: string;
-  workspace: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export default function AzureKeyVault() {
-  const router = useRouter();
-  const workspaceResult = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
-
-  const { code, state } = queryString.parse(router.asPath.split('?')[1]);
-
-  const [integrationAuth, setIntegrationAuth] = useState<IntegrationAuth | null>(null);
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
-
-  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
-  const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
-
-  const [isLoading, setIsLoading] = useState(false);
-  
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state !== localStorage.getItem('latestCSRFToken')) return;
-        localStorage.removeItem('latestCSRFToken');
-
-        setIntegrationAuth(await AuthorizeIntegration({
-          workspaceId: localStorage.getItem('projectData.id') as string,
-          code: code as string,
-          integration: 'azure-key-vault',
-        }));
-      } catch (error) {
-        console.error('Azure Key Vault integration error: ', error);
-      }
-    })();
-  }, []);
-  
-  useEffect(() => {
-    if (workspaceResult && workspaceResult.data) {
-      setSelectedSourceEnvironment(workspaceResult.data.environments[0].slug);
-    }
-  }, [workspaceResult]);
-
-  const handleButtonClick = async () => {
-    try {
-      if (vaultBaseUrl.length === 0) {
-        setVaultBaseUrlErrorText('Vault URI cannot be blank');
-        return;
-      }
-      
-      if (
-        !vaultBaseUrl.startsWith('https://') 
-        || !vaultBaseUrl.endsWith('vault.azure.net')
-      ) {
-        setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
-        return;
-      }
-      
-      if (!integrationAuth?._id) return;
-      
-      setIsLoading(true);
-      await createIntegration({
-        integrationAuthId: integrationAuth?._id,
-        isActive: true,
-        app: vaultBaseUrl
-      });
-      setIsLoading(false);
-      
-      router.push(
-        `/integrations/${localStorage.getItem('projectData.id')}`
-      );
-      
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  if (!workspaceResult) return <div />
-  
-  const { data: w } = workspaceResult;
-
-  return (integrationAuth && w && selectedSourceEnvironment) ? (
-    <div className="h-full w-full flex justify-center items-center">
-      <Card className="max-w-md p-8 rounded-md">
-        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
-        <FormControl
-          label="Project Environment"
-          className='mt-4'
-        >
-          <Select
-            value={selectedSourceEnvironment}
-            onValueChange={(val) => setSelectedSourceEnvironment(val)}
-            className='w-full border border-mineshaft-500'
-          >
-            {w?.environments.map((sourceEnvironment) => (
-              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
-                {sourceEnvironment.name}
-              </SelectItem>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl
-          label="Vault URI"
-          errorText={vaultBaseUrlErrorText}
-          isError={vaultBaseUrlErrorText !== '' ?? false}
-        >
-          <Input
-            placeholder='https://example.vault.azure.net'
-            value={vaultBaseUrl}
-            onChange={(e) => setVaultBaseUrl(e.target.value)}
-          />
-        </FormControl>
-          <Button 
-            onClick={handleButtonClick}
-            color="mineshaft" 
-            className='mt-4'
-            isLoading={isLoading}
-          >
-            Create Integration
-          </Button>
-      </Card>
-    </div>
-  ) : <div />
-}
-
-AzureKeyVault.requireAuth = true;
-
-export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/[id].tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next';
 import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';
 
 import ActivateBotDialog from '@app/components/basic/dialog/ActivateBotDialog';
-import IntegrationAccessTokenDialog from '@app/components/basic/dialog/IntegrationAccessTokenDialog';
 import CloudIntegrationSection from '@app/components/integrations/CloudIntegrationSection';
 import FrameworkIntegrationSection from '@app/components/integrations/FrameworkIntegrationSection';
 import IntegrationSection from '@app/components/integrations/IntegrationSection';
@@ -20,12 +19,10 @@ import {
 } from '../../components/utilities/cryptography/crypto';
 import getBot from '../api/bot/getBot';
 import setBotActiveStatus from '../api/bot/setBotActiveStatus';
-import createIntegration from '../api/integrations/createIntegration';
 import deleteIntegration from '../api/integrations/DeleteIntegration';
 import getIntegrationOptions from '../api/integrations/GetIntegrationOptions';
 import getWorkspaceAuthorizations from '../api/integrations/getWorkspaceAuthorizations';
 import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
-import saveIntegrationAccessToken from '../api/integrations/saveIntegrationAccessToken';
 import getAWorkspace from '../api/workspace/getAWorkspace';
 import getLatestFileKey from '../api/workspace/getLatestFileKey';
 
@@ -75,7 +72,6 @@ export default function Integrations() {
   // TODO: These will have its type when migratiing towards react-query
   const [bot, setBot] = useState<any>(null);
   const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(false);
   const [selectedIntegrationOption, setSelectedIntegrationOption] = useState<IntegrationOption | null>(null);
 
   const router = useRouter();
@@ -166,87 +162,83 @@ export default function Integrations() {
     }
   };
   
-  /**
-   * Handle integration option authorization for a given integration option [integrationOption]
-   * @param {Object} obj
-   * @param {Object} obj.integrationOption - an integration option
-   * @param {String} obj.name
-   * @param {String} obj.type
-   * @param {String} obj.docsLink
-   * @returns
-   */
-  const handleIntegrationOption = async ({
-    integrationOption,
-    accessToken
-  }: { 
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-  }) => {
+  const handleUnauthorizedIntegrationOptionPress = (integrationOption: IntegrationOption) => {
     try {
-      if (!bot.isActive) {
-        await handleBotActivate();
+      // generate CSRF token for OAuth2 code-token exchange integrations
+      const state = crypto.randomBytes(16).toString('hex');
+      localStorage.setItem('latestCSRFToken', state);
+
+      let link = '';
+      switch (integrationOption.slug) {
+        case 'azure-key-vault':
+          link = `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
+          break;
+        case 'heroku':
+          link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
+          break;
+        case 'vercel':
+          link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
+          break;
+        case 'netlify':
+          link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
+          break;
+        case 'github':
+          link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/authorize`
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/authorize`
+          break;
+        default:
+          break;
       }
-      
-      if (integrationOption.type === 'oauth') {
-        // integration is of type OAuth
 
-        // generate CSRF token for OAuth2 code-token exchange integrations
-        const state = crypto.randomBytes(16).toString('hex');
-        localStorage.setItem('latestCSRFToken', state);
-
-        switch (integrationOption.slug) {
-          case 'azure-key-vault':
-            window.location.assign(
-              `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/azure-key-vault&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`
-            );
-            break;
-          case 'heroku':
-            window.location.assign(
-              `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
-            );
-            break;
-          case 'vercel':
-            window.location.assign(
-              `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
-            );
-            break;
-          case 'netlify':
-            window.location.assign(
-              `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
-            );
-            break;
-          case 'github':
-            window.location.assign(
-              `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
-            );
-            break;
-          default:
-            break;
-        }
-        return;
-      } if (integrationOption.type === 'pat') {
-        // integration is of type personal access token
-        const integrationAuth = await saveIntegrationAccessToken({
-            workspaceId: localStorage.getItem('projectData.id'),
-            integration: integrationOption.slug,
-            accessToken: accessToken ?? ''
-        });
-
-        setIntegrationAuths([...integrationAuths, integrationAuth])
-
-        const integration = await createIntegration({
-          integrationAuthId: integrationAuth._id,
-          isActive: false,
-          app: null
-        });
-        
-        setIntegrations([...integrations, integration]); 
-        return;
+      if (link !== '') {
+        window.location.assign(link);
       }
     } catch (err) {
       console.error(err);
     }
-  };
+  }
+  
+  const handleAuthorizedIntegrationOptionPress = (integrationAuth: IntegrationAuth) => {
+    try {
+      let link = '';
+      switch (integrationAuth.integration) {
+        case 'azure-key-vault':
+          link = `${window.location.origin}/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'heroku':
+          link = `${window.location.origin}/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'vercel':
+          link = `${window.location.origin}/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'netlify':
+          link = `${window.location.origin}/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'github':
+          link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        default:
+          break;
+      }
+
+      if (link !== '') {
+        window.location.assign(link);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
   
   /**
    * Open dialog to activate bot if bot is not active.
@@ -258,39 +250,20 @@ export default function Integrations() {
    * @returns
    */
   const integrationOptionPress = async (integrationOption: IntegrationOption) => {
-    // consider: don't start integration until at [handleIntegrationOption] step
     try {
       const integrationAuthX = integrationAuths.find((integrationAuth) => integrationAuth.integration === integrationOption.slug);
-      
-      if (!integrationAuthX) {
-        // case: integration has not been authorized before
-        
-        if (integrationOption.type === 'pat') {
-          // case: integration requires user to input their personal access token for that integration
-          setIntegrationAccessTokenDialogOpen(true);
-          return;
-        }
-        
-        // case: integration does not require user to input their personal access token (i.e. it's an OAuth2 integration)
-        handleIntegrationOption({ integrationOption });
-        return;
-      }
-      
+
       if (!bot.isActive) {
         await handleBotActivate();
       }
       
-      // case: integration has been authorized before
-      // -> create new integration
-      
-      if (!['azure-key-vault'].includes(integrationOption.slug)) {
-        const integration = await createIntegration({
-          integrationAuthId: integrationAuthX._id
-        });
-        setIntegrations([...integrations, integration]);
-      } else {
-        handleIntegrationOption({ integrationOption });
+      if (!integrationAuthX) {
+        // case: integration has not been authorized
+        handleUnauthorizedIntegrationOptionPress(integrationOption);
+        return;
       }
+
+      handleAuthorizedIntegrationOptionPress(integrationAuthX);
     } catch (err) {
       console.error(err);
     }
@@ -372,12 +345,6 @@ export default function Integrations() {
           selectedIntegrationOption={selectedIntegrationOption}
           integrationOptionPress={integrationOptionPress}
         />
-        <IntegrationAccessTokenDialog
-          isOpen={isIntegrationAccessTokenDialogOpen}
-          closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
-          selectedIntegrationOption={selectedIntegrationOption}
-          handleIntegrationOption={handleIntegrationOption}
-        />
         <IntegrationSection 
           integrations={integrations} 
           setIntegrations={setIntegrations}

frontend/src/pages/integrations/azure-key-vault/create.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function AzureKeyVaultCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    
+    const [vaultBaseUrl, setVaultBaseUrl] = useState('');
+    const [vaultBaseUrlErrorText, setVaultBaseUrlErrorText] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+        
+    const handleButtonClick = async () => {
+        try {
+        if (vaultBaseUrl.length === 0) {
+            setVaultBaseUrlErrorText('Vault URI cannot be blank');
+            return;
+        }
+        
+        if (
+            !vaultBaseUrl.startsWith('https://') 
+            || !vaultBaseUrl.endsWith('vault.azure.net')
+        ) {
+            setVaultBaseUrlErrorText('Vault URI must be like https://<vault_name>.vault.azure.net');
+            return;
+        }
+        
+        if (!integrationAuth?._id) return;
+        
+        setIsLoading(true);
+        await createIntegration({
+            integrationAuthId: integrationAuth?._id,
+            isActive: true,
+            app: vaultBaseUrl,
+            appId: null,
+            sourceEnvironment: selectedSourceEnvironment,
+            targetEnvironment: null,
+            owner: null
+        });
+        setIsLoading(false);
+        
+        router.push(
+            `/integrations/${localStorage.getItem('projectData.id')}`
+        );
+        
+        } catch (err) {
+        console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Azure Key Vault Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vault URI"
+          errorText={vaultBaseUrlErrorText}
+          isError={vaultBaseUrlErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder='https://example.vault.azure.net'
+            value={vaultBaseUrl}
+            onChange={(e) => setVaultBaseUrl(e.target.value)}
+          />
+        </FormControl>
+          <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+          >
+            Create Integration
+          </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+AzureKeyVaultCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/azure-key-vault/oauth2/callback.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function AzureKeyVaultOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'azure-key-vault'
+                });
+
+                router.push(
+                    `/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+AzureKeyVaultOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/flyio/authorize.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function FlyioCreateIntegrationPage() {
+    const router = useRouter();
+    const [accessToken, setAccessToken] = useState('');
+    const [accessTokenErrorText, setAccessTokenErrorText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+        
+    const handleButtonClick = async () => {
+        try {
+            setAccessTokenErrorText('');
+            if (accessToken.length === 0) {
+                setAccessTokenErrorText('Access token cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'flyio',
+                accessToken
+            });
+
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+         <FormControl
+          label="Fly.io Access Token"
+          errorText={accessTokenErrorText}
+          isError={accessTokenErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder=''
+            value={accessToken}
+            onChange={(e) => setAccessToken(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to Fly.io
+        </Button>
+      </Card>
+    </div>
+  )
+}
+
+FlyioCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/flyio/create.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function FlyioCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Fly.io Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`flyio-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Fly.io App"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+FlyioCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/github/create.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function GitHubCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [owner, setOwner] = useState<string | null>(null);
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setOwner(integrationAuthApps[0]?.owner ?? null);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>GitHub Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="GitHub Repo"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`github-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+GitHubCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/github/oauth2/callback.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function GitHubOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'github'
+                });
+
+                router.push(
+                    `/integrations/github/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+GitHubOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/heroku/create.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function HerokuCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Heroku Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Heroku App"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+HerokuCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/heroku/oauth2/callback.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function HerokuOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                console.log('A');
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                console.log('B');
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'heroku'
+                });
+
+                console.log('C');
+                router.push(
+                    `/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+            console.log('D');
+        })();
+    }, []);
+    
+    return <div />
+}
+
+HerokuOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/netlify/create.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const netlifyEnvironments = [
+    { name: 'Local development', slug: 'dev' },
+    { name: 'Branch deploys', slug: 'branch-deploy' },
+    { name: 'Deploy previews', slug: 'deploy-preview' },
+    { name: 'Production', slug: 'production' }
+]
+
+export default function NetlifyCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    const [targetEnvironment, setTargetEnvironment] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+            setTargetEnvironment(netlifyEnvironments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            console.log(integrationAuthApps)
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            setIsLoading(true);
+
+            if (!integrationAuth?._id) return;
+
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: (integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp))?.appId ?? null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp && targetEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Netlify Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Netlify Site"
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Netlify Context"
+        >
+          <Select
+            value={targetEnvironment}
+            onValueChange={(val) => setTargetEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {netlifyEnvironments.map((netlifyEnvironment) => (
+              <SelectItem value={netlifyEnvironment.slug} key={`netlify-environment-${netlifyEnvironment.slug}`}>
+                {netlifyEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+NetlifyCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/netlify/oauth2/callback.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function NetlifyOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'netlify'
+                });
+
+                router.push(
+                    `/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+NetlifyOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/render/authorize.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Input,
+} from '../../../components/v2';
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function RenderCreateIntegrationPage() {
+    const router = useRouter();
+    const [apiKey, setApiKey] = useState('');
+    const [apiKeyErrorText, setApiKeyErrorText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+        
+    const handleButtonClick = async () => {
+        try {
+            setApiKeyErrorText('');
+            if (apiKey.length === 0) {
+                setApiKeyErrorText('API Key cannot be blank');
+                return;
+            }
+
+            setIsLoading(true);
+
+            const integrationAuth = await saveIntegrationAccessToken({
+                workspaceId: localStorage.getItem('projectData.id'),
+                integration: 'render',
+                accessToken: apiKey
+            });
+
+            setIsLoading(false);
+            
+            router.push(
+                `/integrations/render/create?integrationAuthId=${integrationAuth._id}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+         <FormControl
+          label="Render API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== '' ?? false}
+        >
+          <Input
+            placeholder='rnd_xxx'
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+          />
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Connect to Render
+        </Button>
+      </Card>
+    </div>
+  )
+}
+
+RenderCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/render/create.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function RenderCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment: null,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Render Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Render Service"
+          className='mt-4'
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`render-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+RenderCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/vercel/create.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../components/utilities/withTranslateProps';
+import {
+    Button, 
+    Card, 
+    CardTitle, 
+    FormControl, 
+    Select, 
+    SelectItem 
+} from '../../../components/v2';
+import { useGetIntegrationAuthById } from '../../../hooks/api/integrationAuth';
+import { useGetWorkspaceById } from '../../../hooks/api/workspace';
+import createIntegration from "../../api/integrations/createIntegration";
+
+const vercelEnvironments = [
+    { name: 'Development', slug: 'development' },
+    { name: 'Preview', slug: 'preview' },
+    { name: 'Production', slug: 'production' }
+]
+
+export default function VercelCreateIntegrationPage() {
+    const router = useRouter();
+
+    const { integrationAuthId } = queryString.parse(router.asPath.split('?')[1]);
+
+    const { data: workspace } = useGetWorkspaceById(localStorage.getItem('projectData.id') ?? '');
+    const { data: integrationAuth } = useGetIntegrationAuthById(integrationAuthId as string ?? '');
+    const { data: integrationAuthApps } = useGetIntegrationAuthApps(integrationAuthId as string ?? '');
+    
+    const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState('');
+    const [targetApp, setTargetApp] = useState('');
+    const [targetEnvironment, setTargetEnvironemnt] = useState('');
+    
+    const [isLoading, setIsLoading] = useState(false);
+    
+    useEffect(() => {
+        if (workspace) {
+            setSelectedSourceEnvironment(workspace.environments[0].slug);
+        }
+    }, [workspace]);
+    
+    useEffect(() => {
+        // TODO: handle case where apps can be empty
+        if (integrationAuthApps) {
+            setTargetApp(integrationAuthApps[0].name);
+            setTargetEnvironemnt(vercelEnvironments[0].slug);
+        }
+    }, [integrationAuthApps]);
+        
+    const handleButtonClick = async () => {
+        try {
+            if (!integrationAuth?._id) return;
+
+            setIsLoading(true);
+            await createIntegration({
+                integrationAuthId: integrationAuth?._id,
+                isActive: true,
+                app: targetApp,
+                appId: null,
+                sourceEnvironment: selectedSourceEnvironment,
+                targetEnvironment,
+                owner: null
+            }); 
+            
+            setIsLoading(false);
+            router.push(
+                `/integrations/${localStorage.getItem('projectData.id')}`
+            );
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (integrationAuth && workspace && selectedSourceEnvironment && integrationAuthApps && targetApp && targetEnvironment) ? (
+    <div className="h-full w-full flex justify-center items-center">
+      <Card className="max-w-md p-8 rounded-md">
+        <CardTitle className='text-center'>Vercel Integration</CardTitle>
+        <FormControl
+          label="Project Environment"
+          className='mt-4'
+        >
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem value={sourceEnvironment.slug} key={`azure-key-vault-environment-${sourceEnvironment.slug}`}>
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vercel App"
+        >
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {integrationAuthApps.map((integrationAuthApp) => (
+              <SelectItem value={integrationAuthApp.name} key={`heroku-environment-${integrationAuthApp.name}`}>
+                {integrationAuthApp.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl
+          label="Vercel App Environment"
+        >
+          <Select
+            value={targetEnvironment}
+            onValueChange={(val) => setTargetEnvironemnt(val)}
+            className='w-full border border-mineshaft-500'
+          >
+            {vercelEnvironments.map((vercelEnvironment) => (
+              <SelectItem value={vercelEnvironment.slug} key={`vercel-environment-${vercelEnvironment.slug}`}>
+                {vercelEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button 
+            onClick={handleButtonClick}
+            color="mineshaft" 
+            className='mt-4'
+            isLoading={isLoading}
+        >
+            Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : <div />
+}
+
+VercelCreateIntegrationPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);

frontend/src/pages/integrations/vercel/oauth2/callback.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+
+import { getTranslatedServerSideProps } from '../../../../components/utilities/withTranslateProps';
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function VercelOAuth2CallbackPage() {
+    const router = useRouter();
+
+    const { code, state } = queryString.parse(router.asPath.split('?')[1]);
+    
+    useEffect(() => {
+        (async () => {
+            try {
+                // validate state
+                if (state !== localStorage.getItem('latestCSRFToken')) return;
+                localStorage.removeItem('latestCSRFToken');
+                
+                const integrationAuth = await AuthorizeIntegration({
+                    workspaceId: localStorage.getItem('projectData.id') as string,
+                    code: code as string,
+                    integration: 'vercel'
+                });
+
+                router.push(
+                    `/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`
+                );
+
+            } catch (err) {
+                console.error(err);
+            }
+        })();
+    }, []);
+    
+    return <div />
+}
+
+VercelOAuth2CallbackPage.requireAuth = true;
+
+export const getServerSideProps = getTranslatedServerSideProps(['integrations']);