patternjavascriptsvelteModerate
SvelteKit hooks.server.ts for global request handling
Viewed 0 times
SvelteKit 1.x+
hooks.server.tshandle hooklocalssequencemiddlewareauthenticationrequest lifecycle
Problem
Authentication checks and request preprocessing are duplicated across every load function. There is no centralized place to set user context before routes run.
Solution
Use hooks.server.ts to run code for every request:
// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
const auth: Handle = async ({ event, resolve }) => {
const sessionToken = event.cookies.get('session');
if (sessionToken) {
event.locals.user = await validateSession(sessionToken);
} else {
event.locals.user = null;
}
return resolve(event);
};
const security: Handle = async ({ event, resolve }) => {
const response = await resolve(event);
response.headers.set('X-Frame-Options', 'DENY');
response.headers.set('X-Content-Type-Options', 'nosniff');
return response;
};
// Compose multiple hooks
export const handle = sequence(auth, security);
// src/app.d.ts — type locals
declare global {
namespace App {
interface Locals {
user: User | null;
}
}
}
// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
const auth: Handle = async ({ event, resolve }) => {
const sessionToken = event.cookies.get('session');
if (sessionToken) {
event.locals.user = await validateSession(sessionToken);
} else {
event.locals.user = null;
}
return resolve(event);
};
const security: Handle = async ({ event, resolve }) => {
const response = await resolve(event);
response.headers.set('X-Frame-Options', 'DENY');
response.headers.set('X-Content-Type-Options', 'nosniff');
return response;
};
// Compose multiple hooks
export const handle = sequence(auth, security);
// src/app.d.ts — type locals
declare global {
namespace App {
interface Locals {
user: User | null;
}
}
}
Why
hooks.server.ts runs on the server for every request before any load function. event.locals is a per-request object for passing data (like the authenticated user) to load functions and server actions without re-querying on every route.
Gotchas
- locals are only available server-side — don't try to access them in +page.ts
- sequence() composes multiple Handle functions in order
- handleFetch hook can intercept and modify SvelteKit's internal fetch calls
- handleError hook catches unexpected server-side errors for logging
Code Snippets
SvelteKit global error handler
// handleError: log unexpected errors
export const handleError: HandleServerError = async ({ error, event }) => {
console.error(error);
return { message: 'Internal server error', code: 'UNKNOWN' };
};Context
When adding authentication or global request processing in SvelteKit
Revisions (0)
No revisions yet.