hooks.client.js does not support handle() so how I prevent user from navigating when no cookies?

[malalecherocks]

I normally give the user a cookie, and I used to check in hooks.js (handle()) if the user had a cookie if not redirect to login, now I see there are two separates hooks:

hooks.server.js
hooks.client.js

If I implement it in handle in hooks.server.js only is checked in hard refresh or in a fetch from the client.
And I see it's not possible to implement it in hooks.client.js

How can I do this? or any other suggestion?

[eltigerchino]

I'd have a +layout.server.js file that reads the cookie, and throws a redirect if the cookie doesn't exist. You can use this to require authorisation for all the pages that inherit the layout.

[malalecherocks]

that has a similar behaviour of hooks.server.js ... once it's loaded, if the user starts navigating between pages that uses the same layout, it's only executed once... in the first refresh.

[eltigerchino]

You can use the navigating store to detect when the user navigates, then fetch an endpoint that checks the cookies.

[malalecherocks]

thank you for suggesting alternatives, but I think there should be a way using hooks.client.js it used to be possible when it was only hooks.js and now it's not. At this point I think I will check it on hooks.server.js and if there is no cookie return the redirect, and now the redirect will need to be handeled everytime manually when I do a fetch with a goto().

[eltigerchino]

that has a similar behaviour of hooks.server.js ... once it's loaded, if the user starts navigating between pages that uses the same layout, it's only executed once... in the first refresh.

You can get the load to re-run each time url.pathname changes by referencing it in the load function. Does this help?

https://kit.svelte.dev/docs/load#invalidation

[DrDanRyan]

that has a similar behaviour of hooks.server.js ... once it's loaded, if the user starts navigating between pages that uses the same layout, it's only executed once... in the first refresh.

You can get the load to re-run each time url.pathname changes by referencing it in the load function. Does this help?

https://kit.svelte.dev/docs/load#invalidation

One gotcha that I noticed: If your reference url.pathname inside an if condition then, it does not get detected as a dependency. So, putting a statement like this in your root layout will not cause a reload on every navigation:

if (!locals.user && url.pathname !== root) throw redirect(303, root);

but this will cause a reload on every navigation:

const notRoot = url.pathname !== root;
if (!locals.user && notRoot) throw redirect(303, root);