From 24336fd5a5ef602d608663abda0d1ccc82499475 Mon Sep 17 00:00:00 2001
From: Robi <robelmezemir@gmail.com>
Date: Sun, 9 Feb 2025 17:22:36 +0300
Subject: [PATCH] docs: add svelte kit example (#1393)

* add example

add an example for loading user session in a .server.ts file without sveltekit being where the instance is hosted ( via the client )

* add event.locals method
---
 docs/content/docs/integrations/svelte-kit.mdx | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/docs/content/docs/integrations/svelte-kit.mdx b/docs/content/docs/integrations/svelte-kit.mdx
index 7c0708364c..a19a8e53e4 100644
--- a/docs/content/docs/integrations/svelte-kit.mdx
+++ b/docs/content/docs/integrations/svelte-kit.mdx
@@ -67,6 +67,103 @@ Some of the actions are reactive. The client use [nano-store](https://github.com
     </div>
 ```
 
+### Example: Getting User session and role in a layout 
+```ts title="+layout.server.ts"
+import type { LayoutServerLoad } from './$types';
+import { error, redirect } from '@sveltejs/kit';
+import { authClient } from '$lib/auth-client';
+
+
+export const load: LayoutServerLoad = async ({ request }) => {
+    console.log('Admin Layout Server load ');
+    const session = await authClient.getSession({
+        fetchOptions: {
+            headers: request.headers
+        }
+    });
+    if (!session.data) {
+        console.log('Admin : No session');
+        throw redirect(302, '/login');
+    }
+    if (session.data?.user.role !== 'admin') {
+        console.log('Admin : Not admin');
+        throw error(403, 'Forbidden');
+    }
+}; 
+```
+
+### Example: Storing session on locals and protecting a route with layout 
+
+We first get the session and set it to event.locals 
+
+```ts title="hooks.server.ts"
+import type { Handle } from '@sveltejs/kit';
+import { authClient } from '$lib/auth-client';
+
+export const handle: Handle = async ({ event, resolve }) => {
+  // Get the session  
+  const session = await authClient.getSession({
+    fetchOptions: {
+      headers: event.request.headers
+    }
+  });
+  // Set session and user to locals 
+  event.locals.session = session?.data?.session;
+  event.locals.user = session?.data?.user;
+
+  const response = await resolve(event);
+  return response;
+};  
+
+```
+
+Then on the +layout.server.ts of the protected routes 
+```ts title="+layout.server.ts"
+import type { LayoutServerLoad } from './$types';
+import { error, redirect } from '@sveltejs/kit';
+
+import { authClient } from '$lib/auth-client';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+
+    console.log('Admin Layout Server load ');
+
+    const session = locals.session;
+    const user = locals.user;
+
+    if (!session) {
+        console.log('Admin : No session');
+        throw redirect(302, '/login');
+    }
+    if (user?.role !== 'admin') {
+        console.log('Admin : Not admin');
+        throw error(403, 'Forbidden');
+    }
+}; 
+
+```
+if you do this , make sure to also set the types on your app.d.ts
+
+```ts title="app.d.ts"
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+
+declare global {
+	namespace App {
+		interface Locals {
+			session: Session | undefined;
+			user: User | undefined;
+		}
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export { };
+```
+
 ### Example: Getting Session on a loader
 
 ```ts title="+page.server.ts"