fix:loggin and session management with supbase and saving experies time

Author: mohammadkaif0211

src/pages/background/index.ts

@@ -86,9 +86,9 @@ chrome.action.onClicked.addListener(async (tab) => {
   if (await isRecordingInProgress()) {
     console.log("=== RECORDING IS IN PROGRESS ===");
 
-    const tabData = await isSameTab()
-    console.log("🚀 ~ chrome.action.onClicked.addListener ~ tabData:", tabData)
-    if (!!tabData) {
+    const tabData = await isSameTab();
+    console.log("🚀 ~ chrome.action.onClicked.addListener ~ tabData:", tabData);
+    if (tabData) {
       initateRecordingStop();
       // If user is trying to record from an another tab
     } else {
@@ -168,11 +168,13 @@ const setTokens = async (
 
       const accessToken = params.get("access_token");
       const refreshToken = params.get("refresh_token");
+      const expiresIn = parseInt(params.get("expires_in"), 10);
 
-      if (accessToken && refreshToken) {
+      if (accessToken && refreshToken && !isNaN(expiresIn)) {
         if (!tab.id) return;
 
-        // console.log("--> tokens: ", accessToken, refreshToken);
+        const expiryTime = Date.now() + expiresIn * 1000; // expiresIn is in seconds
+        console.log("--> tokens: ", accessToken, refreshToken, expiryTime);
 
         // we can close that tab now
         await chrome.tabs.remove(tab.id);
@@ -194,6 +196,9 @@ const setTokens = async (
         await chrome.storage.local.set({
           refreshToken,
         });
+        await chrome.storage.local.set({
+          expiryTime,
+        });
 
         // remove tab listener as tokens are set
         chrome.tabs.onUpdated.removeListener(setTokens);

src/pages/sidepanel/ActiveMeetingTab.tsx

@@ -1,19 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 import { RecordingStates } from "../../../utils/recordingState";
 import { SpeakerType } from "../../../utils/speakerType";
-import { Message, areTokensSet, isSameTab } from "../../../utils/recorderUtils";
+import {
+  Message,
+  areTokensSet,
+  getUserInfo,
+  isSameTab,
+} from "../../../utils/recorderUtils";
 
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-
 import clsx from "clsx";
-
 import {
   addTranscription,
   updateEndTime,
   addAndGetMeetingInfo,
   getClientTranscript,
-  getCurrentUser,
 } from "../../../utils/supabase";
 import JarvisScreen from "./JarvisScreen";
 import PlaybookDropdown from "./PlaybookDropdown";
@@ -66,7 +68,6 @@ const ActiveMeetingTab = () => {
   );
 
   const [query, setQuery] = useState<string>("");
-
   const showListeningMsgRef = useRef<boolean>(null);
   const ActiveMeetingTabRef = useRef<HTMLDivElement>(null);
   const meetingIdRef = useRef<number>(-1);
@@ -164,9 +165,13 @@ const ActiveMeetingTab = () => {
   }
 
   async function handleTokens() {
-    const userFound = await getCurrentUser();
+    // const userFound = await getCurrentUser();
+    // const user = await getUserInfo();
+    // console.log("User found in handleTokens", user);
+    // console.log("user found", userFound);
+    // console.log("is set", isSet);
     const isSet = await areTokensSet();
-    if (isSet && userFound) setLoggedIn(true);
+    if (isSet) setLoggedIn(true);
   }
 
   useEffect(() => {
@@ -366,7 +371,7 @@ const ActiveMeetingTab = () => {
             className="p-2 px-4 m-2 bg-gray-500 rounded-md mx-auto"
             onClick={handleLogin}
           >
-            LogIn
+            Login
           </button>
         </div>
       )}

utils/recorderUtils.tsx

@@ -1,4 +1,5 @@
 import { RecordingStates } from "./recordingState";
+import { fetchUserInfo, refreshTokens } from "./supabase";
 
 export interface MeetingUrl {
   cur_meeting_url: string;
@@ -11,6 +12,7 @@ export interface RecordingState {
 export interface Tokens {
   accessToken: string;
   refreshToken: string;
+  expiryTime: number;
 }
 
 export interface Message {
@@ -64,17 +66,50 @@ export async function isRecordingInProgress() {
 
 // These tokens are set while authentication.
 export async function areTokensSet() {
-  const { accessToken, refreshToken } = (await getTokens()) as Tokens;
-  return accessToken && refreshToken;
+  const { accessToken, refreshToken, expiryTime } =
+    (await getTokens()) as Tokens;
+  if (!accessToken || !refreshToken) {
+    return false;
+  }
+  if (Date.now() > expiryTime) {
+    // Token expired, try to refresh
+
+    return await refreshTokens(refreshToken);
+  }
+  return true;
 }
 
 export async function getTokens() {
   return new Promise((resolve, reject) => {
     chrome.storage.local.get(
-      ["accessToken", "refreshToken"],
-      ({ accessToken, refreshToken }) => {
-        resolve({ accessToken, refreshToken });
+      ["accessToken", "refreshToken", "expiryTime"],
+      ({ accessToken, refreshToken, expiryTime }) => {
+        resolve({ accessToken, refreshToken, expiryTime });
       }
     );
   });
 }
+
+// Function to store tokens and expiry time
+export async function storeTokens(
+  accessToken: string,
+  refreshToken: string,
+  expiresIn: number
+) {
+  const expiryTime = Date.now() + expiresIn * 1000;
+  await chrome.storage.local.set({
+    accessToken,
+    refreshToken,
+    expiryTime,
+  });
+}
+
+export async function getUserInfo() {
+  const tokensValid = await areTokensSet();
+  if (!tokensValid) {
+    throw new Error("User is not authenticated");
+  }
+
+  const { accessToken } = (await getTokens()) as Tokens;
+  return fetchUserInfo(accessToken);
+}