feat: Logout from the extension

manifest.json

@@ -20,6 +20,6 @@
     "48": "src/assets/os-icons/os-icon-48.png",
     "128": "src/assets/os-icons/os-icon-128.png"
   },
-  "host_permissions": ["<all_urls>"],
+  "host_permissions": ["https://github.com/*", "https://insights.opensauced.pizza/*"],
   "permissions": ["storage", "tabs", "cookies"]
 }

package.json

@@ -13,8 +13,6 @@
     "format": "npm run lint -- --fix"
   },
   "dependencies": {
-    "@types/chrome": "^0.0.231",
-    "@types/node-emoji": "^1.8.2",
     "date-fns": "^2.30.0",
     "gpt-tokenizer": "^1.0.5",
     "node-emoji": "^1.11.0",
@@ -26,7 +24,9 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "^1.0.14",
+    "@types/chrome": "^0.0.237",
     "@types/node": "^20.1.4",
+    "@types/node-emoji": "^1.8.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",

src/constants.ts

@@ -2,6 +2,7 @@
 export const SUPABASE_LOGIN_URL = "https://ibcwmlhcimymasokhgvn.supabase.co/auth/v1/authorize?provider=github&redirect_to=https://insights.opensauced.pizza/";
 export const SUPABASE_AUTH_COOKIE_NAME = "supabase-auth-token";
 export const OPEN_SAUCED_AUTH_TOKEN_KEY = "os-access-token";
+export const OPEN_SAUCED_OPTED_LOG_OUT_KEY = "opted-log-out";
 export const OPEN_SAUCED_INSIGHTS_DOMAIN = "insights.opensauced.pizza";
 export const AI_PR_DESCRIPTION_CONFIG_KEY = "ai-pr-description-config";
 

src/pages/aiprdescription.tsx

@@ -122,7 +122,7 @@ const AIPRDescription = () => {
                                             ref={setRefFromKey("length")}
                                             className="text-black p-1.5 rounded-md mb-1 w-half accent-orange"
                                             id="length"
-                                            max="600"
+                                            max="500"
                                             min="100"
                                             name="length"
                                             type="range"

src/pages/profile.tsx

@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
 import { FaBrain, FaChevronLeft, FaRobot } from "react-icons/fa";
 import { RiLinkedinFill, RiLinkM, RiTwitterFill } from "react-icons/ri";
-import { AiOutlineReload } from "react-icons/ai";
 import { SiC, SiCplusplus, SiCsharp, SiGoland, SiJavascript, SiPhp, SiPython, SiReact, SiRuby, SiRust, SiTypescript } from "react-icons/si";
 import { DiJava } from "react-icons/di";
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { getUserData, getUserPRData, getUserHighlightsData } from "../utils/fetchOpenSaucedApiData";
 import { emojify } from "node-emoji";
-import { goBack } from "react-chrome-extension-router";
+import { goBack, goTo } from "react-chrome-extension-router";
 import { getRelativeDays } from "../utils/dateUtils";
 import { getUserPRVelocity } from "../utils/getUserPRVelocity";
+import { BiExit } from "react-icons/bi";
+import Start from "./start";
+import { optLogOut } from "../utils/checkAuthentication";
 
 const interestIcon = {
     python: <SiPython />,
@@ -72,16 +74,14 @@ export const Profile = ({ username }: { username: string }) => {
                     </div>
 
                     <button
-                        className="hover:text-orange text-lg"
-                        title="Refresh user data"
-                        onClick={async () => {
-                            const [userData, userPRData] = await Promise.all([getUserData(username), getUserPRData(username)]);
-
-                            setUser(userData);
-                            setUserPR(userPRData);
+                        className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-red-600 text-white gap-1 p-1.5 px-2 w-fit rounded-md font-medium text-sm"
+                        onClick={() => {
+                            optLogOut();
+                            goTo(Start);
                         }}
                     >
-                        <AiOutlineReload />
+                        <BiExit />
+            Log Out
                     </button>
                 </header>
 

src/pages/start.tsx

@@ -1,5 +1,5 @@
 import OpenSaucedLogo from "../assets/opensauced-logo.svg";
-import { SUPABASE_LOGIN_URL } from "../constants";
+import { optLogIn } from "../utils/checkAuthentication";
 
 const Start = () => (
     <div className="p-4 bg-slate-800">
@@ -23,15 +23,13 @@ const Start = () => (
         browser extension.
         </p>
 
-        <a
-            href={SUPABASE_LOGIN_URL}
-            rel="noopener noreferrer"
-            target="_blank"
+        <button
             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={optLogIn}
         >
         Login
-        </a>
+        </button>
     </div>
 );
 

src/utils/checkAuthentication.ts

@@ -1,12 +1,18 @@
 import {
     OPEN_SAUCED_AUTH_TOKEN_KEY,
+    OPEN_SAUCED_OPTED_LOG_OUT_KEY,
     SUPABASE_AUTH_COOKIE_NAME,
     OPEN_SAUCED_INSIGHTS_DOMAIN,
+    SUPABASE_LOGIN_URL,
 } from "../constants";
 import { checkTokenValidity } from "./fetchOpenSaucedApiData";
 import setAccessTokenInChromeStorage from "../utils/setAccessToken";
 
-export const checkAuthentication = () => {
+export const checkAuthentication = async () => {
+    if (await hasOptedLogOut()) {
+        return chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY);
+    }
+
     chrome.cookies.get(
         {
             name: SUPABASE_AUTH_COOKIE_NAME,
@@ -36,4 +42,18 @@ export const isLoggedIn = async (): Promise<boolean> => Object.entries(await chr
 
 export const getAuthToken = async (): Promise<string> => (await chrome.storage.sync.get(OPEN_SAUCED_AUTH_TOKEN_KEY))[OPEN_SAUCED_AUTH_TOKEN_KEY];
 
+export const optLogOut = () => {
+    void chrome.storage.sync.remove(OPEN_SAUCED_AUTH_TOKEN_KEY);
+    void chrome.storage.local.set({ [OPEN_SAUCED_OPTED_LOG_OUT_KEY]: true });
+};
+
+export const optLogIn = () => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    void chrome.storage.local.set({ [OPEN_SAUCED_OPTED_LOG_OUT_KEY]: false });
+    window.open(SUPABASE_LOGIN_URL, "_blank");
+};
+
+const hasOptedLogOut = async (): Promise<boolean> => (await chrome.storage.local.get(OPEN_SAUCED_OPTED_LOG_OUT_KEY))[OPEN_SAUCED_OPTED_LOG_OUT_KEY] === true;
 

src/worker/background.ts

@@ -7,7 +7,7 @@ chrome.cookies.onChanged.addListener(changeInfo => {
         changeInfo.cookie.name === SUPABASE_AUTH_COOKIE_NAME ||
       changeInfo.cookie.domain === OPEN_SAUCED_INSIGHTS_DOMAIN
     ) {
-        checkAuthentication();
+        void checkAuthentication();
     }
 });