Replacing session

[AlexRMU]

How do I replace the session after the update?
There are several options offered in the comments to #5883 (reply in thread), but are not quite correct.

• it should be a store
• it should be available in +layout.server.js and +layout.svelte
• it should be safe for the ssr
• it should be set on the server, but it should also be possible to change it on the client

I can create a store in a file, set it in +layout.server.js and import it in other places, but there is a problem with the ssr (#4339).
I can store the store in context, but the context can only be set in +layout.svelte, and I cannot export it in script context="module" or import it in +layout.server.
I can set the value in +layout.server only if browser == true, but then the benefits of ssr are lost.

[ZetiMente]

https://www.captaincodeman.com/re-creating-the-sveltekit-session-store

[AlexRMU]

It suggests returning the session from load at layout, but how to get it in load at page (if you don't wait for parent() everywhere)?
Maybe this will solve the problem, but now this method is not suitable.

[ZetiMente]

I'm using the $page approach and ditching the store as seen here: https://stukennedy.notion.site/Sveltekit-Supabase-Magic-Link-Auth-using-SSR-08a94511da3e43c9b49ed6ce1f292e38

Don't see the need to keep the store when it's already in $page. Because you can handle your logic in handle and layout.load and just return the user which is generally what was in there. Instead of session you can just return the things you need to $page.data. Or if you need that user object in a page.ts file you can get it by doing const { user } = await parent() . Or just grab it from the events if it’s a page.server.ts file. The only downside is using the invalidate(). While inefficient to call twice, doesn't seem to be that big of deal and much more simple than keeping the server and client session in sync.

But yes, with recreating the store it seems you need to call parent() everywhere or wait for #6183 to be implemented

[AlexRMU]

At the moment I have such thoughts:

• context can only be used in a component, so in layout.js and page.js I need to get the session from parent()
• for the store, you need to use the context or set the value only in the browser

The CaptainCodeman session is readable and works only in the browser.

My version:

Code

The session can be changed on the client. To update it from the server, you need to use invalidateAll (or invalidate when it is repaired).

//stores.ts
import type { Writable } from "svelte/store";
import { writable } from "svelte/store";
import { setContext, getContext } from "svelte";
import { browser } from "$app/environment";

function safe_writable<T>(key: string, initial: T): Writable<T> {
    let link: Writable<T> | undefined;
    function get() {
        if (browser) {
            if (!link) link = setContext(key, writable(initial));
            return link;
        } else {
            return (
                getContext<Writable<T>>(key) ||
                setContext(key, writable(initial))
            );
        }
    }
    return {
        subscribe: (x, y) => get().subscribe(x, y),
        set: (x) => get().set(x),
        update: (x) => get().update(x),
    };
}
export let session = safe_writable<User | undefined>("session", undefined);

//+layout.server.ts
import type { LayoutServerLoad } from "./$types";
export const load: LayoutServerLoad = async function (event) {
    return {
        user: event.locals.user,
    };
};

//+layout.ts
import type { LayoutLoad } from "./$types";
export const load: LayoutLoad = async function ({ data }) {
    return {
        session: data.user,
    };
};

//top of layout.svelte
import type { PageData } from "./$types";
export let data: PageData;
$: $session = data.session;

Test

https://stackblitz.com/edit/sveltejs-kit-template-default-arkk5k?file=src/lib/stores.ts

So, there is session1 - this is a regular store, there is session2 - this is my store.

• In the browser:
  • Initial value:

  session1 == undefined
  session2 == undefined

  • After using the data:

  session1 == session
  session2 == session

• On the server, during ssr:
  • First page load:
    • Initial value:

      session1 == undefined
      session2 == undefined

    • After using the data:

      session1 == session
      session2 == session

  • Second page load:
    • Initial value:

      session1 == previous session
      session2 == undefined

    • After using the data:

      session1 == session
      session2 == session

  • The third and fourth are the same as the second, but with the user. It doesn't change the essence.

[cnshsliu]

Did you find a way to change $page.data.user in a +page.svelte?
for example, my code has two pages: "info/+page.svelte" which display user name with {{$page.data.user.displayName}} and "setting/+page.svelte" which has a form to allow user change the value of displayName. The result I respect is once the value of displayName is changed in "setting/+page.svelte", the changed value should be displayed in "info/+page.svelte", this request is achievable with previous $session.user, but simply not work with $page.data.user

[AlexRMU]

@cnshsliu
$page.data is always taken from +page.js
It does not need to be changed

[theetherGit]

Joy of code updated sveltekit authentication using cookies github repo. In this repo you can check the code and understand it, it's perfectly working.

[AlexRMU]

I'm sorry, but this is not what we need at all

[AlexRMU]

I made another way that seems clearer and more logical:
https://stackblitz.com/edit/sveltejs-kit-template-default-jch9dn

function writable_from_page<T>(
    getter: ($page: Page) => T
): Readable<T> & { set: (value: T) => void } {
    let writable_session = writable<T>();
    let derived_session = derived(
        [page, writable_session],
        ([$page, $session]) => $session || getter($page)
    );
    return {
        set(value: T) {
            if (browser) {
                writable_session.set(value);
            }
        },
        subscribe: derived_session.subscribe,
    };
}

export const session = writable_from_page<User | undefined>(
    ($page) => $page.data.session
);

You can write a value to it and it will be used until it becomes undefined or until the page is reloaded.
Аfter invalidate, you need to assign undefined to it.
On the server it is better to use locals .
It cannot be used in ts/js files, and it is better to pass the value to the functions in these files or check that they run after the mount.