feat(server,web): OIDC Implementation (#884)

* chore: merge * feat: nullable password * feat: server debugger * chore: regenerate api * feat: auto-register flag * refactor: oauth endpoints * chore: regenerate api * fix: default scope configuration * refactor: pass in redirect uri from client * chore: docs * fix: bugs * refactor: auth services and user repository * fix: select password * fix: tests * fix: get signing algorithm from discovery document * refactor: cookie constants * feat: oauth logout * test: auth services * fix: query param check * fix: regenerate open-api
2025-10-29 17:40:28 +00:00 · 2022-11-14 21:24:25 -05:00
parent d476656789
commit d3c35ec9c5
51 changed files with 1997 additions and 253 deletions
--- a/web/src/api/api.ts
+++ b/web/src/api/api.ts
@@ -6,6 +6,7 @@ import {
 	Configuration,
 	DeviceInfoApi,
 	JobApi,
+	OAuthApi,
 	ServerInfoApi,
 	UserApi
 } from './open-api';
@@ -15,6 +16,7 @@ class ImmichApi {
 	public albumApi: AlbumApi;
 	public assetApi: AssetApi;
 	public authenticationApi: AuthenticationApi;
+	public oauthApi: OAuthApi;
 	public deviceInfoApi: DeviceInfoApi;
 	public serverInfoApi: ServerInfoApi;
 	public jobApi: JobApi;
@@ -26,6 +28,7 @@ class ImmichApi {
 		this.albumApi = new AlbumApi(this.config);
 		this.assetApi = new AssetApi(this.config);
 		this.authenticationApi = new AuthenticationApi(this.config);
+		this.oauthApi = new OAuthApi(this.config);
 		this.deviceInfoApi = new DeviceInfoApi(this.config);
 		this.serverInfoApi = new ServerInfoApi(this.config);
 		this.jobApi = new JobApi(this.config);
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -1125,6 +1125,63 @@ export interface LogoutResponseDto {
     * @memberof LogoutResponseDto
     */
    'successful': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof LogoutResponseDto
+     */
+    'redirectUri': string;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthCallbackDto
+ */
+export interface OAuthCallbackDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthCallbackDto
+     */
+    'url': string;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthConfigDto
+ */
+export interface OAuthConfigDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigDto
+     */
+    'redirectUri': string;
+}
+/**
+ * 
+ * @export
+ * @interface OAuthConfigResponseDto
+ */
+export interface OAuthConfigResponseDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'enabled': boolean;
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigResponseDto
+     */
+    'url'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof OAuthConfigResponseDto
+     */
+    'buttonText'?: string;
 }
 /**
 * 
@@ -4459,6 +4516,174 @@ export class JobApi extends BaseAPI {
 }


+/**
+ * OAuthApi - axios parameter creator
+ * @export
+ */
+export const OAuthApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        callback: async (oAuthCallbackDto: OAuthCallbackDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'oAuthCallbackDto' is not null or undefined
+            assertParamExists('callback', 'oAuthCallbackDto', oAuthCallbackDto)
+            const localVarPath = `/oauth/callback`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(oAuthCallbackDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {OAuthConfigDto} oAuthConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        generateConfig: async (oAuthConfigDto: OAuthConfigDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'oAuthConfigDto' is not null or undefined
+            assertParamExists('generateConfig', 'oAuthConfigDto', oAuthConfigDto)
+            const localVarPath = `/oauth/config`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(oAuthConfigDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * OAuthApi - functional programming interface
+ * @export
+ */
+export const OAuthApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = OAuthApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async callback(oAuthCallbackDto: OAuthCallbackDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<LoginResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.callback(oAuthCallbackDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+        /**
+         * 
+         * @param {OAuthConfigDto} oAuthConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async generateConfig(oAuthConfigDto: OAuthConfigDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<OAuthConfigResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.generateConfig(oAuthConfigDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
+    }
+};
+
+/**
+ * OAuthApi - factory interface
+ * @export
+ */
+export const OAuthApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = OAuthApiFp(configuration)
+    return {
+        /**
+         * 
+         * @param {OAuthCallbackDto} oAuthCallbackDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        callback(oAuthCallbackDto: OAuthCallbackDto, options?: any): AxiosPromise<LoginResponseDto> {
+            return localVarFp.callback(oAuthCallbackDto, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @param {OAuthConfigDto} oAuthConfigDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        generateConfig(oAuthConfigDto: OAuthConfigDto, options?: any): AxiosPromise<OAuthConfigResponseDto> {
+            return localVarFp.generateConfig(oAuthConfigDto, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * OAuthApi - object-oriented interface
+ * @export
+ * @class OAuthApi
+ * @extends {BaseAPI}
+ */
+export class OAuthApi extends BaseAPI {
+    /**
+     * 
+     * @param {OAuthCallbackDto} oAuthCallbackDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public callback(oAuthCallbackDto: OAuthCallbackDto, options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).callback(oAuthCallbackDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @param {OAuthConfigDto} oAuthConfigDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof OAuthApi
+     */
+    public generateConfig(oAuthConfigDto: OAuthConfigDto, options?: AxiosRequestConfig) {
+        return OAuthApiFp(this.configuration).generateConfig(oAuthConfigDto, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
+
 /**
 * ServerInfoApi - axios parameter creator
 * @export
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -1,17 +1,49 @@
 <script lang="ts">
+	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 	import { loginPageMessage } from '$lib/constants';
-	import { api } from '@api';
-	import { createEventDispatcher } from 'svelte';
+	import { api, OAuthConfigResponseDto } from '@api';
+	import { createEventDispatcher, onMount } from 'svelte';

 	let error: string;
 	let email = '';
 	let password = '';
+	let oauthError: string;
+	let oauthConfig: OAuthConfigResponseDto = { enabled: false };
+	let loading = true;

 	const dispatch = createEventDispatcher();

+	onMount(async () => {
+		const search = window.location.search;
+		if (search.includes('code=') || search.includes('error=')) {
+			try {
+				loading = true;
+				await api.oauthApi.callback({ url: window.location.href });
+				dispatch('success');
+				return;
+			} catch (e) {
+				console.error('Error [login-form] [oauth.callback]', e);
+				oauthError = 'Unable to complete OAuth login';
+				loading = false;
+			}
+		}
+
+		try {
+			const redirectUri = window.location.href.split('?')[0];
+			console.log(`OAuth Redirect URI: ${redirectUri}`);
+			const { data } = await api.oauthApi.generateConfig({ redirectUri });
+			oauthConfig = data;
+		} catch (e) {
+			console.error('Error [login-form] [oauth.generateConfig]', e);
+		}
+
+		loading = false;
+	});
+
 	const login = async () => {
 		try {
 			error = '';
+			loading = true;

 			const { data } = await api.authenticationApi.login({
 				email,
@@ -27,6 +59,7 @@
 			return;
 		} catch (e) {
 			error = 'Incorrect email or password';
+			loading = false;
 			return;
 		}
 	};
@@ -48,41 +81,65 @@
 		</p>
 	{/if}

-	<form on:submit|preventDefault={login} autocomplete="off">
-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="email">Email</label>
-			<input
-				class="immich-form-input"
-				id="email"
-				name="email"
-				type="email"
-				bind:value={email}
-				required
-			/>
+	{#if loading}
+		<div class="flex place-items-center place-content-center">
+			<LoadingSpinner />
 		</div>
+	{:else}
+		<form on:submit|preventDefault={login} autocomplete="off">
+			<div class="m-4 flex flex-col gap-2">
+				<label class="immich-form-label" for="email">Email</label>
+				<input
+					class="immich-form-input"
+					id="email"
+					name="email"
+					type="email"
+					bind:value={email}
+					required
+				/>
+			</div>

-		<div class="m-4 flex flex-col gap-2">
-			<label class="immich-form-label" for="password">Password</label>
-			<input
-				class="immich-form-input"
-				id="password"
-				name="password"
-				type="password"
-				bind:value={password}
-				required
-			/>
-		</div>
+			<div class="m-4 flex flex-col gap-2">
+				<label class="immich-form-label" for="password">Password</label>
+				<input
+					class="immich-form-input"
+					id="password"
+					name="password"
+					type="password"
+					bind:value={password}
+					required
+				/>
+			</div>

-		{#if error}
-			<p class="text-red-400 pl-4">{error}</p>
-		{/if}
+			{#if error}
+				<p class="text-red-400 pl-4">{error}</p>
+			{/if}

-		<div class="flex w-full">
-			<button
-				type="submit"
-				class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
-				>Login</button
-			>
-		</div>
-	</form>
+			<div class="flex w-full">
+				<button
+					type="submit"
+					disabled={loading}
+					class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
+					>Login</button
+				>
+			</div>
+
+			{#if oauthConfig.enabled}
+				<div class="flex flex-col gap-4 px-4">
+					<hr />
+					{#if oauthError}
+						<p class="text-red-400">{oauthError}</p>
+					{/if}
+					<a href={oauthConfig.url} class="flex w-full">
+						<button
+							type="button"
+							disabled={loading}
+							class="bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
+							>{oauthConfig.buttonText || 'Login with OAuth'}</button
+						>
+					</a>
+				</div>
+			{/if}
+		</form>
+	{/if}
 </div>
--- a/web/src/lib/components/shared-components/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar.svelte
@@ -38,8 +38,11 @@
 	};

 	const logOut = async () => {
+		const { data } = await api.authenticationApi.logout();
+
 		await fetch('auth/logout', { method: 'POST' });
-		goto('/auth/login');
+
+		goto(data.redirectUri || '/auth/login');
 	};
 </script>

--- a/web/src/routes/auth/logout/+server.ts
+++ b/web/src/routes/auth/logout/+server.ts
@@ -10,7 +10,7 @@ export const POST: RequestHandler = async () => {

 	headers.append(
 		'set-cookie',
-		'immich_is_authenticated=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;'
+		'immich_auth_type=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;'
 	);
 	headers.append(
 		'set-cookie',