feat: device authorization endpoint (#270)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/messages/en-US.json

@@ -342,5 +342,9 @@
 	"show_code": "Show Code",
 	"callback_url_description": "URL(s) provided by your client. Wildcards (*) are supported, but best avoided for better security.",
 	"api_key_expiration": "API Key Expiration",
-	"send_an_email_to_the_user_when_their_api_key_is_about_to_expire": "Send an email to the user when their API key is about to expire."
+	"send_an_email_to_the_user_when_their_api_key_is_about_to_expire": "Send an email to the user when their API key is about to expire.",
+	"authorize_device": "Authorize Device",
+	"the_device_has_been_authorized": "The device has been authorized.",
+	"enter_code_displayed_in_previous_step": "Enter the code that was displayed in the previous step.",
+	"authorize": "Authorize"
 }

frontend/src/hooks.server.ts

@@ -24,7 +24,7 @@ const authenticationHandle: Handle = async ({ event, resolve }) => {
 	const { isSignedIn, isAdmin } = verifyJwt(event.cookies.get(ACCESS_TOKEN_COOKIE_NAME));
 
 	const isUnauthenticatedOnlyPath = event.url.pathname.startsWith('/login') || event.url.pathname.startsWith('/lc')
-	const isPublicPath = ['/authorize', '/health'].includes(event.url.pathname);
+	const isPublicPath = ['/authorize', '/device', '/health'].includes(event.url.pathname);
 	const isAdminPath = event.url.pathname.startsWith('/settings/admin');
 
 	if (!isUnauthenticatedOnlyPath && !isPublicPath && !isSignedIn) {

frontend/src/lib/components/header/header.svelte

@@ -5,7 +5,7 @@
 	import Logo from '../logo.svelte';
 	import HeaderAvatar from './header-avatar.svelte';
 
-	const authUrls = [/^\/authorize$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
+	const authUrls = [/^\/authorize$/, /^\/device$/, /^\/login(?:\/.*)?$/, /^\/logout$/];
 
 	let isAuthPage = $derived(
 		!page.error && authUrls.some((pattern) => pattern.test(page.url.pathname))

frontend/src/lib/components/scope-list.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { m } from '$lib/paraglide/messages';
+	import { LucideMail, LucideUser, LucideUsers } from 'lucide-svelte';
+	import ScopeItem from './scope-item.svelte';
+
+	let { scope }: { scope: string } = $props();
+</script>
+
+<div class="flex flex-col gap-3" data-testid="scopes">
+	{#if scope!.includes('email')}
+		<ScopeItem icon={LucideMail} name={m.email()} description={m.view_your_email_address()} />
+	{/if}
+	{#if scope!.includes('profile')}
+		<ScopeItem
+			icon={LucideUser}
+			name={m.profile()}
+			description={m.view_your_profile_information()}
+		/>
+	{/if}
+	{#if scope!.includes('groups')}
+		<ScopeItem
+			icon={LucideUsers}
+			name={m.groups()}
+			description={m.view_the_groups_you_are_a_member_of()}
+		/>
+	{/if}
+</div>

frontend/src/lib/services/oidc-service.ts

@@ -1,5 +1,6 @@
 import type {
 	AuthorizeResponse,
+	OidcDeviceCodeInfo,
 	OidcClient,
 	OidcClientCreate,
 	OidcClientMetaData,
@@ -8,6 +9,7 @@ import type {
 import type { Paginated, SearchPaginationSortRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';
 
+
 class OidcService extends APIService {
 	async authorize(
 		clientId: string,
@@ -92,6 +94,15 @@ class OidcService extends APIService {
 		const res = await this.api.put(`/oidc/clients/${id}/allowed-user-groups`, { userGroupIds });
 		return res.data as OidcClientWithAllowedUserGroups;
 	}
+
+	async verifyDeviceCode(userCode: string) {
+		return await this.api.post(`/oidc/device/verify?code=${userCode}`);
+	}
+
+	async getDeviceCodeInfo(userCode: string): Promise<OidcDeviceCodeInfo> {
+		const response = await this.api.get(`/oidc/device/info?code=${userCode}`);
+		return response.data;
+	}
 }
 
 export default OidcService;

frontend/src/lib/types/oidc.type.ts

@@ -23,6 +23,12 @@ export type OidcClientCreateWithLogo = OidcClientCreate & {
 	logo: File | null | undefined;
 };
 
+export type OidcDeviceCodeInfo = {
+	scope: string;
+	authorizationRequired: boolean;
+	client: OidcClientMetaData;
+};
+
 export type AuthorizeResponse = {
 	code: string;
 	callbackURL: string;

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

@@ -14,7 +14,7 @@
 	import { slide } from 'svelte/transition';
 	import type { PageData } from './$types';
 	import ClientProviderImages from './components/client-provider-images.svelte';
-	import ScopeItem from './components/scope-item.svelte';
+	import ScopeItem from '$lib/components/scope-item.svelte';
 
 	const webauthnService = new WebAuthnService();
 	const oidService = new OidcService();

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

@@ -0,0 +1,9 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+	const code = url.searchParams.get('code');
+
+	return {
+		code
+	};
+};

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import SignInWrapper from '$lib/components/login-wrapper.svelte';
+	import ScopeList from '$lib/components/scope-list.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import { Input } from '$lib/components/ui/input';
+	import { m } from '$lib/paraglide/messages';
+	import OIDCService from '$lib/services/oidc-service';
+	import WebAuthnService from '$lib/services/webauthn-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import userStore from '$lib/stores/user-store';
+	import type { OidcDeviceCodeInfo } from '$lib/types/oidc.type';
+	import { getAxiosErrorMessage } from '$lib/utils/error-util';
+	import { startAuthentication } from '@simplewebauthn/browser';
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import ClientProviderImages from '../authorize/components/client-provider-images.svelte';
+	import LoginLogoErrorSuccessIndicator from '../login/components/login-logo-error-success-indicator.svelte';
+
+	let { data } = $props();
+
+	const oidcService = new OIDCService();
+	const webauthnService = new WebAuthnService();
+
+	let userCode = $state(data.code || '');
+	let isLoading = $state(false);
+	let deviceInfo: OidcDeviceCodeInfo | undefined = $state();
+	let success = $state(false);
+	let errorMessage: string | null = $state(null);
+	let authorizationRequired = $state(false);
+
+	onMount(() => {
+		if (data.code && $userStore) {
+			authorize();
+		}
+	});
+
+	async function authorize() {
+		isLoading = true;
+		try {
+			// Get access token if not signed in
+			if (!$userStore) {
+				const loginOptions = await webauthnService.getLoginOptions();
+				const authResponse = await startAuthentication(loginOptions);
+				const user = await webauthnService.finishLogin(authResponse);
+				userStore.setUser(user);
+			}
+
+			const info = await oidcService.getDeviceCodeInfo(userCode);
+			deviceInfo = info;
+
+			if (info.authorizationRequired && !authorizationRequired) {
+				authorizationRequired = true;
+				isLoading = false;
+				return;
+			}
+
+			await oidcService.verifyDeviceCode(userCode);
+
+			success = true;
+		} catch (e) {
+			errorMessage = getAxiosErrorMessage(e);
+		} finally {
+			isLoading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{m.authorize_device()}</title>
+</svelte:head>
+
+<SignInWrapper
+	animate={!$appConfigStore.disableAnimations}
+	showAlternativeSignInMethodButton={$userStore == null}
+>
+	<div class="flex justify-center">
+		{#if deviceInfo?.client}
+			<ClientProviderImages client={deviceInfo.client} {success} error={!!errorMessage} />
+		{:else}
+			<LoginLogoErrorSuccessIndicator {success} error={!!errorMessage} />
+		{/if}
+	</div>
+	<h1 class="font-playfair mt-5 text-4xl font-bold">{m.authorize_device()}</h1>
+	{#if errorMessage}
+		<p class="text-muted-foreground mt-2">
+			{errorMessage}. {m.please_try_again()}
+		</p>
+	{:else if success}
+		<p class="text-muted-foreground mt-2">{m.the_device_has_been_authorized()}</p>
+	{:else if authorizationRequired}
+		<div transition:slide={{ duration: 300 }}>
+			<Card.Root class="mt-6">
+				<Card.Header class="pb-5">
+					<p class="text-muted-foreground text-start">
+						{@html m.client_wants_to_access_the_following_information({
+							client: deviceInfo!.client.name
+						})}
+					</p>
+				</Card.Header>
+				<Card.Content data-testid="scopes">
+					<ScopeList scope={deviceInfo!.scope} />
+				</Card.Content>
+			</Card.Root>
+		</div>
+	{:else}
+		<p class="text-muted-foreground mt-2">{m.enter_code_displayed_in_previous_step()}</p>
+		<form id="device-code-form" onsubmit={authorize} class="w-full max-w-[450px]">
+			<Input id="user-code" class="mt-7" placeholder={m.code()} bind:value={userCode} type="text" />
+		</form>
+	{/if}
+	{#if !success}
+		<div class="mt-10 flex w-full justify-stretch gap-2">
+			<Button href="/" class="w-full" variant="secondary">{m.cancel()}</Button>
+			{#if !errorMessage}
+				<Button form="device-code-form" class="w-full" onclick={authorize} {isLoading}
+					>{m.authorize()}</Button
+				>
+			{:else}
+				<Button class="w-full" on:click={() => (errorMessage = null)}>{m.try_again()}</Button>
+			{/if}
+		</div>
+	{/if}
+</SignInWrapper>

frontend/src/routes/login/alternative/+page.svelte

@@ -31,7 +31,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper animate={!$appConfigStore.disableAnimations}>
+<SignInWrapper>
 	<div class="flex h-full flex-col justify-center">
 		<div class="bg-muted mx-auto rounded-2xl p-3">
 			<Logo class="h-10 w-10" />

frontend/tests/data.ts

@@ -33,7 +33,7 @@ export const oidcClients = {
 		id: '606c7782-f2b1-49e5-8ea9-26eb1b06d018',
 		name: 'Immich',
 		callbackUrl: 'http://immich/auth/callback',
-		secret: 'PYjrE9u4v9GVqXKi52eur0eb2Ci4kc0x'
+		secret: 'PYjrE9u4v9GVqXKi52eur0eb2Ci4kc0x',
 	},
 	pingvinShare: {
 		name: 'Pingvin Share',

frontend/tests/oidc.spec.ts

@@ -1,6 +1,7 @@
 import test, { expect } from '@playwright/test';
 import { accessTokens, idTokens, oidcClients, refreshTokens, users } from './data';
 import { cleanupBackend } from './utils/cleanup.util';
+import oidcUtil from './utils/oidc.util';
 import passkeyUtil from './utils/passkey.util';
 
 test.beforeEach(cleanupBackend);
@@ -277,3 +278,99 @@ test.describe('Introspection endpoint', () => {
 		expect(introspectionResponse.status()).toBe(400);
 	});
 });
+
+test('Authorize new client with device authorization flow', async ({ page }) => {
+	const client = oidcClients.immich;
+	const userCode = await oidcUtil.getUserCode(page, client.id, client.secret);
+
+	await page.goto(`/device?code=${userCode}`);
+
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Email' })).toBeVisible();
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Profile' })).toBeVisible();
+
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: 'The device has been authorized.' })
+	).toBeVisible();
+});
+
+test('Authorize new client with device authorization flow while not signed in', async ({
+	page
+}) => {
+	await page.context().clearCookies();
+	const client = oidcClients.immich;
+	const userCode = await oidcUtil.getUserCode(page, client.id, client.secret);
+
+	await page.goto(`/device?code=${userCode}`);
+
+	await (await passkeyUtil.init(page)).addPasskey();
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Email' })).toBeVisible();
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Profile' })).toBeVisible();
+
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: 'The device has been authorized.' })
+	).toBeVisible();
+});
+
+test('Authorize existing client with device authorization flow', async ({ page }) => {
+	const client = oidcClients.nextcloud;
+	const userCode = await oidcUtil.getUserCode(page, client.id, client.secret);
+
+	await page.goto(`/device?code=${userCode}`);
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: 'The device has been authorized.' })
+	).toBeVisible();
+});
+
+test('Authorize existing client with device authorization flow while not signed in', async ({
+	page
+}) => {
+	await page.context().clearCookies();
+	const client = oidcClients.nextcloud;
+	const userCode = await oidcUtil.getUserCode(page, client.id, client.secret);
+
+	await page.goto(`/device?code=${userCode}`);
+
+	await (await passkeyUtil.init(page)).addPasskey();
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: 'The device has been authorized.' })
+	).toBeVisible();
+});
+
+test('Authorize client with device authorization flow with invalid code', async ({ page }) => {
+	await page.goto('/device?code=invalid-code');
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: 'Invalid device code.' })
+	).toBeVisible();
+});
+
+test('Authorize new client with device authorization with user group not allowed', async ({
+	page
+}) => {
+	await page.context().clearCookies();
+	const client = oidcClients.immich;
+	const userCode = await oidcUtil.getUserCode(page, client.id, client.secret);
+
+	await page.goto(`/device?code=${userCode}`);
+
+	await (await passkeyUtil.init(page)).addPasskey('craig');
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Email' })).toBeVisible();
+	await expect(page.getByTestId('scopes').getByRole('heading', { name: 'Profile' })).toBeVisible();
+
+	await page.getByRole('button', { name: 'Authorize' }).click();
+
+	await expect(
+		page.getByRole('paragraph').filter({ hasText: "You're not allowed to access this service." })
+	).toBeVisible();
+});

frontend/tests/utils/oidc.util.ts

@@ -0,0 +1,22 @@
+import type { Page } from '@playwright/test';
+
+async function getUserCode(page: Page, clientId: string, clientSecret: string) {
+	const response = await page.request
+		.post('/api/oidc/device/authorize', {
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded'
+			},
+			form: {
+				client_id: clientId,
+				client_secret: clientSecret,
+				scope: 'openid profile email'
+			}
+		})
+		.then((r) => r.json());
+
+	return response.user_code;
+}
+
+export default {
+	getUserCode
+};