feat: Auto PAT authentication (#29)

* chore: Added worker script

* feat: auto-pat-authentication

* chore: Added empty export from the worker file to build as module

* fix: Added * in the manifest to resolve prod build error

manifest.json

@@ -7,13 +7,23 @@
     {
       "js": ["src/content-scripts/profileScreen.ts"],
       "matches": ["https://github.com/*"]
+    },
+    {
+      "js": ["src/content-scripts/hotOSHomePage.ts"],
+      "matches": ["https://hot.opensauced.pizza/*"],
+      "run_at": "document_end"
     }
   ],
+  "background": {
+    "service_worker": "src/worker/background.ts",
+    "type": "module"
+  },
   "icons": {
     "16": "src/assets/os-icons/os-icon-16.png",
     "32": "src/assets/os-icons/os-icon-32.png",
     "48": "src/assets/os-icons/os-icon-48.png",
     "128": "src/assets/os-icons/os-icon-128.png"
   },
-  "permissions": ["storage"]
+  "host_permissions": ["<all_urls>"],
+  "permissions": ["storage","webRequest"]
 }

src/App.tsx

@@ -1,15 +1,14 @@
 import { useState, useEffect } from "react";
 
 import Start from "./pages/start";
-import SignIn from "./pages/signin";
 import Home from "./pages/home";
 import Loading from "./pages/loading";
 
 import { checkTokenValidity } from "./utils/fetchOpenSaucedApiData";
 
 function App() {
   const [osAccessToken, setOsAccessToken] = useState("");
-  // renderedPage can be either "start", "home", "signin" or "loading"
+  // renderedPage can be either "start", "home" or "loading"
   const [renderedPage, setRenderedPage] = useState("loading");
 
   useEffect(() => {
@@ -36,8 +35,6 @@ function App() {
         <Start setRenderedPage={setRenderedPage} />
       ) : renderedPage === "home" ? (
         <Home osAccessToken={osAccessToken} setRenderedPage={setRenderedPage} />
-      ) : renderedPage === "signin" ? (
-        <SignIn setRenderedPage={setRenderedPage} />
       ) : (
         <Loading />
       )}

src/content-scripts/hotOSHomePage.ts

@@ -0,0 +1,22 @@
+import { checkTokenValidity } from "../utils/fetchOpenSaucedApiData";
+import getAccessToken from "../utils/getAccessToken";
+import setAccessTokenInChromeStorage from "../utils/setAccessToken";
+
+const processHotOSHomePage = async () => {
+  const data = await chrome.storage.sync.get(["os-access-token"]);
+  if (data["os-access-token"]) return;
+  try {
+    const accessToken = getAccessToken();
+    if (!accessToken) return;
+
+    const isValid = await checkTokenValidity(accessToken);
+    if (!isValid) return;
+
+    await setAccessTokenInChromeStorage(accessToken);
+  } catch (error) {
+    console.error("Error processing Hot home page:", error);
+  }
+};
+
+//The local storage takes time to set after the document is idle
+setTimeout(processHotOSHomePage, 1000);

src/pages/start.tsx

@@ -18,13 +18,15 @@ function Start({ setRenderedPage }: StartProps) {
         </a>{" "}
         browser extension.
       </p>
-      <button
-        className="bg-orange border-none rounded-md text-white font-bold py-2 px-4 cursor-pointer
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://ibcwmlhcimymasokhgvn.supabase.co/auth/v1/authorize?provider=github&redirect_to=https://hot.opensauced.pizza/"
+        className="bg-orange no-underline border-none rounded-md text-white font-bold py-2 px-4 cursor-pointer
           bg-gradient-to-r from-[#e67e22] to-[#d35400]"
-        onClick={() => setRenderedPage("signin")}
       >
-        Get Started
-      </button>
+        Login!
+      </a>
     </div>
   );
 }

src/utils/getAccessToken.ts

@@ -0,0 +1,8 @@
+const getAccessToken = (): string | null => {
+    const localStore = window.localStorage.getItem("supabase.auth.token");
+    if (localStore === null) return null;
+    return JSON.parse(localStore)?.currentSession?.access_token;
+  };
+
+  export default getAccessToken;
+

src/utils/setAccessToken.ts

@@ -0,0 +1,14 @@
+const setAccessTokenInChromeStorage = (accessToken: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      chrome.storage.sync.set({ "os-access-token": accessToken }, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve();
+        }
+      });
+    });
+  };
+
+  export default setAccessTokenInChromeStorage;
+

src/worker/background.ts

@@ -0,0 +1,8 @@
+chrome.webRequest.onCompleted.addListener(
+    (details) => {
+      chrome.storage.sync.remove("os-access-token");
+    },
+    { urls: ["https://ibcwmlhcimymasokhgvn.supabase.co/auth/v1/logout"] }
+  );
+
+export {};