IO-256 QBO Authorization Flow.

client/src/components/_test/test.component.jsx

@@ -1,25 +1,9 @@
-import Axios from "axios";
 import React from "react";
+import QboAuthorizeComponent from "../qbo-authorize/qbo-authorize.component";
 export default function Test() {
-  const handleQbSignIn = async () => {
-    const result = await Axios.post("/qbo/authorize", { userId: "1234" });
-    console.log("handleQbSignIn -> result", result.data);
-    // window.open(result.data, "_blank", "toolbar=0,location=0,menubar=0");
-
-    var parameters = "location=1,width=800,height=650";
-    parameters +=
-      ",left=" +
-      (window.screen.width - 800) / 2 +
-      ",top=" +
-      (window.screen.height - 650) / 2;
-
-    // Launch Popup
-    window.open(result.data, "connectPopup", parameters);
-  };
-
   return (
     <div>
-      <button onClick={handleQbSignIn}>Sign Into Qb.</button>
+      <QboAuthorizeComponent />
     </div>
   );
 }

client/src/components/qbo-authorize/qbo-authorize.component.jsx

@@ -0,0 +1,81 @@
+import { Button, Space } from "antd";
+import Axios from "axios";
+import React, { useEffect } from "react";
+import QboImg from "./qbo_signin.png";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+import { useCookies } from "react-cookie";
+
+export default function QboAuthorizeComponent() {
+  const location = useLocation();
+
+  const [cookies, setCookie] = useCookies(["access_token", "refresh_token"]);
+
+  const handleQbSignIn = async () => {
+    const result = await Axios.post("/qbo/authorize");
+    console.log("pushing to history", result.data);
+    window.location.href = result.data;
+  };
+
+  useEffect(() => {
+    const ExchangeForAccessToken = async () => {
+      const response = await Axios.get(`/qbo/callback${location.search}`);
+
+      let expires = new Date();
+      expires.setTime(expires.getTime() + response.data.expires_in * 1000);
+      setCookie("qbo_access_token", response.data.access_token, {
+        path: "/",
+        expires,
+      });
+      expires = new Date();
+      expires.setTime(
+        expires.getTime() + response.data.x_refresh_token_expires_in * 1000
+      );
+      setCookie("qbo_refresh_token", response.data.refresh_token, {
+        path: "/",
+        expires,
+      });
+    };
+    const qs = queryString.parse(location.search);
+    const { code, state, realmId } = qs;
+    const hasBeenCalledBack = code && realmId && state;
+
+    if (hasBeenCalledBack) {
+      setCookie("qbo_code", code, { path: "/" });
+      setCookie("qbo_state", state, { path: "/" });
+
+      let expires = new Date();
+      expires.setTime(expires.getTime() + 8726400 * 1000);
+
+      setCookie("qbo_realmId", realmId, {
+        path: "/",
+        expires,
+      });
+      ExchangeForAccessToken();
+    }
+  }, [location, setCookie]);
+
+  return (
+    <div>
+      <Space>
+        <Button onClick={handleQbSignIn}>
+          <img
+            src={QboImg}
+            alt="Sign in with Intuit"
+            onClick={handleQbSignIn}
+          />
+        </Button>
+        <Button
+          onClick={async () => {
+            const response = await Axios.get(`/qbo/refresh`, {
+              withCredentials: true,
+            });
+            console.log(response);
+          }}
+        >
+          Refresh Token
+        </Button>
+      </Space>
+    </div>
+  );
+}