From 0471f8a7291c7f7f65e4dfa560573f3dc56997de Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 26 Mar 2026 16:32:23 +0100
Subject: [PATCH] feat: add frontend OAuth authorize route and component

Add /oauth/authorize frontend route with OAuthAuthorize.vue that
handles the OAuth authorization flow: validates required query params,
calls the API to generate an authorization code, and redirects to the
callback URI. Authentication is handled by the standard router guard.
---
 frontend/src/i18n/lang/en.json             |  1 +
 frontend/src/router/index.ts               |  5 ++
 frontend/src/views/user/Login.vue          |  1 +
 frontend/src/views/user/OAuthAuthorize.vue | 77 ++++++++++++++++++++++
 frontend/src/views/user/OpenIdAuth.vue     |  3 +-
 5 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/user/OAuthAuthorize.vue

diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index 699c01094..28e185a4a 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -54,6 +54,7 @@
       "authenticating": "Authenticating…",
       "openIdStateError": "State does not match, refusing to continue!",
       "openIdGeneralError": "An error occurred while authenticating against the third party.",
+      "oauthMissingParams": "Missing required OAuth parameters: {params}",
       "logout": "Logout",
       "emailInvalid": "Please enter a valid email address.",
       "usernameRequired": "Please provide a username.",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index c19b4642d..1f4b15121 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -394,6 +394,11 @@ const router = createRouter({
 			name: 'openid.auth',
 			component: OpenIdAuth,
 		},
+		{
+			path: '/oauth/authorize',
+			name: 'oauth.authorize',
+			component: () => import('@/views/user/OAuthAuthorize.vue'),
+		},
 		{
 			path: '/about',
 			name: 'about',
diff --git a/frontend/src/views/user/Login.vue b/frontend/src/views/user/Login.vue
index 9eda9088a..29ee5c90f 100644
--- a/frontend/src/views/user/Login.vue
+++ b/frontend/src/views/user/Login.vue
@@ -217,6 +217,7 @@ async function submit() {
 	try {
 		await authStore.login(credentials)
 		authStore.setNeedsTotpPasscode(false)
+
 		redirectIfSaved()
 	} catch (e) {
 		if (e.response?.data.code === 1017 && !credentials.totpPasscode) {
diff --git a/frontend/src/views/user/OAuthAuthorize.vue b/frontend/src/views/user/OAuthAuthorize.vue
new file mode 100644
index 000000000..49318d55f
--- /dev/null
+++ b/frontend/src/views/user/OAuthAuthorize.vue
@@ -0,0 +1,77 @@
+<template>
+	<div>
+		<Message
+			v-if="errorMessage"
+			variant="danger"
+		>
+			{{ errorMessage }}
+		</Message>
+		<Message v-if="loading">
+			{{ $t('user.auth.authenticating') }}
+		</Message>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+
+import {getErrorText} from '@/message'
+import Message from '@/components/misc/Message.vue'
+import {AuthenticatedHTTPFactory} from '@/helpers/fetcher'
+
+defineOptions({name: 'OAuthAuthorize'})
+
+const {t} = useI18n({useScope: 'global'})
+const route = useRoute()
+
+const loading = ref(true)
+const errorMessage = ref('')
+
+const requiredParams = [
+	'response_type',
+	'client_id',
+	'redirect_uri',
+	'code_challenge',
+	'code_challenge_method',
+] as const
+
+async function authorize() {
+	// Validate required query parameters
+	const missing = requiredParams.filter(p => !route.query[p])
+	if (missing.length > 0) {
+		errorMessage.value = t('user.auth.oauthMissingParams', {params: missing.join(', ')})
+		loading.value = false
+		return
+	}
+
+	try {
+		const HTTP = AuthenticatedHTTPFactory()
+		const response = await HTTP.post('oauth/authorize', {
+			response_type: route.query.response_type,
+			client_id: route.query.client_id,
+			redirect_uri: route.query.redirect_uri,
+			state: route.query.state,
+			code_challenge: route.query.code_challenge,
+			code_challenge_method: route.query.code_challenge_method,
+		})
+
+		const {code, redirect_uri, state} = response.data
+
+		const redirectUrl = new URL(redirect_uri)
+		redirectUrl.searchParams.set('code', code)
+		if (state) {
+			redirectUrl.searchParams.set('state', state)
+		}
+
+		window.location.href = redirectUrl.toString()
+	} catch (e) {
+		errorMessage.value = getErrorText(e)
+	} finally {
+		loading.value = false
+	}
+}
+
+onMounted(() => authorize())
+</script>
diff --git a/frontend/src/views/user/OpenIdAuth.vue b/frontend/src/views/user/OpenIdAuth.vue
index 33268c80b..e581aaee2 100644
--- a/frontend/src/views/user/OpenIdAuth.vue
+++ b/frontend/src/views/user/OpenIdAuth.vue
@@ -80,8 +80,9 @@ async function authenticateWithCode() {
 			provider: route.params.provider,
 			code: route.query.code,
 		})
+
 		redirectIfSaved()
-	} catch(e) {
+	} catch (e) {
 		errorMessage.value = getErrorText(e)
 	} finally {
 		localStorage.removeItem('authenticating')