Preliminary Vercel integration

frontend/pages/api/integrations/updateIntegration.js

@@ -9,13 +9,15 @@ import SecurityClient from "~/utilities/SecurityClient";
  * @param {String} obj.app - name of app 
  * @param {String} obj.environment - project environment to push secrets from
  * @param {Boolean} obj.isActive - active state
+ * @param {String} obj.target - (optional) target (environment)
  * @returns
  */
 const updateIntegration = ({ 
   integrationId, 
   app, 
-  environment, 
-  isActive 
+  environment,
+  isActive,
+  target
 }) => { 
   return SecurityClient.fetchCall(
     "/api/v1/integration/" + integrationId,
@@ -27,7 +29,8 @@ const updateIntegration = ({
       body: JSON.stringify({
         app,
         environment,
-        isActive
+        isActive,
+        target
       }),
     }
   ).then(async (res) => {

frontend/pages/heroku.js

@@ -16,17 +16,17 @@ export default function Heroku() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(async () => {
     try {
-      if (state == localStorage.getItem("latestCSRFToken")) {
+      if (state === localStorage.getItem('latestCSRFToken')) {
+        localStorage.removeItem('latestCSRFToken');
         await AuthorizeIntegration({
-          workspaceId: localStorage.getItem("projectData.id"),
+          workspaceId: localStorage.getItem('projectData.id'),
           code,
           integration: "heroku",
         });
         router.push("/integrations/" + localStorage.getItem("projectData.id"));
       }
     } catch (error) {
-      console.error(error);
-      console.log("Error - Not logged in yet");
+      console.error('Heroku integration error: ', error);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

frontend/pages/integrations/[id].js

@@ -113,7 +113,7 @@ export default function Integrations() {
    * @returns 
    */
   const handleIntegrationOption = async ({ integrationOption }) => {
-    // TODO: modularize
+    // TODO: modularize and handle switch by slug
     
     // generate CSRF token for OAuth2 code-token exchange integrations
     const csrfToken = crypto.randomBytes(16).toString("hex");
@@ -121,8 +121,13 @@ export default function Integrations() {
     
     switch (integrationOption.name) {
       case 'Heroku':
-        window.location = `https://id.heroku.com/oauth/authorize?client_id=7b1311a1-1cb2-4938-8adf-f37a399ec41b&response_type=code&scope=write-protected&state=${csrfToken}`;
-        return;
+        // console.log('Heroku integration ', integrationOption);
+        window.location = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${csrfToken}`;
+        break;
+      case 'Vercel':
+        console.log('Vercel integration ', integrationOption);
+        window.location = `https://vercel.com/integrations/infisical/new?state=${csrfToken}`;
+        break;
     }
   }
   

frontend/pages/vercel.js

@@ -7,17 +7,40 @@ import AuthorizeIntegration from "./api/integrations/authorizeIntegration";
 export default function Vercel() {
   const router = useRouter();
   const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
+  const code = parsedUrl.code;
+  const state = parsedUrl.state
+  
+  // modify comment here
   
   /**
    * Here we forward to the default workspace if a user opens this url
    */
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(async () => {
-    console.log('parsedUrl, xxx', parsedUrl);
+    console.log('parsedUrl for vercel ', parsedUrl);
+    if (state === localStorage.getItem('latestCSRFToken')) {
+      localStorage.removeItem('latestCSRFToken');
+      
+      console.log('integ');
+      console.log('code', code);
+      console.log('state', state);
+      
+      await AuthorizeIntegration({
+        workspaceId: localStorage.getItem('projectData.id'),
+        code,
+        integration: "vercel"
+      });
+      
+      router.push("/integrations/" + localStorage.getItem("projectData.id"));
+    }
+    // parsedUrl.code
+    // parsedUrl.configurationId
+    // parsedUrl.next
+    // parsedUrl.state
     try {
-    
+  
     } catch (err) {
-        
+      console.error('Vercel integration error: ', err);
     }
     
     // eslint-disable-next-line react-hooks/exhaustive-deps