sveltekit-route-guard
is a JavaScript library for creating route guard for SvelteKit.
The sveltekit-route-guard
package contains only the functionality necessary to create a handle function for hooks.server.js
to handle the route guard. There is no extra dependency needed for this library.
Using npm:
npm install sveltekit-route-guard
Using yarn:
yarn add sveltekit-route-guard
Using pnpm:
pnpm add sveltekit-route-guard
Note You don't have to pass all the routes in your
/routes
directory. Just pass the routes you want to add guard. Other routes will be marked as allowed by default.
// src/hook.server.ts
import { createRouteGuard } from 'sveltekit-route-guard'
import { redirect, type Handle } from '@sveltejs/kit'
export const handle: Handle = createRouteGuard({
redirect,
routes: [
{ pathname: '/protected' },
{ pathname: '/login' }
],
beforeEach(to, event, next) {
if (to.pathname === '/protected') {
return next('/login')
}
return next()
}
})
Using alongside trpc-sveltekit:
// src/hook.server.ts
import { router } from '$lib/trpc/router'
import { createTRPCHandle } from 'trpc-sveltekit'
import { createContext } from '$lib/trpc/context'
import { createRouteGuard } from 'sveltekit-route-guard'
import { redirect, type Handle } from '@sveltejs/kit'
const trpcHandle = createTRPCHandle({
router,
createContext
})
export const handle: Handle = createRouteGuard({
redirect,
next: trpcHandle,
routes: [
{ pathname: '/protected' },
{ pathname: '/login' }
],
beforeEach(to, event, next) {
if (to.pathname === '/protected') {
return next('/login')
}
return next()
}
})
Using authentication
// src/hook.server.ts
import { verify } from 'jsonwebtoken'
import { JWT_SECRET } from '$env/static/private'
import { createRouteGuard } from 'sveltekit-route-guard'
import type { User } from '@prisma/client'
import type { Handle, RequestEvent } from '@sveltejs/kit'
const getCurrentUser = (event: RequestEvent) => {
try {
const token = event.cookies.get('token')
return verify(token || '', JWT_SECRET) as User
} catch (_) {
return null
}
}
export const handle: Handle = createRouteGuard({
redirect,
routes: [
{
pathname: '/projects',
meta: {
auth: true
}
},
{
pathname: '/login',
meta: {
auth: false
}
}
],
beforeEach(to, event, next) {
// check if the user is authenticated ot not
const user = getCurrentUser(event)
if (user) event.locals.user = user
// not authenticated and requires authentication is true
if (!user && to.meta?.auth) {
return next('/login')
}
// already authenticated, can't go to /login
if (user && to.meta?.auth === false) {
return next('/')
}
// no guard, continue the request
return next()
}
})