fix(web): sharing of access token in server API (#1858)

web/src/api/api.ts

@@ -1,11 +1,10 @@
-import { browser } from '$app/environment';
-import { env } from '$env/dynamic/public';
 import {
 	AlbumApi,
 	APIKeyApi,
 	AssetApi,
 	AuthenticationApi,
 	Configuration,
+	ConfigurationParameters,
 	DeviceInfoApi,
 	JobApi,
 	OAuthApi,
@@ -15,7 +14,7 @@ import {
 	UserApi
 } from './open-api';
 
-class ImmichApi {
+export class ImmichApi {
 	public userApi: UserApi;
 	public albumApi: AlbumApi;
 	public assetApi: AssetApi;
@@ -28,9 +27,11 @@ class ImmichApi {
 	public systemConfigApi: SystemConfigApi;
 	public shareApi: ShareApi;
 
-	private config = new Configuration({ basePath: '/api' });
+	private config: Configuration;
+
+	constructor(params: ConfigurationParameters) {
+		this.config = new Configuration(params);
 
-	constructor() {
 		this.userApi = new UserApi(this.config);
 		this.albumApi = new AlbumApi(this.config);
 		this.assetApi = new AssetApi(this.config);
@@ -57,11 +58,4 @@ class ImmichApi {
 	}
 }
 
-const api = new ImmichApi();
-
-if (!browser) {
-	const serverUrl = env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001';
-	api.setBaseUrl(serverUrl);
-}
-
-export { api };
+export const api = new ImmichApi({ basePath: '/api' });

web/src/app.d.ts

@@ -5,6 +5,7 @@
 declare namespace App {
 	interface Locals {
 		user?: import('@api').UserResponseDto;
+		api: import('@api').ImmichApi;
 	}
 
 	// interface Platform {}

web/src/hooks.server.ts

@@ -1,7 +1,14 @@
 import type { Handle, HandleServerError } from '@sveltejs/kit';
 import { AxiosError } from 'axios';
+import { env } from '$env/dynamic/public';
+import { ImmichApi } from './api/api';
+
+export const handle = (async ({ event, resolve }) => {
+	event.locals.api = new ImmichApi({
+		basePath: env.PUBLIC_IMMICH_SERVER_URL || 'http://immich-server:3001',
+		accessToken: event.cookies.get('immich_access_token')
+	});
 
-export const handle: Handle = async ({ event, resolve }) => {
 	const res = await resolve(event);
 
 	// The link header can grow quite big and has caused issues with our nginx
@@ -9,7 +16,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	res.headers.delete('Link');
 
 	return res;
-};
+}) satisfies Handle;
 
 export const handleError: HandleServerError = async ({ error }) => {
 	const httpError = error as AxiosError;

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

@@ -1,14 +1,7 @@
-import { api } from '@api';
 import type { LayoutServerLoad } from './$types';
 
-export const load = (async ({ cookies }) => {
+export const load = (async ({ locals: { api } }) => {
 	try {
-		const accessToken = cookies.get('immich_access_token');
-		if (!accessToken) {
-			return { user: undefined };
-		}
-
-		api.setAccessToken(accessToken);
 		const { data: user } = await api.userApi.getMyUserInfo();
 
 		return { user };

web/src/routes/+page.server.ts

@@ -1,9 +1,9 @@
 export const prerender = false;
-import { api } from '@api';
+
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 	if (user) {
 		throw redirect(302, '/photos');
@@ -22,4 +22,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			description: 'Immich Web Interface'
 		}
 	};
-};
+}) satisfies PageServerLoad;

web/src/routes/admin/server-status/+page.server.ts

@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-import { api } from '@api';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -19,4 +18,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'Server Status'
 		}
 	};
-};
+}) satisfies PageServerLoad;

web/src/routes/admin/user-management/+page.server.ts

@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-import { api } from '@api';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -20,4 +19,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 			title: 'User Management'
 		}
 	};
-};
+}) satisfies PageServerLoad;

web/src/routes/albums/+page.server.ts

@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	try {
 		const { user } = await parent();
 
@@ -22,4 +21,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;

web/src/routes/albums/[albumId]/+page.server.ts

@@ -1,9 +1,7 @@
 import { redirect } from '@sveltejs/kit';
-
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async ({ parent, params }) => {
+export const load = (async ({ parent, params, locals: { api } }) => {
 	const { user } = await parent();
 
 	if (!user) {
@@ -23,4 +21,4 @@ export const load: PageServerLoad = async ({ parent, params }) => {
 	} catch (e) {
 		throw redirect(302, '/albums');
 	}
-};
+}) satisfies PageServerLoad;

web/src/routes/auth/change-password/+page.server.ts

@@ -1,10 +1,9 @@
-import { api } from '@api';
-import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
 
-export const load: PageLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	try {
 		const { data: userInfo } = await api.userApi.getMyUserInfo();
 
@@ -21,4 +20,4 @@ export const load: PageLoad = async () => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;

web/src/routes/auth/login/+page.server.ts

@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	const { data } = await api.userApi.getUserCount(true);
 	if (data.userCount === 0) {
 		// Admin not registered
@@ -14,4 +13,4 @@ export const load: PageServerLoad = async () => {
 			title: 'Login'
 		}
 	};
-};
+}) satisfies PageServerLoad;

web/src/routes/auth/register/+page.server.ts

@@ -1,8 +1,7 @@
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { api } from '@api';
 
-export const load: PageServerLoad = async () => {
+export const load = (async ({ locals: { api } }) => {
 	const { data } = await api.userApi.getUserCount(true);
 	if (data.userCount != 0) {
 		// Admin has been registered, redirect to login
@@ -14,4 +13,4 @@ export const load: PageServerLoad = async () => {
 			title: 'Admin Registration'
 		}
 	};
-};
+}) satisfies PageServerLoad;

web/src/routes/share/[key]/photos/[assetId]/+page.server.ts

@@ -1,10 +1,9 @@
 export const prerender = false;
-import { error } from '@sveltejs/kit';
 
-import { api } from '@api';
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load = (async ({ params, locals: { api } }) => {
 	try {
 		const { key, assetId } = params;
 		const { data: asset } = await api.assetApi.getAssetById(assetId, key);
@@ -16,4 +15,4 @@ export const load: PageServerLoad = async ({ params }) => {
 	} catch (e) {
 		console.log('Error', e);
 	}
-};
+}) satisfies PageServerLoad;

web/src/routes/sharing/+page.server.ts

@@ -1,10 +1,9 @@
-import { redirect } from '@sveltejs/kit';
 export const prerender = false;
 
-import { api } from '@api';
+import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
+export const load = (async ({ parent, locals: { api } }) => {
 	try {
 		const { user } = await parent();
 		if (!user) {
@@ -23,4 +22,4 @@ export const load: PageServerLoad = async ({ parent }) => {
 	} catch (e) {
 		throw redirect(302, '/auth/login');
 	}
-};
+}) satisfies PageServerLoad;