Better Auth•2w ago

SvelteKit Exsmple

I was planning to do auth path check in hooks.server.ts, but don’t think I can with the svelteKitHandler So looks like what I need to do for SvelteKit, is do this on the root layout.server.ts and pass the session down. await parent() And do path check on each page or layout with the session passed down. I hope there is a way to use the auth.api in hooks.server.ts instead. I planned on assigning the auth.api to event.locals Cause I’m assuming you can’t use the auth.api before the svelteKitHander. Inspired by: https://youtu.be/K1Tya6ovVOI?feature=shared Would love an example of this with Better Auth.

Huntabyte

YouTube

Protect SvelteKit Routes with Hooks

If you find my content useful and want to support the channel, consider contributing a coffee ☕: https://hbyt.us/coffee SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it does...

6 Replies

Unknown User•2w ago

Message Not Public

Robi•2w ago

or if you're using just the client and the instance isnt on your sveltekit but on an express server somewhere else hooks.server.ts

import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {

  const session = await authClient.getSession({
    fetchOptions: {
      headers: event.request.headers
    }
  });

  event.locals.session = session?.data?.session;
  event.locals.user = session?.data?.user;

  const response = await resolve(event);
  return response;
};

import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {

  const session = await authClient.getSession({
    fetchOptions: {
      headers: event.request.headers
    }
  });

  event.locals.session = session?.data?.session;
  event.locals.user = session?.data?.user;

  const response = await resolve(event);
  return response;
};

then to protect a route ( anything in (admin) for example )

import type { LayoutServerLoad } from './$types';
import { error, redirect } from '@sveltejs/kit';

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');
    }
};

import type { LayoutServerLoad } from './$types';
import { error, redirect } from '@sveltejs/kit';

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');
    }
};

AcroOP•3d ago

Where is SvelteKitHandler in this? Ideally wanted to do these route checks in hooks.server.ts

Robi•3d ago

You can get the url and throw redirects from the hook with this method too , no ?

xamarot•3d ago

Hello, I have an example doing something like this here https://github.com/zicho/betterauth-sso Feel free to fork it or ask questions or whatever The main branch is simply "hiding" the entire app behind github or MS SSO, but there is a branch which has sign up enabled instead.

AcroOP•3d ago

Can you show?

Gaming

Programming

SvelteKit Exsmple

Did you find this page helpful?