Fix error in logout procedure and guard for each route (#439)

README.md

@@ -137,7 +137,7 @@ wget -O .env wget https://raw.githubusercontent.com/immich-app/immich/main/docke
 * Populate customised database information if necessary.
 * Populate `UPLOAD_LOCATION` as prefered location for storing backup assets.
 * Populate a secret value for `JWT_SECRET`
-* [Optional] Popluate Mapbox value.
+* [Optional] Populate Mapbox value.
 
 **Example**
 
@@ -169,7 +169,7 @@ MAPBOX_KEY=
 
 ### Step 3 - Start the containers
 
-Run `docker-compose up` or `docker-compose up` (based on your docker's version)
+Run `docker-compose up` or `docker compose up` (based on your docker's version)
 
 ### Step 4 - Register admin user
 

web/src/api/api.ts

@@ -1,4 +1,3 @@
-import { serverEndpoint } from '$lib/constants';
 import {
 	AlbumApi,
 	AssetApi,

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') || '');

web/src/lib/components/shared-components/navigation-bar.svelte

@@ -4,7 +4,6 @@
 	import type { ImmichUser } from '$lib/models/immich-user';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fade, fly, slide } from 'svelte/transition';
-	import { serverEndpoint } from '../../constants';
 	import TrayArrowUp from 'svelte-material-icons/TrayArrowUp.svelte';
 	import { clickOutside } from '../../utils/click-outside';
 	import { api } from '@api';
@@ -131,7 +130,7 @@
 				>
 					{#if shouldShowProfileImage}
 						<img
-							src={`${serverEndpoint}/user/profile-image/${user.id}`}
+							src={`api/user/profile-image/${user.id}`}
 							alt="profile-img"
 							class="inline rounded-full h-20 w-20 object-cover shadow-md"
 						/>

web/src/lib/components/shared-components/status-box.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import { serverEndpoint } from '$lib/constants';
 	import Cloud from 'svelte-material-icons/Cloud.svelte';
 	import Dns from 'svelte-material-icons/Dns.svelte';
 	import LoadingSpinner from './loading-spinner.svelte';
 	import { api, ServerInfoResponseDto } from '@api';
 
-	let endpoint = serverEndpoint;
 	let isServerOk = true;
 	let serverVersion = '';
 	let serverInfo: ServerInfoResponseDto;

web/src/lib/constants.ts

@@ -1,2 +1 @@
-export const serverEndpoint: string = import.meta.env.VITE_SERVER_ENDPOINT;
 export const loginPageMessage: string = import.meta.env.VITE_LOGIN_PAGE_MESSAGE;

web/src/lib/stores/websocket.ts

@@ -1,12 +1,9 @@
 import { Socket, io } from 'socket.io-client';
 import { writable } from 'svelte/store';
-import { serverEndpoint } from '../constants';
 
 let websocket: Socket;
 
 export const openWebsocketConnection = () => {
-	const websocketEndpoint = serverEndpoint.replace('/api', '');
-
 	try {
 		websocket = io('', {
 			path: '/api/socket.io',

web/src/lib/utils/file-uploader.ts

@@ -1,6 +1,5 @@
 /* @vite-ignore */
 import * as exifr from 'exifr';
-import { serverEndpoint } from '../constants';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import type { UploadAsset } from '../models/upload-asset';
 import { api, AssetFileUploadResponseDto } from '@api';
@@ -168,7 +167,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 			uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
 		};
 
-		request.open('POST', `api/asset/upload`);
+		request.open('POST', `/api/asset/upload`);
 
 		request.send(formData);
 	} catch (e) {

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;
 

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>

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 }) => {
+	export const load: Load = async ({ params, session }) => {
-		try {
+		if (!browser && !session.user) {
-			await fetch('/data/user/get-my-user-info');
-		} catch (e) {
 			return {
 				status: 302,
 				redirect: '/auth/login'

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[];

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: {

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 }) => {
+	export const load: Load = async ({ session }) => {
-		try {
+		if (!browser && !session.user) {
-			await fetch('/data/user/get-my-user-info');
-
-			return {
-				status: 302,
-				redirect: '/photos'
-			};
-		} catch (e) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
+		} else {
+			return {
+				status: 302,
+				redirect: '/photos'
+			};
 		}
 	};
 </script>

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;
 

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[];