mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-04 13:21:45 +00:00
Code Activity

fix: prevent page flickering on redirection based on auth state

Browse Source
This commit is contained in:
Elias Schneider
2025-10-24 11:08:31 +02:00
parent 47927d1574
commit 10d640385f
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lib/utils/redirection-util.ts
View File

@@ -13,6 +13,7 @@ export function getAuthRedirectPath(path: string, user: User | null) {
path.startsWith('/lc/') || path.startsWith('/lc/') ||
path == '/signup' || path == '/signup' ||
path == '/signup/setup' || path == '/signup/setup' ||
path == '/setup' ||
path.startsWith('/st/'); path.startsWith('/st/');
const isPublicPath = ['/authorize', '/device', '/health', '/healthz'].includes(path); const isPublicPath = ['/authorize', '/device', '/health', '/healthz'].includes(path);
const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/'); const isAdminPath = path == '/settings/admin' || path.startsWith('/settings/admin/');

10
frontend/src/routes/+layout.svelte
View File

@@ -1,12 +1,9 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/state';
import ConfirmDialog from '$lib/components/confirm-dialog/confirm-dialog.svelte'; import ConfirmDialog from '$lib/components/confirm-dialog/confirm-dialog.svelte';
import Error from '$lib/components/error.svelte'; import Error from '$lib/components/error.svelte';
import Header from '$lib/components/header/header.svelte'; import Header from '$lib/components/header/header.svelte';
import { Toaster } from '$lib/components/ui/sonner'; import { Toaster } from '$lib/components/ui/sonner';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
import { getAuthRedirectPath } from '$lib/utils/redirection-util';
import { ModeWatcher } from 'mode-watcher'; import { ModeWatcher } from 'mode-watcher';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import '../app.css'; import '../app.css';
@@ -20,12 +17,7 @@
children: Snippet; children: Snippet;
} = $props(); } = $props();
const { user, appConfig } = data; const { appConfig } = data;
const redirectPath = getAuthRedirectPath(page.url.pathname, user);
if (redirectPath) {
goto(redirectPath);
}
</script> </script>
{#if !appConfig} {#if !appConfig}

9
frontend/src/routes/+layout.ts
View File

@@ -3,11 +3,13 @@ import UserService from '$lib/services/user-service';
import appConfigStore from '$lib/stores/application-configuration-store'; import appConfigStore from '$lib/stores/application-configuration-store';
import userStore from '$lib/stores/user-store'; import userStore from '$lib/stores/user-store';
import { setLocaleForLibraries } from '$lib/utils/locale.util'; import { setLocaleForLibraries } from '$lib/utils/locale.util';
import { getAuthRedirectPath } from '$lib/utils/redirection-util';
import { redirect } from '@sveltejs/kit';
import type { LayoutLoad } from './$types'; import type { LayoutLoad } from './$types';
export const ssr = false; export const ssr = false;
export const load: LayoutLoad = async () => { export const load: LayoutLoad = async ({ url }) => {
const userService = new UserService(); const userService = new UserService();
const appConfigService = new AppConfigService(); const appConfigService = new AppConfigService();
@@ -22,6 +24,11 @@ export const load: LayoutLoad = async () => {
const [user, appConfig] = await Promise.all([userPromise, appConfigPromise]); const [user, appConfig] = await Promise.all([userPromise, appConfigPromise]);
const redirectPath = getAuthRedirectPath(url.pathname, user);
if (redirectPath) {
redirect(302, redirectPath);
}
if (user) { if (user) {
await userStore.setUser(user); await userStore.setUser(user);
} }