SvelteKit Session Cookies: going HttpOnly # SvelteKit Session Cookies: going HttpOnly #

📹 SvelteKit Session Cookie: Video #

🖥 SvelteKit Session Cookie: Code Examples #

Clone the repo and play around a little to get a better feel for how it works. Link below.

Checking HTTPOnly Cookie for a User Session #

    
1 import { redirect } from '@sveltejs/kit';
2 import type { LayoutServerLoad } from './$types';
3 
4 export const load: LayoutServerLoad = async function load({ cookies }) {
5 	const session = cookies.get('session');
6 
7 	if (!session) {
8 		throw redirect(303, '/login');
9 	}
10 
11 	const { email } = JSON.parse(session);
12 	if (!email) {
13 		throw redirect(303, '/login');
14 	}
15 
16 	return {};
17 };

  

Create Cookie Utility Function #

    
1 import { Temporal } from '@js-temporal/polyfill';
2 import type { Cookies } from '@sveltejs/kit';
3 
4 export function createSession(cookies: Cookies) {
5 	const sessionID = crypto.randomUUID();
6 	cookies.set('session', JSON.stringify({ sessionID }), {
7 		path: '/',
8 		expires: new Date(Temporal.Now.plainDateTimeISO().add({ hours: 2 }).toString()),
9 		sameSite: 'lax',
10 		httpOnly: true
11 	});
12 }

  

Logging Out: Deleting the HTTPOnly Cookie #

    
1 import { redirect } from '@sveltejs/kit';
2 import type { Actions } from './$types';
3 
4 export const actions: Actions = {
5 	logout: ({ cookies }) => {
6 		const session = cookies.get('session');
7 		if (session) {
8 			cookies.delete('session', { path: '/' });
9 		}
10 		throw redirect(303, '/');
11 	}
12 };

  

🔗 SvelteKit Session Storage: Links #

• Using Local storage with SvelteKit
• Using Session storage with SvelteKit,
• Open full demo code repo on GitHub 
• MDN Set-Cookie docs ,
• OWASP HttpOnly information .

🏁 SvelteKit Session Cookies: Summary #

What is an HttpOnly Cookie? #

Http only cookies, unlike Session Storage and Local Storage cannot be read by JavaScript code running in the browser. This brings security benefits, making HttpOnly cookies a preferred choice in many applications.

How can you share data between the client and server in SvelteKit? #

SvelteKit has a session store. Client routes can access it via a named import from $app/stores. Once imported, it can be read similarly to other stores. Session is not suitable for storing sensitive information.

How can sensitive information be sent from the server to the client in SvelteKit? #

You can use HttpOnly cookies to send sensitive information, identifying a user or session, as well as session tokens. The client can send this data to the server with client requests, to process the sensitive data and respond with client-safe data. The server can access the data on the cookie, but client side JavaScript code cannot.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Rodney

@askRodney

Just updated the video on using HTTP only session 🍪cookies in SvelteKit.

We see a couple of traps to avoid, using a skeleton app, where users need an account to see their console. Full code on GitHub.

Hope you find it useful!

#learnsvelte #askRodneyhttps://t.co/A7Xwj8f1ox

— Rodney (@askRodney) June 30, 2023

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.