SvelteKit - Login/Logout in a Navbar component

[jordanrwm]

I'm currently working on a SvelteKit project with Lucia and Prisma and I was wondering if anyone had suggestions on how I could conditionally render the correct button in my Navbar component (i.e., render a logout button when the user is logged in and vice versa)

I was also wondering where the best place would be to handle the logout logic? I already have a +page.svelte and +page.server.ts file for my login page that handles that logic -- would it be a good idea to handle to logout logic in my Navbar.svelte file or somewhere else like my api directory?

Thanks!

[pilcrowonpaper]

You can get the current session in +layout/page.server.ts and pass it to your nav bar.

It seems you can't handle form actions inside +layout.server.ts. If you want to have the logout button inside the nabber, you may be able to create /logout/+page.server.ts and export actions that handle sign out there. Then, you can create a form with use:action where action="/logout" inside the nav bar. This will make sure the logout button works for both JS and non-JS users.

[jordanrwm]

Thanks for the quick response! Follow up for ya -- to get the current session in my +layout.server.ts I thought I could just define a load function that takes in a request param of type LuciaRequest, pass that request to the parseRequestHeaders method, and then pass the sessionId to getSession. Is this the case? I have the code below and am getting a console error saying 'Cannot use cookies.set(...) after the response has been generated'.

Code (+layout.server.ts):

import { auth } from '$lib/server/lucia';
import { redirect } from '@sveltejs/kit';
import type { LuciaRequest } from 'lucia-auth/auth/request';

export const load = async (request: LuciaRequest) => {
	const sessionId = await auth.parseRequestHeaders(request);
	if (!sessionId) throw redirect(302, '/login');
	const session = await auth.getSession(sessionId);
	return { session };
};

[pilcrowonpaper]

We recommend using the SvelteKit middleware and use handleRequest() instead:

See https://lucia-auth.com/start-here/getting-started?framework=sveltekit

This will allow you to validate requests with a single line of code:

await event.locals.auth.validate()

[jordanrwm]

Ahh gotcha, worked perfectly! Thank you so much for the help, absolutely loving Lucia!!