feat: Introduce openWithPopup auth step

packages/backend/src/apps/twitter/info.json

@@ -84,7 +84,12 @@
       "step": 3,
       "type": "openWithPopup",
       "name": "openTwitterAuthPopup",
-      "fields": null
+      "fields": [
+        {
+          "name": "url",
+          "value": "{createAuthLink.url}"
+        }
+      ]
     }
   ]
 }

packages/web/src/components/AddAppConnection/index.tsx

@@ -1,4 +1,5 @@
-import { useApolloClient, useMutation  } from '@apollo/client';
+import { useEffect } from 'react';
+import { useApolloClient } from '@apollo/client';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -21,12 +22,31 @@ type Response = {
   [key: string]: any;
 }
 
+const BASE_URL = 'http://localhost:3001';
+
+const parseData = (event: any) => {
+  // Do we trust the sender of this message? (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== BASE_URL) {
+    return;
+  }
+
+  return new URLSearchParams(event.data);
+};
+
 export default function AddAppConnection(props: AddAppConnectionProps){
   const { application, onClose } = props;
   const { key, fields, authenticationSteps } = application;
 
   const apollo = useApolloClient();
 
+  useEffect(() => {
+    if (window.opener) {
+      window.opener.postMessage(window.location.search);
+      window.close();
+    }
+  });
+
   const submitHandler: SubmitHandler<FieldValues> = async (data) => {
     const response: Response = {
       key,
@@ -34,15 +54,29 @@ export default function AddAppConnection(props: AddAppConnectionProps){
     };
 
     for await (const authenticationStep of authenticationSteps) {
-      const mutation = MUTATIONS[authenticationStep.name as string];
       const variables = computeAuthStepVariables(authenticationStep, response);
 
-      const mutationResponse: any = await apollo.mutate({
+      if (authenticationStep.type === 'mutation') {
-        mutation,
+        const mutation = MUTATIONS[authenticationStep.name as string];
-        variables,
-      });
 
-      response[authenticationStep.name] = mutationResponse.data[authenticationStep.name];
+        const mutationResponse: any = await apollo.mutate({
+          mutation,
+          variables,
+        });
+
+        const responseData = mutationResponse.data[authenticationStep.name];
+        response[authenticationStep.name] = responseData;
+      }
+
+      if (authenticationStep.type === 'openWithPopup') {
+        const windowFeatures = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
+        const url = variables.url;
+
+        const popup: any = window.open(url, '_blank', windowFeatures);
+        popup?.focus();
+
+        window.addEventListener('message', parseData, false);
+      }
     }
   };