xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
auth without refresh?
author
Morgan
date
(May 21, 2025, 2:59 PM +0200)
commit
27aa7404
27aa7404f45dbe4410426d7da98396d961ede46a
parent
b31eb319
b31eb3192c088403404b5f8531f007b5989676c3
+25
-6
+17
-3
src/lib/stores/user.svelte.js
+17
-3
src/lib/stores/user.svelte.js
···
2
2
import { browser } from '$app/environment';
3
3
import { goto } from '$app/navigation';
4
4
5
+
// Using Svelte 5 state
5
6
let user = $state({
6
7
selectedLanguages: [],
7
8
translators: ['deepl'], // Default to deepl, can support others in future
···
12
13
username: null
13
14
},
14
15
syncing: false
16
+
});
17
+
18
+
// Make the auth state reactive for components
19
+
$effect(() => {
20
+
// This effect will run when any property of user.auth changes
21
+
// Just accessing the properties to trigger the effect when they change
22
+
const { isAuthenticated, id, email, username } = user.auth;
15
23
});
16
24
17
25
// Load from localStorage on module load
···
215
223
await translationHistoryStore.loadFromDatabase();
216
224
}
217
225
226
+
// Add a small delay to ensure the UI updates before navigation
227
+
await new Promise(resolve => setTimeout(resolve, 10));
228
+
218
229
// Redirect to translate page
219
-
goto('/');
230
+
goto('/', { replaceState: true });
220
231
221
232
return { success: true };
222
233
} catch (error) {
···
251
262
translationHistoryStore.clearHistory();
252
263
}
253
264
254
-
// Redirect to home page after logout
255
-
goto('/');
265
+
// Add a small delay to ensure the UI updates before navigation
266
+
await new Promise(resolve => setTimeout(resolve, 10));
267
+
268
+
// Redirect to home page after logout, using replaceState to prevent navigation issues
269
+
goto('/', { replaceState: true });
256
270
257
271
return { success: true };
258
272
} catch (error) {
+8
-3
src/routes/+layout.svelte
+8
-3
src/routes/+layout.svelte
···
58
58
(userData && currentAuthState.isAuthenticated && userData.id !== currentAuthState.id);
59
59
60
60
if (userChanged) {
61
+
console.log('[LAYOUT] Auth state changed, updating userStore');
61
62
userStore.setAuthState(userData);
62
63
63
64
// Initialize user preferences from server data if auth state changed
···
67
68
}
68
69
}
69
70
});
71
+
72
+
// Create reactive references to the auth state for the navbar
73
+
const isAuthenticated = $derived(userStore.user.auth.isAuthenticated);
74
+
const username = $derived(userStore.user.auth.username);
70
75
</script>
71
76
72
77
<svelte:head>
···
81
86
<li><a href="/" class:active={$page.url.pathname === '/'}>Translate</a></li>
82
87
<li><a href="/languages" class:active={$page.url.pathname.startsWith('/languages')} title="Languages"><Languages size={20}/></a></li>
83
88
<li><a href="/history" class:active={$page.url.pathname.startsWith('/history')}>History</a></li>
84
-
{#if userStore.user.auth.isAuthenticated}
89
+
{#if isAuthenticated}
85
90
<li>
86
91
<a href="/user" class:active={$page.url.pathname.startsWith('/user')} class="user-profile-link">
87
-
{#if userStore.user.auth.username}
88
-
{userStore.user.auth.username}
92
+
{#if username}
93
+
{username}
89
94
{:else}
90
95
Profile
91
96
{/if}