Fix access token sometimes invalid in browser context (#136)
* Update dependencies * Fix access token sometimes invalid in browser context
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Generated
+23
-23
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user