Fix access token sometimes invalid in browser context (#136)

* Update dependencies * Fix access token sometimes invalid in browser context
readest · Jan 9, 2025 · e0323bb · e0323bb · github-actions · Jan 9, 2025
1 parent 112c5fa
commit e0323bb
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 41 deletions.
diff --git a/apps/readest-app/package.json b/apps/readest-app/package.json
@@ -55,7 +55,7 @@
     "i18next-http-backend": "^3.0.1",
     "js-md5": "^0.8.3",
     "next": "15.1.0",
-    "posthog-js": "^1.194.1",
+    "posthog-js": "^1.205.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-i18next": "^15.2.0",
@@ -73,7 +73,7 @@
     "@types/tinycolor2": "^1.4.6",
     "autoprefixer": "^10.4.20",
     "cpx2": "^8.0.0",
-    "daisyui": "^4.12.14",
+    "daisyui": "^4.12.23",
     "dotenv-cli": "^7.4.4",
     "eslint": "^9.16.0",
     "eslint-config-next": "15.0.3",
@@ -84,7 +84,7 @@
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^7.0.2",
     "raw-loader": "^4.0.2",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2"
   }
 }
diff --git a/apps/readest-app/src/context/AuthContext.tsx b/apps/readest-app/src/context/AuthContext.tsx
@@ -29,31 +29,39 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   });
 
   useEffect(() => {
-    const syncSession = (session: { access_token: string; user: User } | null) => {
-      console.log('Syncing session');
+    const syncSession = (
+      session: { access_token: string; refresh_token: string; user: User } | null,
+    ) => {
       if (session) {
-        const { access_token, user } = session;
-        setToken(access_token);
-        setUser(user);
+        console.log('Syncing session');
+        const { access_token, refresh_token, user } = session;
         localStorage.setItem('token', access_token);
+        localStorage.setItem('refresh_token', refresh_token);
         localStorage.setItem('user', JSON.stringify(user));
+        setToken(access_token);
+        setUser(user);
       } else {
+        console.log('Clearing session');
         localStorage.removeItem('token');
+        localStorage.removeItem('refresh_token');
         localStorage.removeItem('user');
         setToken(null);
         setUser(null);
       }
     };
-    const fetchSession = async () => {
-      const { data } = await supabase.auth.getSession();
-      syncSession(data.session);
+    const refreshSession = async () => {
+      try {
+        await supabase.auth.refreshSession();
+      } catch {
+        syncSession(null);
+      }
     };
 
-    fetchSession();
     const { data: subscription } = supabase.auth.onAuthStateChange((_, session) => {
       syncSession(session);
     });
 
+    refreshSession();
     return () => {
       subscription?.subscription.unsubscribe();
     };
@@ -69,12 +77,16 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   const logout = async () => {
     console.log('Logging out');
-    await supabase.auth.refreshSession();
-    await supabase.auth.signOut();
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    setToken(null);
-    setUser(null);
+    try {
+      await supabase.auth.refreshSession();
+    } catch {
+    } finally {
+      await supabase.auth.signOut();
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      setToken(null);
+      setUser(null);
+    }
   };
 
   return (

diff --git a/apps/readest-app/src/libs/sync.ts b/apps/readest-app/src/libs/sync.ts
@@ -79,6 +79,12 @@ export class SyncClient {
   }
 
   private async getAccessToken(): Promise<string | null> {
+    // In browser context there might be two instances of supabase one in the app route
+    // and the other in the pages route, and they might have different sessions
+    // making the access token invalid for API calls. In that case we should use localStorage.
+    if (isWebAppPlatform()) {
+      return localStorage.getItem('token') ?? null;
+    }
     const { data } = await supabase.auth.getSession();
     return data?.session?.access_token ?? null;
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml