From e0323bb0ed3ccc47ad4f4530ed215d194966612f Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Thu, 9 Jan 2025 17:58:55 +0100 Subject: [PATCH] Fix access token sometimes invalid in browser context (#136) * Update dependencies * Fix access token sometimes invalid in browser context --- apps/readest-app/package.json | 6 +-- apps/readest-app/src/context/AuthContext.tsx | 42 +++++++++++------- apps/readest-app/src/libs/sync.ts | 6 +++ pnpm-lock.yaml | 46 ++++++++++---------- 4 files changed, 59 insertions(+), 41 deletions(-) diff --git a/apps/readest-app/package.json b/apps/readest-app/package.json index acc28de2..b0193372 100644 --- 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 index 3feb9e38..145a5b47 100644 --- 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; + 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); - localStorage.setItem('token', access_token); - localStorage.setItem('user', JSON.stringify(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 index b539d70a..330f3830 100644 --- 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 { + // 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 index 97686471..75789499 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -111,8 +111,8 @@ importers: specifier: 15.1.0 version: 15.1.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) posthog-js: - specifier: ^1.194.1 - version: 1.194.1 + specifier: ^1.205.0 + version: 1.205.0 react: specifier: 19.0.0 version: 19.0.0 @@ -160,8 +160,8 @@ importers: specifier: ^8.0.0 version: 8.0.0 daisyui: - specifier: ^4.12.14 - version: 4.12.14(postcss@8.4.49) + specifier: ^4.12.23 + version: 4.12.23(postcss@8.4.49) dotenv-cli: specifier: ^7.4.4 version: 7.4.4 @@ -193,8 +193,8 @@ importers: specifier: ^4.0.2 version: 4.0.2(webpack@5.96.1) tailwindcss: - specifier: ^3.4.15 - version: 3.4.15(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)) + specifier: ^3.4.17 + version: 3.4.17(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)) typescript: specifier: ^5.7.2 version: 5.7.2 @@ -1352,8 +1352,8 @@ packages: resolution: {integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - daisyui@4.12.14: - resolution: {integrity: sha512-hA27cdBasdwd4/iEjn+aidoCrRroDuo3G5W9NDKaVCJI437Mm/3eSL/2u7MkZ0pt8a+TrYF3aT2pFVemTS3how==} + daisyui@4.12.23: + resolution: {integrity: sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==} engines: {node: '>=16.9.0'} damerau-levenshtein@1.0.8: @@ -2159,14 +2159,14 @@ packages: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} - lilconfig@2.1.0: - resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} - engines: {node: '>=10'} - lilconfig@3.1.2: resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==} engines: {node: '>=14'} + lilconfig@3.1.3: + resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} + engines: {node: '>=14'} + lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -2549,8 +2549,8 @@ packages: resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} engines: {node: ^10 || ^12 || >=14} - posthog-js@1.194.1: - resolution: {integrity: sha512-d68hmU9DY4iPe3WneBlnglERhimRhXuF7Lx0Au6OTmOL+IFdFUxB3Qf5LaLqJc1QLt3NUolMq1HiXOaIULe3kQ==} + posthog-js@1.205.0: + resolution: {integrity: sha512-zP4SQ9Dg9JwqkEteoAOviAAAMdT/nJ4vk1jqfE6fVudziEa3szkQWd7czk5ehlEdrKFUE85MonCKW4L/uwtybA==} preact@10.25.0: resolution: {integrity: sha512-6bYnzlLxXV3OSpUxLdaxBmE7PMOu0aR3pG6lryK/0jmvcDFPlcXGQAt5DpK3RITWiDrfYZRI0druyaK/S9kYLg==} @@ -2980,8 +2980,8 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - tailwindcss@3.4.15: - resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==} + tailwindcss@3.4.17: + resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==} engines: {node: '>=14.0.0'} hasBin: true @@ -4405,7 +4405,7 @@ snapshots: culori@3.3.0: {} - daisyui@4.12.14(postcss@8.4.49): + daisyui@4.12.23(postcss@8.4.49): dependencies: css-selector-tokenizer: 0.8.0 culori: 3.3.0 @@ -5344,10 +5344,10 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 - lilconfig@2.1.0: {} - lilconfig@3.1.2: {} + lilconfig@3.1.3: {} + lines-and-columns@1.2.4: {} loader-runner@4.3.0: {} @@ -5655,7 +5655,7 @@ snapshots: postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)): dependencies: - lilconfig: 3.1.2 + lilconfig: 3.1.3 yaml: 2.6.1 optionalDependencies: postcss: 8.4.49 @@ -5709,7 +5709,7 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 - posthog-js@1.194.1: + posthog-js@1.205.0: dependencies: core-js: 3.39.0 fflate: 0.4.8 @@ -6180,7 +6180,7 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - tailwindcss@3.4.15(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)): + tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 @@ -6191,7 +6191,7 @@ snapshots: glob-parent: 6.0.2 is-glob: 4.0.3 jiti: 1.21.6 - lilconfig: 2.1.0 + lilconfig: 3.1.3 micromatch: 4.0.8 normalize-path: 3.0.0 object-hash: 3.0.0