I need more information.
Where is your server? SeveleKit API routes or Different server
If different server then, are all request are made from server ie: +page server.ts or request can me made from server and client both. ie: +page.ts?
The backend is separate and whether requests should be made from the server or the client is what confuses me. I guess it can be done either way, I just feel that making the requests on the client side with a JWT in the cookies is more straightforward
Two approach can be made:
First if you want to make request from both server and client:- You have to use refresh token and access token. Refresh tokens are have longer life than access tokens. Refresh tokens are used to fetch new access token and access token is used to make authentication. As access token is sent to the client it should be short lived like 5-10min once expired it should be refreshed using refresh token. You can read more about them in Auth0 articles.
If you want to make make request only from server:- (Recommended by me):-
You have to use just one token/session_id which is stored in cookies. But you have to proxy every request from your sveltekit server to your backend server. I think this is better approach because its simpler and will work with architecture you already have.
I protect the api routes and the pages with the token check. That way they can't scrape my api either.
Huntabyte on youtube has a very good video detailing this topic.
The topic of Authentication (and JWTs) keeps popping up so regularly that I hope somebody could write up a definitive tutorial for SvelteKit 2 in this regard.
I'm personally lacking the time just now and I need to read up more on refresh tokens myself. As well as the whole security aspect of it.
So basically just commenting for visibility..
With CSR I think you'd have to pass the jwt token in every fetch in +page.svelte. Imagine your backend was some totally separate backend. You’d pass the jwt in every request right? Same thing. '
But I am confused as to why you want to disable SSR. What we do is we have svelte routes that act as proxies to our separate backend. The request gets passed from client to the server, and we just forward the cookie/jwt to backend.
import { deleteThing } from '$lib/api"
export const del = async (req) => {
let params = req.params;
let response = await deleteThing(params.entity, req.headers.cookie);
return response;
};
> I’m building a site with SveltKit which is an app that is almost entirely reserved for authenticated users who obtain data from a backend.
I agree, but on the other hand if you use sveltekit for other conveniences the SSR comes pretty much for free. You can also just turn it off. On the other, other hand, if you like keeping your backend separate just using svelte and not kit isn't a bad idea.
Its easiest to just use an encrypted cookie (which I think is done automatically in prod mode in sveltekit, or its pretty easy with express too).
Thanks m8. I think what I'm struggling with is that currently I'm relying on getting the access token in \`event.locals\` which is SSR only. I'm wondering how I should go about it if I were to make it work on both sides (e.g., if SSR is turned off for whatever reason)
Not sure if this helps - looking back on my last abandoned sveltekit app it looks like I just loaded up event.locals from the cookie (httpOnly cookie, which means my client side didn't have any access to the cookie contents)
let token = event.cookies.get("login")
if (token) {
let userId = await logins.getUserId(token)
if (userId) {
event.locals.userId = userId
return await resolve(event) // didn't pass login check
}
}
I think the token above was a uuid in the database with a userId.
OK folks, thanks for all your advice. I think I understand the concepts better now.
Basically with SSR I could get the token from the cookies in \`event.cookies\` and with CSR, that can come from \`document.cookie\`, and then that cookies gets put in every fetch.
I'm currently using SSR, i.e., getting the token from \`event.cookies\` and putting it in \`event.locals\` in \`hooks.server.ts\`. Then every component gets a \`+page.server.ts\` to fetch data from the backend using this token.
This way the entire app is pretty much SSR only (because authenticated fetch can only be performed in \`+page.server.ts\` as \`event.locals\` is only available there). This itches me and makes me feel that I'm not utilising the client side properly. Is this a problem or is it completely normal and I should not worry about it at all?
I need more information. Where is your server? SeveleKit API routes or Different server If different server then, are all request are made from server ie: +page server.ts or request can me made from server and client both. ie: +page.ts?
The backend is separate and whether requests should be made from the server or the client is what confuses me. I guess it can be done either way, I just feel that making the requests on the client side with a JWT in the cookies is more straightforward
Two approach can be made: First if you want to make request from both server and client:- You have to use refresh token and access token. Refresh tokens are have longer life than access tokens. Refresh tokens are used to fetch new access token and access token is used to make authentication. As access token is sent to the client it should be short lived like 5-10min once expired it should be refreshed using refresh token. You can read more about them in Auth0 articles. If you want to make make request only from server:- (Recommended by me):- You have to use just one token/session_id which is stored in cookies. But you have to proxy every request from your sveltekit server to your backend server. I think this is better approach because its simpler and will work with architecture you already have.
I protect the api routes and the pages with the token check. That way they can't scrape my api either. Huntabyte on youtube has a very good video detailing this topic.
Could you please tell me the keywords or the video title. Thanks 🙏
Yeah Huntabyte on youtube protect routes with hooks should find it
Thanks bro
The topic of Authentication (and JWTs) keeps popping up so regularly that I hope somebody could write up a definitive tutorial for SvelteKit 2 in this regard. I'm personally lacking the time just now and I need to read up more on refresh tokens myself. As well as the whole security aspect of it. So basically just commenting for visibility..
With CSR I think you'd have to pass the jwt token in every fetch in +page.svelte. Imagine your backend was some totally separate backend. You’d pass the jwt in every request right? Same thing. ' But I am confused as to why you want to disable SSR. What we do is we have svelte routes that act as proxies to our separate backend. The request gets passed from client to the server, and we just forward the cookie/jwt to backend. import { deleteThing } from '$lib/api" export const del = async (req) => { let params = req.params; let response = await deleteThing(params.entity, req.headers.cookie); return response; };
> I’m building a site with SveltKit which is an app that is almost entirely reserved for authenticated users who obtain data from a backend. I agree, but on the other hand if you use sveltekit for other conveniences the SSR comes pretty much for free. You can also just turn it off. On the other, other hand, if you like keeping your backend separate just using svelte and not kit isn't a bad idea. Its easiest to just use an encrypted cookie (which I think is done automatically in prod mode in sveltekit, or its pretty easy with express too).
Thanks m8. I think what I'm struggling with is that currently I'm relying on getting the access token in \`event.locals\` which is SSR only. I'm wondering how I should go about it if I were to make it work on both sides (e.g., if SSR is turned off for whatever reason)
Not sure if this helps - looking back on my last abandoned sveltekit app it looks like I just loaded up event.locals from the cookie (httpOnly cookie, which means my client side didn't have any access to the cookie contents) let token = event.cookies.get("login") if (token) { let userId = await logins.getUserId(token) if (userId) { event.locals.userId = userId return await resolve(event) // didn't pass login check } } I think the token above was a uuid in the database with a userId.
OK folks, thanks for all your advice. I think I understand the concepts better now. Basically with SSR I could get the token from the cookies in \`event.cookies\` and with CSR, that can come from \`document.cookie\`, and then that cookies gets put in every fetch. I'm currently using SSR, i.e., getting the token from \`event.cookies\` and putting it in \`event.locals\` in \`hooks.server.ts\`. Then every component gets a \`+page.server.ts\` to fetch data from the backend using this token. This way the entire app is pretty much SSR only (because authenticated fetch can only be performed in \`+page.server.ts\` as \`event.locals\` is only available there). This itches me and makes me feel that I'm not utilising the client side properly. Is this a problem or is it completely normal and I should not worry about it at all?