✨ Improved authentication by checking the jwt in SvelteKit

frontend/package.json

@@ -24,12 +24,12 @@
 		"@felte/reporter-tippy": "^1.1.5",
 		"@felte/validator-yup": "^1.0.11",
 		"@fontsource/marck-script": "^4.5.11",
-		"@sentry/browser": "^7.31.1",
-		"@sentry/tracing": "^7.31.1",
+		"@sentry/browser": "^7.34.0",
+		"@sentry/tracing": "^7.34.0",
 		"@simplewebauthn/browser": "^6.2.2",
 		"@sveltejs/adapter-auto": "^1.0.2",
 		"@sveltejs/adapter-node": "^1.1.4",
-		"@sveltejs/kit": "^1.2.2",
+		"@sveltejs/kit": "^1.3.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/canvas-confetti": "^1.6.0",
 		"@types/cookie": "^0.5.1",
@@ -38,11 +38,11 @@
 		"@types/qrcode": "^1.5.0",
 		"@types/sortablejs": "^1.15.0",
 		"@types/ua-parser-js": "^0.7.36",
-		"@typescript-eslint/eslint-plugin": "^5.48.2",
-		"@typescript-eslint/parser": "^5.48.2",
+		"@typescript-eslint/eslint-plugin": "^5.49.0",
+		"@typescript-eslint/parser": "^5.49.0",
 		"@uppy/compressor": "^1.0.1",
-		"@uppy/core": "^3.0.4",
-		"@uppy/dashboard": "^3.2.0",
+		"@uppy/core": "^3.0.5",
+		"@uppy/dashboard": "^3.2.1",
 		"@uppy/drag-drop": "^3.0.1",
 		"@uppy/drop-target": "^2.0.1",
 		"@uppy/image-editor": "^2.1.0",
@@ -55,7 +55,7 @@
 		"cookie": "^0.5.0",
 		"crypto-js": "^4.1.1",
 		"cssnano": "^5.1.14",
-		"eslint": "^8.32.0",
+		"eslint": "^8.33.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"felte": "^1.2.7",
@@ -63,6 +63,7 @@
 		"highlight.js": "^11.7.0",
 		"i18next-browser-languagedetector": "^7.0.1",
 		"js-cookie": "^3.0.1",
+		"jws": "^4.0.0",
 		"luxon": "^3.2.1",
 		"mapbox-gl": "^2.12.0",
 		"mdsvex": "^0.10.6",
@@ -78,14 +79,14 @@
 		"sass": "^1.57.1",
 		"socket.io-client": "^4.5.4",
 		"svelte": "^3.55.1",
-		"svelte-check": "^3.0.2",
+		"svelte-check": "^3.0.3",
 		"svelte-preprocess": "^5.0.1",
 		"svelte-range-slider-pips": "^2.1.1",
 		"svelte-tippy": "^1.3.2",
 		"swiper": "^8.4.6",
 		"tailwindcss": "^3.2.4",
 		"tippy.js": "^6.3.7",
-		"tslib": "^2.4.1",
+		"tslib": "^2.5.0",
 		"typescript": "~4.7.4",
 		"ua-parser-js": "^1.0.33",
 		"vite": "^4.0.4",

frontend/src/hooks.server.ts

@@ -5,30 +5,39 @@
  */
 
 import type { Handle } from '@sveltejs/kit';
+import jws from 'jws';
 
 /** @type {import('@sveltejs/kit').Handle} */
 export const handle: Handle = async ({ event, resolve }) => {
-	const res = await fetch(`${process.env.API_URL}/api/v1/users/check`, {
-		method: 'GET',
-		headers: {
-			'Content-Type': 'application/json',
-			Cookie: event.request.headers.get('cookie') || ''
-		}
-	});
-	if (res.ok) {
-		event.locals.email = await res.text();
-		const resp = await resolve(event);
-		try {
-			resp.headers.set('Set-Cookie', res.headers.get('set-cookie'));
-		} catch {
-			console.log('Cannot mutate immutable header');
-		}
-
-		return resp;
-	} else {
+	const access_token = event.cookies.get('access_token');
+	if (!access_token) {
 		event.locals.email = null;
 		return resolve(event);
 	}
+	const jwt = jws.decode(access_token.replace('Bearer ', ''));
+	// if token expires, do a request to get a new one and set the response-cookies on the response
+	if (Date.now() >= jwt.payload.exp * 1000) {
+		const res = await fetch(`${process.env.API_URL}/api/v1/users/check`, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Cookie: event.request.headers.get('cookie') || ''
+			}
+		});
+		if (res.ok) {
+			event.locals.email = await res.text();
+			const resp = await resolve(event);
+			console.log(res.headers.get('set-cookie'));
+			try {
+				resp.headers.set('Set-Cookie', res.headers.get('set-cookie'));
+			} catch {
+				/* empty */
+			}
+			return resp;
+		}
+	}
+	event.locals.email = jwt.payload.sub;
+	return resolve(event);
 };
 
 /*export const getSession: GetSession = async (event) => {

frontend/src/routes/+layout.server.ts

@@ -1,7 +1,7 @@
 import { signedIn } from '$lib/stores';
-import type { LayoutLoad } from './$types';
+import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutLoad = async ({ locals }) => {
+export const load: LayoutServerLoad = async ({ locals }) => {
 	if (locals.email) {
 		signedIn.set(true);
 	} else {

frontend/src/routes/dashboard/+page.server.ts

@@ -2,7 +2,6 @@ import { redirect } from '@sveltejs/kit';
 
 export const load = async ({ parent }) => {
 	const { email } = await parent();
-
 	if (!email) {
 		throw redirect(302, '/account/login?returnTo=/dashboard');
 	}

frontend/src/routes/dashboard/+page.svelte

@@ -73,7 +73,7 @@
 	};
 	$: {
 		search_term;
-		console.log(search_term);
+		// console.log(search_term);
 		search();
 	}
 </script>