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
This commit is contained in:
Robi
2025-02-09 17:22:36 +03:00
committed by GitHub
parent ca0727a224
commit 24336fd5a5

View File

@@ -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"