Check samepage for access-token on Authorize (#252)

* check samepage for access-token on Authorize * 1.29.1 * useMemo * add time for slow connections
RoamJS · May 8, 2024 · 9a4e05d · 9a4e05d
1 parent ae8b346
commit 9a4e05d
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.29.0",
+  "version": "1.29.1",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {

diff --git a/src/components/ExportGithub.tsx b/src/components/ExportGithub.tsx
@@ -1,7 +1,16 @@
 import { Button } from "@blueprintjs/core";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import nanoid from "nanoid";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from "react";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import apiGet from "roamjs-components/util/apiGet";
+import apiPost from "roamjs-components/util/apiPost";
+import { getNodeEnv } from "roamjs-components/util/env";
 import localStorageGet from "roamjs-components/util/localStorageGet";
 import localStorageSet from "roamjs-components/util/localStorageSet";
 
@@ -44,14 +53,24 @@ export const ExportGithub = ({
   const [isGitHubAppInstalled, setIsGitHubAppInstalled] = useState(false);
   const [clickedInstall, setClickedInstall] = useState(false);
   const [repos, setRepos] = useState<UserRepos>(initialRepos);
+  const [state, setState] = useState("");
   const showGitHubLogin = isGitHubAppInstalled && !gitHubAccessToken;
   const repoSelectEnabled = isGitHubAppInstalled && gitHubAccessToken;
 
+  const isDev = useMemo(() => getNodeEnv() === "development", []);
+
   const setRepo = (repo: string) => {
     setSelectedRepo(repo);
     localStorageSet("selected-repo", repo);
   };
 
+  const handleReceivedAccessToken = (token: string) => {
+    localStorageSet("oauth-github", token);
+    setGitHubAccessToken(token);
+    setClickedInstall(false);
+    authWindow.current?.close();
+  };
+
   const fetchAndSetInstallation = useCallback(async () => {
     try {
       const res = await apiGet<{ installations: { app_id: number }[] }>({
@@ -62,7 +81,7 @@ export const ExportGithub = ({
         },
       });
       const installations = res.installations;
-      const APP_ID = 312167; // TODO - pull from process.env.GITHUB_APP_ID
+      const APP_ID = isDev ? 882491 : 312167; // TODO - pull from process.env.GITHUB_APP_ID
       const isAppInstalled = installations.some(
         (installation) => installation.app_id === APP_ID
       );
@@ -80,16 +99,16 @@ export const ExportGithub = ({
 
   // listen for messages from the auth window
   useEffect(() => {
+    const otp = nanoid().replace(/_/g, "-");
+    const key = nanoid().replace(/_/g, "-");
+    const state = `github_${otp}_${key}`;
+    setState(state);
     const handleGitHubAuthMessage = (event: MessageEvent) => {
-      const targetOrigin =
-        process.env.NODE_ENV !== "production"
-          ? "https://samepage.ngrok.io"
-          : "https://samepage.network";
+      const targetOrigin = isDev
+        ? "https://samepage.ngrok.io"
+        : "https://samepage.network";
       if (event.data && event.origin === targetOrigin) {
-        localStorageSet("oauth-github", event.data);
-        setGitHubAccessToken(event.data);
-        setClickedInstall(false);
-        authWindow.current?.close();
+        handleReceivedAccessToken(event.data);
       }
     };
 
@@ -150,7 +169,9 @@ export const ExportGithub = ({
             intent={clickedInstall ? "none" : "primary"}
             onClick={async () => {
               authWindow.current = window.open(
-                "https://github.com/apps/samepage-network",
+                isDev
+                  ? "https://github.com/apps/samepage-network-dev"
+                  : "https://github.com/apps/samepage-network",
                 "_blank",
                 `width=${WINDOW_WIDTH}, height=${WINDOW_HEIGHT}, top=${WINDOW_TOP}, left=${WINDOW_LEFT}`
               );
@@ -177,11 +198,37 @@ export const ExportGithub = ({
           icon="key"
           intent="primary"
           onClick={async () => {
+            const params = isDev
+              ? `client_id=Iv1.4bf062a6c6636672&state=${state}`
+              : `client_id=Iv1.e7e282a385b7b2da&state=${state}`;
             authWindow.current = window.open(
-              "https://github.com/login/oauth/authorize?client_id=Iv1.e7e282a385b7b2da",
+              `https://github.com/login/oauth/authorize?${params}`,
               "_blank",
               `width=${WINDOW_WIDTH}, height=${WINDOW_HEIGHT}, top=${WINDOW_TOP}, left=${WINDOW_LEFT}`
             );
+
+            let attemptCount = 0;
+            const check = () => {
+              if (attemptCount < 30) {
+                apiPost({
+                  path: "access-token",
+                  domain: isDev
+                    ? "https://api.samepage.ngrok.io"
+                    : "https://api.samepage.network",
+                  data: { state },
+                }).then((r) => {
+                  if (r.accessToken) {
+                    handleReceivedAccessToken(r.accessToken);
+                  } else {
+                    attemptCount++;
+                    setTimeout(check, 1000);
+                  }
+                });
+              } else {
+                setError("Something went wrong.  Please contact support.");
+              }
+            };
+            setTimeout(check, 1500);
           }}
         />
       )}