switch directions

Author: pixelmund

README.md

@@ -10,6 +10,19 @@ The seal stored on the client contains the session data, not your server, making
 
 ---
 
+## 📚  Table of Contents
+
+1. [Upgrading](#upgrading-from-v2-to-v3)
+1. [Installation](#installation)
+1. [Usage](#usage)
+1. [Initializing](#initializing)
+1. [Secret Rotation](#secret-rotation)
+1. [Setting the Session](#setting-the-session)
+1. [Accessing the Session](#accessing-the-session)
+1. [Destroying the Session](#destroying-the-session)
+1. [Refreshing the Session](#refresh-the-session-with-the-same-data-but-renew-the-expiration-date)
+1. [Sync sessions between browser and server](#sync-session-between-browser-and-server)
+
 **By default the cookie has an ⏰ expiration time of 7 days**, set via [`expires`] which should be a `number` in `days`.
 
 ---
@@ -110,7 +123,9 @@ export const handle = sequence(sessionHandler, ({ resolve, event }) => {
 });
 ```
 
-### ♻️ Secret rotation is supported. It allows you to change the secret used to sign and encrypt sessions while still being able to decrypt sessions that were created with a previous secret.
+### Secret rotation 
+
+is supported. It allows you to change the secret used to sign and encrypt sessions while still being able to decrypt sessions that were created with a previous secret.
 
 This is useful if you want to:
 
@@ -223,7 +238,7 @@ export async function del({ locals }) {
 }
 ```
 
-### Refresh the session with the same data but renew the expiration date.
+### Refresh the session with the same data but renew the expiration date
 
 > src/routes/refresh.ts
 
@@ -250,6 +265,34 @@ handleSession({
 });
 ```
 
+### Sync session between browser and server
+
+The `handleSession` function keeps track if the client needs to be synced with the server!
+If the header `x-svelte-kit-cookie-session-needs-sync` is set, you know that you have to sync the state.
+You can do so by fetching the magic `/__session.json` endpoints, provided by handleSession.
+
+***The enhance function can be extended like so:***
+```ts
+/// lib/form.ts
+export function enhance(){
+	...
+	async function handle_submit(e) {
+		...
+		if (response.ok) {
+			if (response.headers.has('x-svelte-kit-cookie-session-needs-sync')) {
+					const sessionData = await fetch('/__session.json').then((r) => (r.ok ? r.json() : null));
+					if (sessionData) {
+						session.set(sessionData);
+					}
+			}
+			...
+		}
+		...
+	}
+}
+
+```
+
 ### Express/Connect Integration
 
 This library can integrate with express, polka or any other connect compatible middleware layer.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-kit-cookie-session",
-	"version": "3.1.0",
+	"version": "3.1.0-next.6",
 	"description": "⚒️ Encrypted 'stateless' cookie sessions for SvelteKit",
 	"repository": {
 		"type": "git",

src/lib/core.ts

@@ -14,6 +14,7 @@ export async function cookieSession<SessionType = Record<string, any>>(
 ) {
 	const config = normalizeConfig(userConfig);
 
+	let needsSync = false;
 	let setCookieString: string | undefined;
 	const cookieString =
 		typeof headersOrCookieString === 'string'
@@ -33,6 +34,8 @@ export async function cookieSession<SessionType = Record<string, any>>(
 			maxAge = new Date(sessionData.expires).getTime() / 1000 - new Date().getTime() / 1000;
 		}
 
+		needsSync = true;
+
 		sessionData = {
 			...sd,
 			expires: maxAgeToDateOfExpiry(maxAge)
@@ -46,6 +49,8 @@ export async function cookieSession<SessionType = Record<string, any>>(
 			return false;
 		}
 
+		needsSync = true;
+
 		const newMaxAge = daysToMaxage(expiresInDays ? expiresInDays : config.expiresInDays);
 
 		sessionData = {
@@ -57,6 +62,7 @@ export async function cookieSession<SessionType = Record<string, any>>(
 	}
 
 	async function destroySession() {
+		needsSync = true;
 		sessionData = {};
 		setCookieString = await makeCookie({}, config, 0, true);
 	}
@@ -96,6 +102,9 @@ export async function cookieSession<SessionType = Record<string, any>>(
 
 	return {
 		session: {
+			get needsSync() {
+				return needsSync;
+			},
 			get 'set-cookie'(): string | undefined {
 				return setCookieString;
 			},

src/lib/handle.ts

@@ -8,13 +8,13 @@ export function handleSession(
 ): Handle {
 	return async function handle({ event, resolve }) {
 		const { session, cookies } = (await cookieSession(event.request.headers, options)) as any as {
-			session: { 'set-cookie': string; data: any };
+			session: { 'set-cookie': string; data: any; needsSync: boolean };
 			cookies: Record<string, string>;
 		};
 
 		(event.locals as any).session = session;
 		(event.locals as any).cookies = cookies;
-    
+
 		if (event.url.pathname === '/__session.json') {
 			const getSession = options.getSession ?? (() => session.data);
 			const sessionData = await getSession(event);
@@ -33,6 +33,10 @@ export function handleSession(
 		const sessionCookie = session['set-cookie'];
 		response.headers.append('set-cookie', sessionCookie);
 
+		if (session.needsSync) {
+			response.headers.set('x-svelte-kit-cookie-session-needs-sync', '1');
+		}
+
 		return response;
 	};
 }

src/lib/vite/index.js

@@ -3,11 +3,16 @@
 	import { onMount } from 'svelte';
 
 	async function updateSession() {
-		await fetch('/tests/sync-session', {
+		const response = await fetch('/tests/sync-session', {
 			method: 'POST',
 			headers: { Accept: 'application/json' }
 		});
-		await (session as any).sync();
+		if (response.headers.has('x-svelte-kit-cookie-session-needs-sync')) {
+			const sessionData = await fetch('/__session.json').then((r) => (r.ok ? r.json() : null));
+			if (sessionData) {
+				session.set(sessionData);
+			}
+		}
 	}
 
 	onMount(async () => {

src/lib/vite/stores.js

@@ -1,9 +1,8 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { cookieSession } from "./src/lib/vite/index.js";
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit(), cookieSession()]
+	plugins: [sveltekit()]
 };
 
 export default config;