Persistent Flash store data after server redirect

[edwardspresume]

After getting the message data from a server redirect, that data persist in the store after subsequent page navigation.

I’ve encountered an issue where data from a server redirect message persists in the store even after navigating to subsequent pages.

To illustrate the problem, I’ve replicated my project structure and the issue on this SvelteLab page: https://www.sveltelab.dev/a0qnffsh6ntioi9?files=.%2Fsrc%2Froutes%2Fdashboard%2FtestPage%2F%2Bpage.svelte

In my /auth route, I’ve set up a flash redirect to simulate a scenario where a user is redirected to the dashboard if they are already logged in. However, after this redirect occurs, the alert message continues to display when navigating to the home page and then back to the dashboard.

[ciscoheat]

I think the problem is that you're only calling loadFlash in the dashboard layout, so the cookie will not be cleared in routes above that. Use a top-level layout.server.ts file and call loadFlash from there, and see if it works.

[edwardspresume]

Yeah I tried calling loadFlash at the top-level layout, but i was not getting the flash messages in my local env. But I just tested in prod, and I am getting the flash messages there, with loadFlash at the top-level layout. But the issue still persists. Can also view the change on the sveltelab link

[edwardspresume]

I was able to narrow in a bit more on what is causing the issue of the flash message is always being undefined when I am calling loadFlash at the top-level: src/routes/+layout.server.ts. In my src/routes/+layout.ts I have a load function that loads a Supabase client to help monitor auth state changes, and that is somehow causing the problem. When I comment out the code in src/routes/+layout.ts I am getting the intended flash message. Would you have any leads on how I can make this compatible with loadFlash?

// src/routes/+layout.ts

import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit';

import type { LayoutLoad } from './$types';

import type { Database } from '$databaseDir/database.types';

export const load: LayoutLoad =  async ({ fetch, data, depends }) => {
    depends('supabase:auth');

    const supabase = createSupabaseLoadClient<Database>({
        supabaseUrl: PUBLIC_SUPABASE_URL,
        supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
        event: { fetch },
        serverSession: data.session
    });

    const {
        data: { session }
    } = await supabase.auth.getSession();

    return { supabase, session };
};

// src/routes/+layout.svelte

<script>

    onMount(() => {
        const {
            data: { subscription }
        } = supabase.auth.onAuthStateChange((event, _session) => {
            if (_session?.expires_at !== session?.expires_at) {
                invalidate('supabase:auth');
            }
        });

        return () => subscription.unsubscribe();
    });

</script>

[ciscoheat]

Then it could be that the flash cookie is overwritten, due to this: https://github.com/ciscoheat/sveltekit-flash-message#when-setting-cookies-in-a-response

If you don't have control over the Supabase cookie handling, you need to get the flash cookie before calling Supabase, and append it again afterwards.

[edwardspresume]

Yeah, i don't see a way of handling the Supabase cookie. I tried getting and appending the flash cookie in src/hooks.server.ts since we are not able to set a cookie in src/routes/+layout.ts (as for as I know). It works, but now when I refresh or manually navigate back to that same page, the flash message persists. Idk why it's not clearing for this one since the loadFlash is called at the top level. This is my code for the hook

import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit';

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

// This SvelteKit server hook initializes a Supabase client and provides session data
// for authenticated requests.

// The handle function runs before every request
export const handle: Handle = async ({ event, resolve }) => {
    // Create a new Supabase client using the provided Supabase URL and anonymous key,
    // then store this client in the event.locals object. This makes the Supabase
    // client available to endpoints and hooks that run later.

    const flashMessageCookie = event.cookies.get('flash');

    event.locals.supabase = createSupabaseServerClient({
        supabaseUrl: PUBLIC_SUPABASE_URL,
        supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
        event
    });

    // This function retrieves the current user session from Supabase auth and makes
    // it available on the event.locals object.
    event.locals.getSession = async () => {
        const {
            data: { session }
        } = await event.locals.supabase.auth.getSession();
        return session;
    };

    // Call the resolve function to continue handling the request, and specify that only
    // the 'content-range' header should be serialized in the response. This is necessary
    // because Supabase requires this header for certain operations.
    const response = await resolve(event, {
        filterSerializedResponseHeaders(name) {
            return name === 'content-range';
        }
    });

    console.log('flashMessageCookie', flashMessageCookie);
    if (flashMessageCookie) {
        const headers = response.headers;
        headers.append('Set-Cookie', `flash=${flashMessageCookie}`);
    }

    return response;
};

[edwardspresume]

Also, I noticed that a new flash cookie gets created when the flash redirect is triggered, this happens with both headers.append and headers.set

[ciscoheat]

You say you cannot set a cookie in src/routes/+layout.ts, which is true, but why not use src/routes/+layout.server.ts ?

[edwardspresume]

I am not sure who to do this: "you need to get the flash cookie before calling Supabase, and append it again afterwards."

in my src/routes/+layout.server.ts file since there is no call to Supabase there, and I am able to see the flash cookie from the load function in that file when the redirect is triggered, so i don't think I need to re-set the flash cookie there

// src/routes/+layout.server.ts

import { loadFlash } from 'sveltekit-flash-message/server';
import type { LayoutServerLoad } from './$types';

export const load = loadFlash(async ({ locals: { getSession } }) => {
    return {
        session: await getSession()
    };
}) satisfies LayoutServerLoad;

[ciscoheat]

Thinking about it more, it could be that the data that you deconstruct in +layout.ts contains the flash message, and it needs to be forwarded to the client as well, like return { supabase, session, data };.

Not exactly sure about the details, but it's an idea, that something is missing from the server data.

[edwardspresume]

Pardon the delay, but just checked, and yes data does contain the flash message, thank you pointing me in the right direction!

It's at the base of the data object, so I am forwarding it like this

// src/routes/+layout.ts
return { supabase, session, flash: data?.flash };

But now I have the issue of the persistent flash message again. This is what happens, I go to my auth page, since I am logged in it redirects me back to the dashboard's 'prompts' page where I have getFlash set to display the flash message. But now if I navigate to any of the dashboard pages and go back to the prompts page, the flash message persists.

When I console log the flash message store on the client, It looks like the message from the server persist, but when the client hydrates the message is properly set to undefined

I going to be looking into this further tmm, but if you have any ideas lmk

For context, the auth redirect happens in this file location src/routes/auth/+page.server.ts

this is my src/routes/+layout.svelte file

<script>

    import { onMount } from 'svelte';

    import { invalidate, } from '$app/navigation';

    export let data;

    // Initialize the data
    let { supabase, session } = data;

    // Update the data if it changes
    $: ({ supabase, session } = data);

    onMount(() => {
        const {
            data: { subscription }
        } = supabase.auth.onAuthStateChange((event, _session) => {
            if (_session?.expires_at !== session?.expires_at) {
                invalidate('supabase:auth');
            }
        });

        return () => subscription.unsubscribe();
    });

    inject({ mode: dev ? 'development' : 'production' });
</script>

<slot />

And my src/routes/dashboard/(content)/prompts/+page.svelte file

    const flash = getFlash(page);

    $: console.log($flash);

    $: if ($flash) {
        const { type, message } = $flash;

        const notificationFunction = getNotificationFunction(type);

        notificationFunction(message, { target: 'dashboardLayout' });
    }

[ciscoheat]

I would try to get the flash earlier than supabase in +layout.svelte.

[edwardspresume]

Calling the getFlash in +layout.svelte as well did help solve the issue, thank you!