ciscoheat / sveltekit-flash-message

Send temporary data after redirect, usually from endpoints. Works with both SSR and client.
https://www.npmjs.com/package/sveltekit-flash-message
MIT License
246 stars 5 forks source link

Flash Messages Not Working #20

Closed oxneat closed 11 months ago

oxneat commented 11 months ago

i tried to implement the flash message code exactly as it is on the documentation it's not working and when i opened the dev console this message showed up:

Screenshot from 2023-07-30 21-02-18

ciscoheat commented 11 months ago

This does work in the latest version. If you're using the latest, I need to see some code to know more.

oxneat commented 11 months ago

this is the code for the (auth)/signup/+page.server.ts :

import { signUpSchema } from "$lib/validation";
import type { Actions } from "@sveltejs/kit";
import { flashCookieOptions, redirect } from "sveltekit-flash-message/server";
import { superValidate } from "sveltekit-superforms/server";

export const actions = {
    signup: async (event) => {

        throw redirect('/login', {
            type: "success",
            message: ["Votre compte a été crée, vous recevrez un message de confirmation sur votre email"]
        }, event)
    }
} satisfies Actions;

this is the code for src/routes/+layout.server.ts :

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

// export { load } from 'sveltekit-flash-message/server';
// flashCookieOptions.sameSite = 'strict';

export const load = loadFlash(async (event) => {
    return {
        session: await event.locals.getSession(),
    }
})

this is where the flash is read : (src/routes/+layout.svelte)

<script lang="ts">
    import '../app.postcss';
    import { invalidate } from '$app/navigation';
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    // import { getFlash, initFlash } from 'sveltekit-flash-message/client';
    // import { page } from '$app/stores';

    import Messages from '$lib/components/Messages.svelte';
    import { getFlash } from 'sveltekit-flash-message/client';

    const flash = getFlash(page);
    $: msg = $flash;

    $: console.log($flash);

    export let data;

    $: ({ 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();
    });
</script>

<Messages data={msg ? msg : { type: 'success', message: ['Hello Friend'] }} />
<slot />
oxneat commented 11 months ago

@ciscoheat the package version is: "sveltekit-flash-message": "^2.1.0", and sveltekit version is: "@sveltejs/kit": "^1.20.4",

ciscoheat commented 11 months ago

Looks like it should work, but you're using some component and events. Try making the simplest possible case, like in the instructions: https://github.com/ciscoheat/sveltekit-flash-message#3-display-the-flash-message and see if that works?

oxneat commented 11 months ago

@ciscoheat it works perfectly now, thanks a lot