How can I implement login and logout in my svelte 5 project?

I'm developing the frontend side of a school website. The users don't have to register, they only can login or logout.

I've already developed the login page but the data is not updating properly, The homepage needs a refresh to get the user data. I also don't know how to implement logout and I need to trigger that throught a button. This is what I've tryed so far:

login/+page.server.js

import { createSession, getUser } from '$lib/fetchData.svelte.js';import { redirect } from '@sveltejs/kit';export const actions = {  default: async (event) => {    const data = await event.request.formData();    const user = getUser({      firstName: data.get('firstName'),      lastName: data.get('lastName'),      year: data.get('year'),      section: data.get('section')    })    event.cookies.set('sessionId', createSession(user), { path: '/'});    redirect(302, '/');    return { success: true }  }}

login/+page.svelte

<script>  import { Button } from "$lib/components/ui/button";  import * as Card from "$lib/components/ui/card";  import { Input } from "$lib/components/ui/input";  import { Label } from "$lib/components/ui/label";  import * as Select from "$lib/components/ui/select";  import { Checkbox } from "$lib/components/ui/checkbox";  import { getContext, setContext } from "svelte";  import { goto } from "$app/navigation";  import { applyAction, enhance } from '$app/forms';  let { data, form } = $props();  let year = $state(1);  let section = $state('A');  let sections = $derived(generateAlphabetArray(getSections(year)));  let teacher = $state(false);  function generateAlphabetArray(length) {    const alphabet = 'ABCDEFGHILMNOPQRSTUVWXYZ';    return Array.from({ length }, (_, i) => alphabet[i % alphabet.length]);  }  function getSections(classe) {    const classes = [      {        classe: 1,        sezioni: 12      },      {        classe: 2,        sezioni: 11      },      {        classe: 3,        sezioni: 12      },      {        classe: 4,        sezioni: 11      },      {        classe: 5,        sezioni: 10      }    ]    return classes.find(c => c.classe === classe).sezioni;  }  function changeClass(e) {    year = e.value;    if (!sections.includes(section))    section = sections[0];  }</script><div class="h-full grid items-center"><Card.Root class="mx-auto max-w-sm"><Card.Header><Card.Title class="text-xl">Accedi</Card.Title></Card.Header><Card.Content><form       class="grid gap-4"       method="POST"       use:enhance={({ formElement, form, action, cancel, submitter }) => {        return async ({ result }) => {          if (result.type === 'redirect') {            goto(result.location);          } else {            await applyAction(result);          }        }      }}><div class="grid gap-2"><Label for="first-name">Nome</Label><Input           id="first-name"           placeholder="Mario"           name="firstName"          required        /></div><div class="grid gap-2"><Label for="last-name">Cognome</Label><Input           id="last-name"           placeholder="Rossi"           name="lastName"          required        /></div><div class="flex gap-2"><Label for="teacher">Professore</Label><Checkbox bind:checked={teacher} id="teacher" name="teacher"/></div>      {#if !teacher}<div class="grid grid-cols-2 gap-4"><div class="grid gap-2"><Label for="year">Classe</Label><Select.Root              name="year"              id="year"              selected={{label: '1', value: year}}              onSelectedChange={changeClass}><Select.Trigger class="w-full"><Select.Value placeholder="1"/></Select.Trigger><Select.Content>                {#each {length: 5} as _, i}<Select.Item value={i + 1}>{i + 1}</Select.Item>                {/each}</Select.Content></Select.Root></div><div class="grid gap-2"><Label for="section">Sezione</Label><Select.Root              name="section"              id="section"              selected={{label: section, value: section}}              onSelectedChange={(e) => section = e.value}><Select.Trigger class="w-full"><Select.Value placeholder="A"/></Select.Trigger><Select.Content>                {#each sections as letter}<Select.Item value={letter} class="text-center">{letter}</Select.Item>                {/each}</Select.Content></Select.Root></div></div>      {/if}<Button         type="submit"         class="w-full" >        Accedi</Button></form><div class="mt-4 text-center text-sm">      Se non riesci ad accedere manda una mail all'indirizzo<p class="underline"> dynamo.studenti@gmail.com </p></div></Card.Content></Card.Root></div>

/+layout.server.js

export const load = async (event) => {  return {    user: event.locals.user  }}

/+hooks.server.js

import { getUserFromSession } from '$lib/fetchData.svelte';export const handle = async ({ event, resolve }) => {  event.locals.user = await getUserFromSession(event.cookies.get('sessionId'));  return resolve(event);}

/+layout.svelte

<script>    import { setContext } from 'svelte';    import '../app.css';    let { children, data } = $props();    setContext('user', data.user); </script><main class="container flex flex-col gap-2 py-4 h-screen p-2 sm:p-4 overflow-hidden">{@render children()}</main>