new auth flow using sequence

Author: jaminwebdev

src/hooks.server.ts

@@ -1,8 +1,32 @@
-import { withClerkHandler } from 'svelte-clerk/server';
-import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public';
+import { redirect, type Handle } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
 import { CLERK_SECRET_KEY } from '$env/static/private';
+import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public';
+import { withClerkHandler } from 'svelte-clerk/server';
+
+const PROTECTED_ROUTE_PREFIXES = ['/(dashboard)'] as const;
 
-export const handle = withClerkHandler({
+const clerkHandle = withClerkHandler({
 	publishableKey: PUBLIC_CLERK_PUBLISHABLE_KEY,
-	secretKey: CLERK_SECRET_KEY
+	secretKey: CLERK_SECRET_KEY,
+	signInUrl: '/login'
 });
+
+const authRedirectHandle: Handle = async ({ event, resolve }) => {
+	const routeId = event.route.id;
+	const shouldProtect =
+		routeId && PROTECTED_ROUTE_PREFIXES.some((prefix) => routeId.startsWith(prefix));
+
+	if (shouldProtect) {
+		const auth = event.locals.auth;
+		const { userId } = auth();
+
+		if (!userId) {
+			throw redirect(302, '/login');
+		}
+	}
+
+	return resolve(event);
+};
+
+export const handle = sequence(clerkHandle, authRedirectHandle);

src/routes/(auth)/login/+page.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
-	import Redirect from '@/lib/components/Redirect.svelte';
-	import { SignedIn, SignedOut, SignIn } from 'svelte-clerk/client';
+	import { SignIn } from 'svelte-clerk/client';
 </script>
 
-<SignedOut>
-	<div class="flex items-center justify-center py-10">
-		<SignIn redirectUrl="/dashboard" />
-	</div>
-</SignedOut>
-<SignedIn>
-	<Redirect route="dashboard" />
-</SignedIn>
+<div class="flex items-center justify-center py-10">
+	<SignIn redirectUrl="/dashboard" />
+</div>

src/routes/(auth)/signup/+page.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
-	import Redirect from '@/lib/components/Redirect.svelte';
-	import { SignedIn, SignedOut, SignUp } from 'svelte-clerk/client';
+	import { SignUp } from 'svelte-clerk/client';
 </script>
 
-<SignedOut>
-	<div class="flex items-center justify-center py-10">
-		<SignUp redirectUrl="/dashboard" />
-	</div>
-</SignedOut>
-<SignedIn>
-	<Redirect route="dashboard" />
-</SignedIn>
+<div class="flex items-center justify-center py-10">
+	<SignUp redirectUrl="/dashboard" />
+</div>

src/routes/(dashboard)/+layout.server.ts

@@ -1,13 +1,10 @@
 export const ssr = false;
 
-import { redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async ({ locals }) => {
 	const { userId } = locals.auth();
 
-	if (!userId) return redirect(307, '/login');
-
 	return {
 		userId
 	};

src/routes/(dashboard)/+layout.svelte

@@ -18,7 +18,7 @@
 		<AppSidebar user={user ?? undefined} />
 		<Sidebar.Inset>
 			<header
-				class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+				class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
 			>
 				<div class="flex items-center gap-2 px-4">
 					<Sidebar.Trigger class="-ml-1" />