Comments (12)
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.
from sveltekit-flash-message.
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
from sveltekit-flash-message.
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>
from sveltekit-flash-message.
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.
from sveltekit-flash-message.
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;
};
from sveltekit-flash-message.
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
from sveltekit-flash-message.
You say you cannot set a cookie in src/routes/+layout.ts
, which is true, but why not use src/routes/+layout.server.ts
?
from sveltekit-flash-message.
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;
from sveltekit-flash-message.
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.
from sveltekit-flash-message.
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' });
}
```
from sveltekit-flash-message.
I would try to get the flash earlier than supabase in +layout.svelte
.
from sveltekit-flash-message.
Calling the getFlash
in +layout.svelte
as well did help solve the issue, thank you!
from sveltekit-flash-message.
Related Issues (20)
- No messages without refresh HOT 17
- Flash message not appearing when expected HOT 19
- Question: do I need to integration flashModule if I am using toasts? HOT 1
- Missing cookie Same-Site attribute HOT 3
- [SOLVED] Overwriting 'set-cookie' header via server hook prevents flash message HOT 2
- Problems when subscribing to flash store and hovering over <a> tag where load function uses redirect. HOT 7
- External callbacks not redirecting correctly HOT 8
- Example for flashCookieOptions HOT 7
- Flash Messages Not Working HOT 5
- Error when using vitest 0.34.1 - Failed to resolve entry for package "sveltekit-flash-message". HOT 3
- Flash message not appearing when using layout groups. HOT 2
- Firefox Warning: Misuse of the SameSite Cookie Attribute HOT 3
- setFlash not working HOT 3
- flash store undefined after redirect HOT 1
- Identifier 'load' has already been declared HOT 8
- Error: getFlash options can only be set at the first call to getFlash. HOT 9
- feature request: consider adhering to SvelteKit 2.0 practices regarding (not) throwing errors/redirects HOT 3
- chore: update SvelteKit `peerDependency`
- Persistant error after HTTP 500 status: `getFlash options can only be set once, at a top-level component` HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltekit-flash-message.