From 28c7736ecdba60f40f5c7e899692c04241d27b78 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 7 Aug 2022 18:36:34 -0500
Subject: [PATCH] Fix error in logout procedure and guard for each route (#439)

---
 web/src/hooks.ts                                |  2 +-
 web/src/routes/admin/index.svelte               | 10 +++++++++-
 web/src/routes/albums/[albumId]/index.svelte    | 10 +++++++++-
 .../albums/[albumId]/photos/[assetId].svelte    |  7 +++----
 web/src/routes/albums/index.svelte              | 10 +++++++++-
 web/src/routes/auth/logout.ts                   |  3 ++-
 web/src/routes/photos/[assetId].svelte          | 17 ++++++++---------
 web/src/routes/photos/index.svelte              |  9 ++++++++-
 web/src/routes/sharing/index.svelte             | 10 +++++++++-
 9 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/web/src/hooks.ts b/web/src/hooks.ts
index 788f169eb0..2455911240 100644
--- a/web/src/hooks.ts
+++ b/web/src/hooks.ts
@@ -1,6 +1,6 @@
 import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit';
 import * as cookie from 'cookie';
-import { api, serverApi } from '@api';
+import { serverApi } from '@api';
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
diff --git a/web/src/routes/admin/index.svelte b/web/src/routes/admin/index.svelte
index 641821802d..c7e523db13 100644
--- a/web/src/routes/admin/index.svelte
+++ b/web/src/routes/admin/index.svelte
@@ -2,7 +2,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { api, UserResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, allUsers] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -37,6 +44,7 @@
 	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
 	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
 	import StatusBox from '$lib/components/shared-components/status-box.svelte';
+	import { browser } from '$app/env';
 
 	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;
 
diff --git a/web/src/routes/albums/[albumId]/index.svelte b/web/src/routes/albums/[albumId]/index.svelte
index 7f1a2fd506..54256f336f 100644
--- a/web/src/routes/albums/[albumId]/index.svelte
+++ b/web/src/routes/albums/[albumId]/index.svelte
@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch, params }) => {
+	export const load: Load = async ({ fetch, params, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const albumId = params['albumId'];
 
@@ -36,6 +43,7 @@
 
 <script lang="ts">
 	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import { browser } from '$app/env';
 
 	export let album: AlbumResponseDto;
 </script>
diff --git a/web/src/routes/albums/[albumId]/photos/[assetId].svelte b/web/src/routes/albums/[albumId]/photos/[assetId].svelte
index e646a19f55..4349114cf3 100644
--- a/web/src/routes/albums/[albumId]/photos/[assetId].svelte
+++ b/web/src/routes/albums/[albumId]/photos/[assetId].svelte
@@ -1,11 +1,10 @@
 <script context="module" lang="ts">
 	export const prerender = false;
+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async ({ params }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-		} catch (e) {
+	export const load: Load = async ({ params, session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
diff --git a/web/src/routes/albums/index.svelte b/web/src/routes/albums/index.svelte
index fcd4df23f0..64f8fafe30 100644
--- a/web/src/routes/albums/index.svelte
+++ b/web/src/routes/albums/index.svelte
@@ -9,7 +9,14 @@
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, albums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -39,6 +46,7 @@
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { browser } from '$app/env';
 
 	export let user: ImmichUser;
 	export let albums: AlbumResponseDto[];
diff --git a/web/src/routes/auth/logout.ts b/web/src/routes/auth/logout.ts
index 5f644bd49b..2439ed37cd 100644
--- a/web/src/routes/auth/logout.ts
+++ b/web/src/routes/auth/logout.ts
@@ -1,8 +1,9 @@
-import { api } from '@api';
+import { api, serverApi } from '@api';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const POST: RequestHandler = async () => {
 	api.removeAccessToken();
+	serverApi.removeAccessToken();
 
 	return {
 		headers: {
diff --git a/web/src/routes/photos/[assetId].svelte b/web/src/routes/photos/[assetId].svelte
index a1c829bf2c..c70061e2e9 100644
--- a/web/src/routes/photos/[assetId].svelte
+++ b/web/src/routes/photos/[assetId].svelte
@@ -1,21 +1,20 @@
 <script context="module" lang="ts">
 	export const prerender = false;
 
+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async ({ fetch }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-
-			return {
-				status: 302,
-				redirect: '/photos'
-			};
-		} catch (e) {
+	export const load: Load = async ({ session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
+		} else {
+			return {
+				status: 302,
+				redirect: '/photos'
+			};
 		}
 	};
 </script>
diff --git a/web/src/routes/photos/index.svelte b/web/src/routes/photos/index.svelte
index e2182ac01a..7cd22bce77 100644
--- a/web/src/routes/photos/index.svelte
+++ b/web/src/routes/photos/index.svelte
@@ -3,8 +3,14 @@
 
 	import type { Load } from '@sveltejs/kit';
 	import { setAssetInfo } from '$lib/stores/assets';
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
 
-	export const load: Load = async ({ fetch }) => {
 		try {
 			const [userInfo, assets] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -40,6 +46,7 @@
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
 	import { AssetResponseDto, UserResponseDto } from '@api';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import { browser } from '$app/env';
 
 	export let user: UserResponseDto;
 
diff --git a/web/src/routes/sharing/index.svelte b/web/src/routes/sharing/index.svelte
index 4c6196e577..1e9f923259 100644
--- a/web/src/routes/sharing/index.svelte
+++ b/web/src/routes/sharing/index.svelte
@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto, api, UserResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, sharedAlbums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -33,6 +40,7 @@
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
 	import { goto } from '$app/navigation';
+	import { browser } from '$app/env';
 
 	export let user: UserResponseDto;
 	export let sharedAlbums: AlbumResponseDto[];