diff --git a/apps/settings/lib/Settings/Personal/Security/Authtokens.php b/apps/settings/lib/Settings/Personal/Security/Authtokens.php
index f5cf701460336..9da095a6cc765 100644
--- a/apps/settings/lib/Settings/Personal/Security/Authtokens.php
+++ b/apps/settings/lib/Settings/Personal/Security/Authtokens.php
@@ -12,6 +12,7 @@
 use OC\Authentication\Token\INamedToken;
 use OC\Authentication\Token\IProvider as IAuthTokenProvider;
 use OC\Authentication\Token\IToken;
+use OCA\Settings\AppInfo\Application;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
 use OCP\Authentication\Exceptions\InvalidTokenException;
@@ -20,6 +21,7 @@
 use OCP\IUserSession;
 use OCP\Session\Exceptions\SessionNotAvailableException;
 use OCP\Settings\ISettings;
+use OCP\Util;
 use function array_map;
 
 class Authtokens implements ISettings {
@@ -47,6 +49,9 @@ public function getForm(): TemplateResponse {
 			&& $this->serverConfig->getSystemValueBool('auth_can_create_app_token', true)
 		);
 
+		Util::addStyle(Application::APP_ID, 'personal-security-authtokens');
+		Util::addScript(Application::APP_ID, 'personal-security-authtokens');
+
 		return new TemplateResponse('settings', 'settings/personal/security/authtokens');
 	}
 
diff --git a/apps/settings/src/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
similarity index 58%
rename from apps/settings/src/components/AuthToken.spec.ts
rename to apps/settings/src/authtokens/components/AuthToken.spec.ts
index 75b483247f66f..b1a565e770a39 100644
--- a/apps/settings/src/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -6,15 +6,10 @@
 import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-// AuthToken.vue reads window.OC.theme.productName at module evaluation time.
-// vi.hoisted runs before imports, so this guarantees the property is set on
-// the existing jsdom window before the SFC is first parsed.
-vi.hoisted(() => {
-	(window as unknown as { OC: { theme: { productName: string } } }).OC.theme = { productName: 'Nextcloud' }
-})
+import { getByRole } from '@testing-library/vue'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 // Mock @nextcloud/dialogs so the wipe action's showConfirmation call resolves
 // synchronously in tests. Hoisted so it's installed before AuthToken.vue imports.
@@ -26,9 +21,15 @@ vi.mock('@nextcloud/dialogs', () => ({
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthToken from './AuthToken.vue'
 import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
+import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 import { detect } from '../utils/userAgentDetect.ts'
 
+// AuthToken.vue reads window.OC.theme.productName, which the test window lacks
+;(window as unknown as { OC: { theme: { productName: string } } }).OC.theme = { productName: 'Nextcloud' }
+
+enableAutoUnmount(afterEach)
+
 function makeToken(overrides: Partial<IToken> = {}): IToken {
 	return {
 		id: 1,
@@ -42,37 +43,36 @@ function makeToken(overrides: Partial<IToken> = {}): IToken {
 	}
 }
 
-function mountAuthToken(token: IToken) {
+function mountAuthToken(token: IToken, { stubs = {}, attachTo }: { stubs?: Record<string, object | boolean>, attachTo?: HTMLElement } = {}) {
 	return mount(AuthToken, {
-		// Vue Test Utils v1 (legacy pipeline) uses propsData; v2 also accepts it
-		propsData: { token },
-		mocks: {
-			t: (_: string, text: string) => text,
+		props: { token },
+		attachTo,
+		global: {
+			stubs: {
+				NcActions: true,
+				NcActionButton: true,
+				NcActionCheckbox: true,
+				NcButton: true,
+				NcDateTime: true,
+				NcIconSvgWrapper: true,
+				NcTextField: true,
+				...stubs,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens: [token] } },
+			})],
 		},
-		stubs: {
-			NcActions: true,
-			NcActionButton: true,
-			NcActionCheckbox: true,
-			NcButton: true,
-			NcDateTime: true,
-			NcIconSvgWrapper: true,
-			NcTextField: true,
-		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens: [token] } },
-		}),
 	})
 }
 
 function mountDeleteDialog(token: IToken, open = true) {
 	return mount(AuthTokenDeleteDialog, {
-		propsData: { token, open },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: { template: '<div><slot /></div>' },
+		props: { token, open },
+		global: {
+			stubs: {
+				NcDialog: { template: '<div><slot /></div>' },
+			},
 		},
 	})
 }
@@ -88,7 +88,7 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
@@ -102,12 +102,12 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteToken).toHaveBeenCalledTimes(1)
 		expect(store.deleteToken).toHaveBeenCalledWith(token)
@@ -119,11 +119,11 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		// Dialog is v-if'd off the tree once closed
 		expect(wrapper.findComponent(AuthTokenDeleteDialog).exists()).toBe(false)
@@ -135,7 +135,7 @@ describe('AuthToken revoke flow', () => {
 		const wrapper = mountAuthToken(token)
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
@@ -144,6 +144,109 @@ describe('AuthToken revoke flow', () => {
 	})
 })
 
+describe('AuthToken rename focus', () => {
+	function mountRenamable(token: IToken) {
+		return mountAuthToken(token, {
+			attachTo: document.body,
+			stubs: {
+				NcActions: { template: '<div><button>Device settings</button><slot /></div>' },
+				NcTextField: { template: '<input>', methods: { select() {} } },
+			},
+		})
+	}
+
+	function actionsButton(wrapper: ReturnType<typeof mountRenamable>) {
+		return getByRole(wrapper.element, 'button', { name: 'Device settings' })
+	}
+
+	it('returns focus to the actions button after cancelling with Escape', async () => {
+		const wrapper = mountRenamable(makeToken())
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('input').trigger('keyup', { key: 'Escape' })
+		await nextTick()
+
+		expect(wrapper.find('form').exists()).toBe(false)
+		expect(actionsButton(wrapper)).toHaveFocus()
+	})
+
+	it('returns focus to the actions button after saving the new name', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await nextTick()
+
+		expect(store.renameToken).toHaveBeenCalledWith(token, token.name)
+		expect(actionsButton(wrapper)).toHaveFocus()
+	})
+
+	it('returns focus to the actions button once the password confirmation closes', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+		const dialogField = document.createElement('input')
+		document.body.appendChild(dialogField)
+		const dialog = Promise.withResolvers<void>()
+		vi.mocked(store.renameToken).mockImplementation(async () => {
+			await new Promise((resolve) => setTimeout(resolve))
+			dialogField.focus()
+			await dialog.promise
+			dialogField.remove()
+			return true
+		})
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await vi.waitFor(() => expect(dialogField).toHaveFocus(), { interval: 1 })
+		dialog.resolve()
+
+		await vi.waitFor(() => expect(actionsButton(wrapper)).toHaveFocus(), { interval: 1 })
+	})
+})
+
+describe('AuthToken action labels', () => {
+	it('labels each action with its own text', () => {
+		const wrapper = mountAuthToken(makeToken(), {
+			stubs: {
+				NcActions: { template: '<ul><slot /></ul>' },
+				NcActionButton: false,
+				NcButton: false,
+			},
+		})
+
+		const labels = wrapper.findAll('button').map((button) => button.text())
+		expect(labels).toEqual(expect.arrayContaining(['Rename', 'Revoke', 'Wipe device']))
+	})
+})
+
+describe('AuthTokenSetupDialog QR code', () => {
+	// The credentials are shown as text, so the QR code is redundant for screen readers
+	it('hides the QR code from assistive technology', async () => {
+		const wrapper = mount(AuthTokenSetupDialog, {
+			props: { token: { token: 'app-password', loginName: 'admin', deviceToken: makeToken() } },
+			global: {
+				stubs: {
+					NcDialog: { template: '<div><slot /></div>' },
+					NcIconSvgWrapper: true,
+					// jsdom has no canvas 2D context to draw the QR code on
+					VueQrcode: { template: '<canvas />' },
+				},
+			},
+		})
+
+		getByRole(wrapper.element, 'button', { name: 'Show QR code for mobile apps' }).click()
+		await nextTick()
+
+		expect(wrapper.find('canvas').element).toHaveAttribute('aria-hidden', 'true')
+	})
+})
+
 describe('AuthToken wipe flow', () => {
 	beforeEach(() => {
 		vi.clearAllMocks()
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
new file mode 100644
index 0000000000000..7cc7a06b8c7f7
--- /dev/null
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -0,0 +1,363 @@
+<!--
+  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { IToken } from '../store/authtoken.ts'
+
+import { mdiAndroid, mdiAppleIos, mdiAppleSafari, mdiCellphone, mdiCheck, mdiFirefox, mdiGoogleChrome, mdiKeyOutline, mdiMicrosoftEdge, mdiMonitor, mdiTablet, mdiWeb } from '@mdi/js'
+import { showConfirmation } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
+import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
+import { detect } from '../utils/userAgentDetect.ts'
+
+const props = defineProps<{
+	/** The token shown in this row */
+	token: IToken
+}>()
+
+const productName = window.OC.theme.productName as string
+
+const nameMap = {
+	edge: 'Microsoft Edge',
+	firefox: 'Firefox',
+	chrome: 'Google Chrome',
+	safari: 'Safari',
+	androidChrome: t('settings', 'Google Chrome for Android'),
+	iphone: 'iPhone',
+	ipad: 'iPad',
+	iosClient: t('settings', '{productName} iOS app', { productName }),
+	androidClient: t('settings', '{productName} Android app', { productName }),
+	iosTalkClient: t('settings', '{productName} Talk for iOS', { productName }),
+	androidTalkClient: t('settings', '{productName} Talk for Android', { productName }),
+	syncClient: t('settings', 'Sync client'),
+	davx5: 'DAVx5',
+	webPirate: 'WebPirate',
+	sailfishBrowser: 'SailfishBrowser',
+	neon: 'Neon',
+}
+
+const authTokenStore = useAuthTokenStore()
+
+const nameField = useTemplateRef('input')
+const actions = useTemplateRef('actions')
+
+const actionOpen = ref(false)
+const renaming = ref(false)
+const newName = ref('')
+const deleteDialogOpen = ref(false)
+
+const canChangeScope = computed(() => props.token.type === TokenType.PERMANENT_TOKEN)
+
+/**
+ * Object ob the current user agent used by the token
+ * This either returns an object containing user agent information or `null` if unknown
+ */
+const client = computed(() => {
+	// pretty format sync client user agent
+	const matches = props.token.name.match(/Mozilla\/5\.0 \((\w+)\) (?:mirall|csyncoC)\/(\d+\.\d+\.\d+)/)
+
+	if (matches) {
+		return {
+			id: 'syncClient',
+			os: matches[1],
+			version: matches[2],
+		}
+	}
+
+	return detect(props.token.name)
+})
+
+/**
+ * Last activity of the token as ECMA timestamp (in ms)
+ */
+const tokenLastActivity = computed(() => props.token.lastActivity * 1000)
+
+/**
+ * Icon to use for the current token
+ */
+const tokenIcon = computed(() => {
+	// For custom created app tokens / app passwords
+	if (props.token.type === TokenType.PERMANENT_TOKEN) {
+		return mdiKeyOutline
+	}
+
+	switch (client.value?.id) {
+		case 'edge':
+			return mdiMicrosoftEdge
+		case 'firefox':
+			return mdiFirefox
+		case 'chrome':
+			return mdiGoogleChrome
+		case 'safari':
+			return mdiAppleSafari
+		case 'androidChrome':
+		case 'androidClient':
+		case 'androidTalkClient':
+			return mdiAndroid
+		case 'iphone':
+		case 'iosClient':
+		case 'iosTalkClient':
+			return mdiAppleIos
+		case 'ipad':
+			return mdiTablet
+		case 'davx5':
+			return mdiCellphone
+		case 'syncClient':
+			return mdiMonitor
+		case 'webPirate':
+		case 'sailfishBrowser':
+		default:
+			return mdiWeb
+	}
+})
+
+/**
+ * Label to be shown for current token
+ */
+const tokenLabel = computed(() => {
+	if (props.token.current) {
+		return t('settings', 'This session')
+	}
+	if (client.value === null) {
+		return props.token.name
+	}
+
+	const name = nameMap[client.value.id]
+	if (client.value.os) {
+		return t('settings', '{client} - {version} ({system})', { client: name, system: client.value.os, version: client.value.version })
+	} else if (client.value.version) {
+		return t('settings', '{client} - {version}', { client: name, version: client.value.version })
+	}
+	return name
+})
+
+/**
+ * If the current token is considered for remote wiping
+ */
+const wiping = computed(() => props.token.type === TokenType.WIPING_TOKEN)
+
+/**
+ * Allow or deny filesystem access for this token
+ *
+ * @param state - Whether the token may access the filesystem
+ */
+function updateFileSystemScope(state: boolean) {
+	authTokenStore.setTokenScope(props.token, 'filesystem', state)
+}
+
+/**
+ * Show the rename form for this token
+ */
+function startRename() {
+	// Close action (popover menu)
+	actionOpen.value = false
+
+	newName.value = props.token.name
+	renaming.value = true
+	nextTick(() => {
+		nameField.value!.select()
+	})
+}
+
+/**
+ * Close the rename form without saving
+ */
+function cancelRename() {
+	renaming.value = false
+	focusActions()
+}
+
+/**
+ * Move focus back to the row's actions menu
+ */
+async function focusActions() {
+	await nextTick()
+	actions.value?.$el.querySelector('button')?.focus()
+}
+
+/**
+ * Ask for confirmation before revoking the token
+ */
+function revoke() {
+	actionOpen.value = false
+	deleteDialogOpen.value = true
+}
+
+/**
+ * Revoke the token once the dialog was confirmed
+ */
+function confirmDelete() {
+	authTokenStore.deleteToken(props.token)
+}
+
+/**
+ * Save the new name and close the rename form
+ */
+async function rename() {
+	renaming.value = false
+	// The password confirmation holds focus until it closes, so refocus after it
+	await authTokenStore.renameToken(props.token, newName.value)
+	focusActions()
+}
+
+/**
+ * Ask for confirmation, then mark the device for remote wipe
+ */
+async function wipe() {
+	actionOpen.value = false
+	const confirmed = await showConfirmation({
+		name: t('settings', 'Confirm wipe'),
+		text: t('settings', 'Do you really want to wipe your data from this device?'),
+		labelConfirm: t('settings', 'Wipe device'),
+		labelReject: t('settings', 'Cancel'),
+		severity: 'warning',
+	})
+	if (confirmed) {
+		authTokenStore.wipeToken(props.token)
+	}
+}
+</script>
+
+<template>
+	<tr class="auth-token" :class="[{ 'auth-token--wiping': wiping }]" :data-id="token.id">
+		<td class="auth-token__name">
+			<NcIconSvgWrapper :path="tokenIcon" />
+			<div class="auth-token__name-wrapper">
+				<form
+					v-if="token.canRename && renaming"
+					class="auth-token__name-form"
+					@submit.prevent.stop="rename">
+					<NcTextField
+						ref="input"
+						v-model="newName"
+						:label="t('settings', 'Device name')"
+						:showTrailingButton="true"
+						:trailingButtonLabel="t('settings', 'Cancel renaming')"
+						@trailingButtonClick="cancelRename"
+						@keyup.esc="cancelRename" />
+					<NcButton :aria-label="t('settings', 'Save new name')" variant="tertiary" type="submit">
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiCheck" />
+						</template>
+					</NcButton>
+				</form>
+				<span v-else>{{ tokenLabel }}</span>
+				<span v-if="wiping" class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span>
+			</div>
+		</td>
+		<td>
+			<NcDateTime
+				class="auth-token__last-activity"
+				:ignoreSeconds="true"
+				:timestamp="tokenLastActivity" />
+		</td>
+		<td class="auth-token__actions">
+			<NcActions
+				v-if="!token.current"
+				ref="actions"
+				v-model:open="actionOpen"
+				:title="t('settings', 'Device settings')"
+				:aria-label="t('settings', 'Device settings')">
+				<!-- TODO: add text/longtext with some description -->
+				<NcActionCheckbox
+					v-if="canChangeScope"
+					:modelValue="token.scope.filesystem"
+					@update:modelValue="updateFileSystemScope">
+					{{ t('settings', 'Allow filesystem access') }}
+				</NcActionCheckbox>
+				<!-- TODO: add text/longtext with some description -->
+				<NcActionButton
+					v-if="token.canRename"
+					icon="icon-rename"
+					@click.stop.prevent="startRename">
+					{{ t('settings', 'Rename') }}
+				</NcActionButton>
+
+				<!-- revoke & wipe -->
+				<template v-if="token.canDelete">
+					<template v-if="token.type !== TokenType.WIPING_TOKEN">
+						<!-- TODO: add text/longtext with some description -->
+						<NcActionButton
+							icon="icon-delete"
+							@click.stop.prevent="revoke">
+							{{ t('settings', 'Revoke') }}
+						</NcActionButton>
+						<NcActionButton
+							icon="icon-delete"
+							@click.stop.prevent="wipe">
+							{{ t('settings', 'Wipe device') }}
+						</NcActionButton>
+					</template>
+					<NcActionButton
+						v-else
+						icon="icon-delete"
+						:name="t('settings', 'Revoke')"
+						@click.stop.prevent="revoke">
+						{{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }}
+					</NcActionButton>
+				</template>
+			</NcActions>
+		</td>
+		<AuthTokenDeleteDialog
+			v-if="deleteDialogOpen"
+			v-model:open="deleteDialogOpen"
+			:token="token"
+			@confirm="confirmDelete" />
+	</tr>
+</template>
+
+<style lang="scss" scoped>
+.auth-token {
+	border-top: 2px solid var(--color-border);
+	max-width: 200px;
+	white-space: normal;
+	vertical-align: middle;
+	position: relative;
+
+	&--wiping {
+		background-color: var(--color-background-dark);
+	}
+
+	&__name {
+		padding-block: 10px;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-width: 355px; // ensure no jumping when renaming
+	}
+
+	&__name-wrapper {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__name-form {
+		align-items: end;
+		display: flex;
+		gap: 4px;
+	}
+
+	&__actions {
+		padding: 0 10px;
+	}
+
+	&__last-activity {
+		padding-inline-start: 10px;
+	}
+
+	.wiping-warning {
+		color: var(--color-text-maxcontrast);
+	}
+}
+</style>
diff --git a/apps/settings/src/components/AuthTokenDeleteDialog.vue b/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
similarity index 97%
rename from apps/settings/src/components/AuthTokenDeleteDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
index 0085c3b223100..d4e0c8d95b1af 100644
--- a/apps/settings/src/components/AuthTokenDeleteDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
@@ -7,7 +7,7 @@
 import type { IDialogButton } from '@nextcloud/dialogs'
 import type { IToken } from '../store/authtoken.ts'
 
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/authtokens/components/AuthTokenList.vue
similarity index 68%
rename from apps/settings/src/components/AuthTokenList.vue
rename to apps/settings/src/authtokens/components/AuthTokenList.vue
index f8be3e7771959..2556053dcd291 100644
--- a/apps/settings/src/components/AuthTokenList.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenList.vue
@@ -3,6 +3,19 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+import AuthToken from './AuthToken.vue'
+import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
+
+const authTokenStore = useAuthTokenStore()
+
+const sortedTokens = computed(() => [...authTokenStore.tokens]
+	.filter((t) => t.type !== TokenType.ONETIME_TOKEN)
+	.sort((t1, t2) => t2.lastActivity - t1.lastActivity))
+</script>
+
 <template>
 	<table id="app-tokens-table" class="token-list">
 		<thead>
@@ -29,37 +42,6 @@
 	</table>
 </template>
 
-<script lang="ts">
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import AuthToken from './AuthToken.vue'
-import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
-
-export default defineComponent({
-	name: 'AuthTokenList',
-	components: {
-		AuthToken,
-	},
-
-	setup() {
-		const authTokenStore = useAuthTokenStore()
-		return { authTokenStore }
-	},
-
-	computed: {
-		sortedTokens() {
-			return [...this.authTokenStore.tokens]
-				.filter((t) => t.type !== TokenType.ONETIME_TOKEN)
-				.sort((t1, t2) => t2.lastActivity - t1.lastActivity)
-		},
-	},
-
-	methods: {
-		t,
-	},
-})
-</script>
-
 <style lang="scss" scoped>
 .token-list {
 	width: 100%;
diff --git a/apps/settings/src/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
similarity index 78%
rename from apps/settings/src/components/AuthTokenRevokeAll.spec.ts
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
index 29ca848275757..762d9ef3bb44d 100644
--- a/apps/settings/src/components/AuthTokenRevokeAll.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
@@ -7,21 +7,19 @@ import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-// AuthToken.vue, pulled in transitively, reads window.OC.theme.productName at module
-// evaluation time. vi.hoisted runs before imports, so it is set before the SFC is parsed.
-vi.hoisted(() => {
-	(window as unknown as { OC: { theme: { productName: string } } }).OC.theme = { productName: 'Nextcloud' }
-})
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
+const defaultLoadState = vi.hoisted(() => (_app: string, key: string) => (key === 'app_tokens' ? [] : true))
 vi.mock('@nextcloud/initial-state', () => ({
-	loadState: vi.fn((_app: string, key: string) => (key === 'app_tokens' ? [] : true)),
+	loadState: vi.fn(defaultLoadState),
 }))
 
+import { loadState } from '@nextcloud/initial-state'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthTokenRevokeAllDialog from './AuthTokenRevokeAllDialog.vue'
 import AuthTokenSection from './AuthTokenSection.vue'
+import AuthTokenSetup from './AuthTokenSetup.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 
 function makeToken(overrides: Partial<IToken> = {}): IToken {
@@ -45,36 +43,35 @@ const NcDialogStub = {
 }
 
 const NcButtonStub = {
+	emits: ['click'],
 	template: '<button @click="$emit(\'click\')"><slot /></button>',
 }
 
 function mountSection(tokens: IToken[]) {
 	return mount(AuthTokenSection, {
-		mocks: {
-			t: (_: string, text: string) => text,
+		global: {
+			stubs: {
+				AuthTokenList: true,
+				AuthTokenSetup: true,
+				NcSettingsSection: { template: '<div><slot /></div>' },
+				NcButton: NcButtonStub,
+				NcDialog: NcDialogStub,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens } },
+			})],
 		},
-		stubs: {
-			AuthTokenList: true,
-			AuthTokenSetup: true,
-			NcSettingsSection: { template: '<div><slot /></div>' },
-			NcButton: NcButtonStub,
-			NcDialog: NcDialogStub,
-		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens } },
-		}),
 	})
 }
 
 function mountDialog(props: { count: number, wipePendingCount: number, open?: boolean }) {
 	return mount(AuthTokenRevokeAllDialog, {
-		propsData: { open: true, ...props },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: NcDialogStub,
+		props: { open: true, ...props },
+		global: {
+			stubs: {
+				NcDialog: NcDialogStub,
+			},
 		},
 	})
 }
@@ -147,7 +144,7 @@ describe('AuthTokenSection revoke-all button', () => {
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteAllOtherTokens).toHaveBeenCalledTimes(1)
 	})
@@ -163,13 +160,30 @@ describe('AuthTokenSection revoke-all button', () => {
 
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(wrapper.findComponent(AuthTokenRevokeAllDialog).exists()).toBe(false)
 		expect(store.deleteAllOtherTokens).not.toHaveBeenCalled()
 	})
 })
 
+describe('AuthTokenSection create form', () => {
+	afterEach(() => {
+		vi.mocked(loadState).mockImplementation(defaultLoadState)
+	})
+
+	it('shows the create form when creating app passwords is allowed', () => {
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(true)
+	})
+
+	it('hides the create form when creating app passwords is disabled', () => {
+		vi.mocked(loadState).mockImplementation((app: string, key: string) => (key === 'can_create_app_token' ? false : defaultLoadState(app, key)))
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(false)
+	})
+})
+
 describe('AuthTokenRevokeAllDialog', () => {
 	it('omits the wipe note when nothing is pending a wipe', () => {
 		const wrapper = mountDialog({ count: 3, wipePendingCount: 0 })
diff --git a/apps/settings/src/components/AuthTokenRevokeAllDialog.vue b/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
similarity index 96%
rename from apps/settings/src/components/AuthTokenRevokeAllDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
index 1783facf3b363..25370ac19e86a 100644
--- a/apps/settings/src/components/AuthTokenRevokeAllDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import type { IDialogButton } from '@nextcloud/dialogs'
 
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { n, t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/authtokens/components/AuthTokenSection.vue
similarity index 70%
rename from apps/settings/src/components/AuthTokenSection.vue
rename to apps/settings/src/authtokens/components/AuthTokenSection.vue
index 5731d1cc66f8b..0cce3c505a81a 100644
--- a/apps/settings/src/components/AuthTokenSection.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSection.vue
@@ -3,6 +3,30 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import AuthTokenList from './AuthTokenList.vue'
+import AuthTokenRevokeAllDialog from './AuthTokenRevokeAllDialog.vue'
+import AuthTokenSetup from './AuthTokenSetup.vue'
+import { useAuthTokenStore } from '../store/authtoken.ts'
+
+const authTokenStore = useAuthTokenStore()
+
+const canCreateToken = loadState<boolean>('settings', 'can_create_app_token')
+const revokeAllDialogOpen = ref(false)
+
+/**
+ * Revoke every token except the current session
+ */
+function revokeAllOthers() {
+	authTokenStore.deleteAllOtherTokens()
+}
+</script>
+
 <template>
 	<NcSettingsSection
 		:name="t('settings', 'Devices & sessions', {}, undefined, { sanitize: false })"
@@ -19,56 +43,13 @@
 		</div>
 		<AuthTokenRevokeAllDialog
 			v-if="revokeAllDialogOpen"
+			v-model:open="revokeAllDialogOpen"
 			:count="authTokenStore.revocableCount"
-			:wipe-pending-count="authTokenStore.wipePendingCount"
-			:open.sync="revokeAllDialogOpen"
+			:wipePendingCount="authTokenStore.wipePendingCount"
 			@confirm="revokeAllOthers" />
 	</NcSettingsSection>
 </template>
 
-<script lang="ts">
-import { loadState } from '@nextcloud/initial-state'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import AuthTokenList from './AuthTokenList.vue'
-import AuthTokenRevokeAllDialog from './AuthTokenRevokeAllDialog.vue'
-import AuthTokenSetup from './AuthTokenSetup.vue'
-import { useAuthTokenStore } from '../store/authtoken.ts'
-
-export default defineComponent({
-	name: 'AuthTokenSection',
-	components: {
-		AuthTokenList,
-		AuthTokenRevokeAllDialog,
-		AuthTokenSetup,
-		NcButton,
-		NcSettingsSection,
-	},
-
-	setup() {
-		const authTokenStore = useAuthTokenStore()
-		return { authTokenStore }
-	},
-
-	data() {
-		return {
-			canCreateToken: loadState('settings', 'can_create_app_token'),
-			revokeAllDialogOpen: false,
-		}
-	},
-
-	methods: {
-		t,
-
-		revokeAllOthers() {
-			this.authTokenStore.deleteAllOtherTokens()
-		},
-	},
-})
-</script>
-
 <style lang="scss" scoped>
 .auth-token-section__revoke-all {
 	margin-block-start: calc(var(--default-grid-baseline) * 6);
diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
similarity index 58%
rename from apps/settings/src/components/AuthTokenSetup.vue
rename to apps/settings/src/authtokens/components/AuthTokenSetup.vue
index 3f50894697b4a..d31775fe1c570 100644
--- a/apps/settings/src/components/AuthTokenSetup.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
@@ -3,6 +3,50 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { ITokenResponse } from '../store/authtoken.ts'
+
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
+import logger from '../../logger.ts'
+import { useAuthTokenStore } from '../store/authtoken.ts'
+
+const authTokenStore = useAuthTokenStore()
+
+const deviceName = ref('')
+const loading = ref(false)
+const newToken = ref<ITokenResponse | null>(null)
+
+/**
+ * Clear the form and close the new app password dialog
+ */
+function reset() {
+	loading.value = false
+	deviceName.value = ''
+	newToken.value = null
+}
+
+/**
+ * Create an app password with the entered name
+ */
+async function submit() {
+	try {
+		loading.value = true
+		newToken.value = await authTokenStore.addToken(deviceName.value)
+	} catch (error) {
+		logger.error(error as Error)
+		showError(t('settings', 'Error while creating device token'))
+		reset()
+	} finally {
+		loading.value = false
+	}
+}
+</script>
+
 <template>
 	<form
 		id="generate-app-token-section"
@@ -27,63 +71,6 @@
 	</form>
 </template>
 
-<script lang="ts">
-import type { ITokenResponse } from '../store/authtoken.ts'
-
-import { showError } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
-import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
-import logger from '../logger.ts'
-import { useAuthTokenStore } from '../store/authtoken.ts'
-
-export default defineComponent({
-	name: 'AuthTokenSetup',
-	components: {
-		NcButton,
-		NcTextField,
-		AuthTokenSetupDialog,
-	},
-
-	setup() {
-		const authTokenStore = useAuthTokenStore()
-		return { authTokenStore }
-	},
-
-	data() {
-		return {
-			deviceName: '',
-			loading: false,
-			newToken: null as ITokenResponse | null,
-		}
-	},
-
-	methods: {
-		t,
-		reset() {
-			this.loading = false
-			this.deviceName = ''
-			this.newToken = null
-		},
-
-		async submit() {
-			try {
-				this.loading = true
-				this.newToken = await this.authTokenStore.addToken(this.deviceName)
-			} catch (error) {
-				logger.error(error as Error)
-				showError(t('settings', 'Error while creating device token'))
-				this.reset()
-			} finally {
-				this.loading = false
-			}
-		},
-	},
-})
-</script>
-
 <style lang="scss" scoped>
 	#generate-app-token-section {
 		display: flex;
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
new file mode 100644
index 0000000000000..e1a3c88daaa24
--- /dev/null
+++ b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
@@ -0,0 +1,203 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { ITokenResponse } from '../store/authtoken.ts'
+
+import QR from '@chenfengyuan/vue-qrcode'
+import { mdiCheck, mdiContentCopy } from '@mdi/js'
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { getRootUrl } from '@nextcloud/router'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+import logger from '../../logger.ts'
+
+const props = withDefaults(defineProps<{
+	/** The newly created token, `null` while the dialog is closed */
+	token?: ITokenResponse | null
+}>(), {
+	token: null,
+})
+
+const emit = defineEmits<{
+	/** The dialog was closed */
+	close: []
+}>()
+
+const passwordField = useTemplateRef('passwordField')
+
+const isNameCopied = ref(false)
+const isPasswordCopied = ref(false)
+const showQRCode = ref(false)
+
+const open = computed({
+	get() {
+		return props.token !== null
+	},
+
+	set(value: boolean) {
+		if (!value) {
+			emit('close')
+		}
+	},
+})
+
+const copyPasswordIcon = computed(() => isPasswordCopied.value ? mdiCheck : mdiContentCopy)
+
+const copyNameIcon = computed(() => isNameCopied.value ? mdiCheck : mdiContentCopy)
+
+const appPassword = computed(() => props.token?.token ?? '')
+
+const loginName = computed(() => props.token?.loginName ?? '')
+
+const qrUrl = computed(() => {
+	const server = window.location.protocol + '//' + window.location.host + getRootUrl()
+	return `nc://login/user:${loginName.value}&password:${appPassword.value}&server:${server}`
+})
+
+const copyPasswordLabel = computed(() => {
+	if (isPasswordCopied.value) {
+		return t('settings', 'App password copied!')
+	}
+	return t('settings', 'Copy app password')
+})
+
+const copyLoginNameLabel = computed(() => {
+	if (isNameCopied.value) {
+		return t('settings', 'Login name copied!')
+	}
+	return t('settings', 'Copy login name')
+})
+
+watch(() => props.token, () => {
+	// reset showing the QR code on token change
+	showQRCode.value = false
+})
+
+watch(open, () => {
+	if (open.value) {
+		nextTick(() => {
+			passwordField.value!.select()
+		})
+	}
+})
+
+/**
+ * Copy the app password to the clipboard
+ */
+async function copyPassword() {
+	try {
+		await navigator.clipboard.writeText(appPassword.value)
+		isPasswordCopied.value = true
+	} catch (e) {
+		isPasswordCopied.value = false
+		logger.error(e as Error)
+		showError(t('settings', 'Could not copy app password. Please copy it manually.'))
+	} finally {
+		setTimeout(() => {
+			isPasswordCopied.value = false
+		}, 4000)
+	}
+}
+
+/**
+ * Copy the login name to the clipboard
+ */
+async function copyLoginName() {
+	try {
+		await navigator.clipboard.writeText(loginName.value)
+		isNameCopied.value = true
+	} catch (e) {
+		isNameCopied.value = false
+		logger.error(e as Error)
+		showError(t('settings', 'Could not copy login name. Please copy it manually.'))
+	} finally {
+		setTimeout(() => {
+			isNameCopied.value = false
+		}, 4000)
+	}
+}
+</script>
+
+<template>
+	<NcDialog
+		v-model:open="open"
+		:name="t('settings', 'New app password')"
+		contentClasses="token-dialog">
+		<p>
+			{{ t('settings', 'Use the credentials below to configure your app or device. For security reasons this password will only be shown once.') }}
+		</p>
+		<div class="token-dialog__name">
+			<NcTextField :label="t('settings', 'Login')" :modelValue="loginName" readonly />
+			<NcButton
+				variant="tertiary"
+				:title="copyLoginNameLabel"
+				:aria-label="copyLoginNameLabel"
+				@click="copyLoginName">
+				<template #icon>
+					<NcIconSvgWrapper :path="copyNameIcon" />
+				</template>
+			</NcButton>
+		</div>
+		<div class="token-dialog__password">
+			<NcTextField
+				ref="passwordField"
+				:label="t('settings', 'Password')"
+				:modelValue="appPassword"
+				readonly />
+			<NcButton
+				variant="tertiary"
+				:title="copyPasswordLabel"
+				:aria-label="copyPasswordLabel"
+				@click="copyPassword">
+				<template #icon>
+					<NcIconSvgWrapper :path="copyPasswordIcon" />
+				</template>
+			</NcButton>
+		</div>
+		<div class="token-dialog__qrcode">
+			<NcButton v-if="!showQRCode" @click="showQRCode = true">
+				{{ t('settings', 'Show QR code for mobile apps') }}
+			</NcButton>
+			<QR v-else :value="qrUrl" aria-hidden="true" />
+		</div>
+	</NcDialog>
+</template>
+
+<style scoped lang="scss">
+:deep(.token-dialog) {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	padding-inline: 22px;
+	padding-block-end: 20px;
+
+	> * {
+		box-sizing: border-box;
+	}
+}
+
+.token-dialog {
+	&__name, &__password {
+		align-items: end;
+		display: flex;
+		gap: 10px;
+
+		:deep(input) {
+			font-family: monospace;
+		}
+	}
+
+	&__qrcode {
+		display: flex;
+		justify-content: center;
+	}
+}
+</style>
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/authtokens/main.ts
new file mode 100644
index 0000000000000..cba424cfff20c
--- /dev/null
+++ b/apps/settings/src/authtokens/main.ts
@@ -0,0 +1,12 @@
+/*!
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import AuthTokenSection from './components/AuthTokenSection.vue'
+
+const app = createApp(AuthTokenSection)
+app.use(createPinia())
+app.mount('#security-authtokens')
diff --git a/apps/settings/src/store/authtoken.spec.ts b/apps/settings/src/authtokens/store/authtoken.spec.ts
similarity index 96%
rename from apps/settings/src/store/authtoken.spec.ts
rename to apps/settings/src/authtokens/store/authtoken.spec.ts
index e51558dc23dda..9e4387f26397d 100644
--- a/apps/settings/src/store/authtoken.spec.ts
+++ b/apps/settings/src/authtokens/store/authtoken.spec.ts
@@ -38,7 +38,7 @@ describe('store:authtoken addToken', () => {
 		const response = await store.addToken('Laptop')
 
 		expect(response.deviceToken).toBe(deviceToken)
-		expect(store.tokens).toContain(deviceToken)
+		expect(store.tokens).toContainEqual(deviceToken)
 	})
 
 	it('lets a failed request reach the caller so it can be reported', async () => {
diff --git a/apps/settings/src/store/authtoken.ts b/apps/settings/src/authtokens/store/authtoken.ts
similarity index 98%
rename from apps/settings/src/store/authtoken.ts
rename to apps/settings/src/authtokens/store/authtoken.ts
index db6aad42b5461..131cb60afb7e1 100644
--- a/apps/settings/src/store/authtoken.ts
+++ b/apps/settings/src/authtokens/store/authtoken.ts
@@ -1,15 +1,15 @@
-import axios from '@nextcloud/axios'
 /**
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { n, t } from '@nextcloud/l10n'
 import { addPasswordConfirmationInterceptors, confirmPassword, PwdConfirmationMode } from '@nextcloud/password-confirmation'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
-import logger from '../logger.ts'
+import logger from '../../logger.ts'
 
 const BASE_URL = generateUrl('/settings/personal/authtokens')
 addPasswordConfirmationInterceptors(axios)
diff --git a/apps/settings/src/utils/userAgentDetect.ts b/apps/settings/src/authtokens/utils/userAgentDetect.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentDetect.ts
rename to apps/settings/src/authtokens/utils/userAgentDetect.ts
diff --git a/apps/settings/src/utils/userAgentMap.ts b/apps/settings/src/authtokens/utils/userAgentMap.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentMap.ts
rename to apps/settings/src/authtokens/utils/userAgentMap.ts
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/components/AuthToken.vue
deleted file mode 100644
index 716ed27edb0a4..0000000000000
--- a/apps/settings/src/components/AuthToken.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<tr class="auth-token" :class="[{ 'auth-token--wiping': wiping }]" :data-id="token.id">
-		<td class="auth-token__name">
-			<NcIconSvgWrapper :path="tokenIcon" />
-			<div class="auth-token__name-wrapper">
-				<form
-					v-if="token.canRename && renaming"
-					class="auth-token__name-form"
-					@submit.prevent.stop="rename">
-					<NcTextField
-						ref="input"
-						v-model="newName"
-						:label="t('settings', 'Device name')"
-						:show-trailing-button="true"
-						:trailing-button-label="t('settings', 'Cancel renaming')"
-						@trailing-button-click="cancelRename"
-						@keyup.esc="cancelRename" />
-					<NcButton :aria-label="t('settings', 'Save new name')" variant="tertiary" type="submit">
-						<template #icon>
-							<NcIconSvgWrapper :path="mdiCheck" />
-						</template>
-					</NcButton>
-				</form>
-				<span v-else>{{ tokenLabel }}</span>
-				<span v-if="wiping" class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span>
-			</div>
-		</td>
-		<td>
-			<NcDateTime
-				class="auth-token__last-activity"
-				:ignore-seconds="true"
-				:timestamp="tokenLastActivity" />
-		</td>
-		<td class="auth-token__actions">
-			<NcActions
-				v-if="!token.current"
-				:title="t('settings', 'Device settings')"
-				:aria-label="t('settings', 'Device settings')"
-				:open.sync="actionOpen">
-				<NcActionCheckbox
-					v-if="canChangeScope"
-					:model-value="token.scope.filesystem"
-					@update:modelValue="updateFileSystemScope">
-					<!-- TODO: add text/longtext with some description -->
-					{{ t('settings', 'Allow filesystem access') }}
-				</NcActionCheckbox>
-				<NcActionButton
-					v-if="token.canRename"
-					icon="icon-rename"
-					@click.stop.prevent="startRename">
-					<!-- TODO: add text/longtext with some description -->
-					{{ t('settings', 'Rename') }}
-				</NcActionButton>
-
-				<!-- revoke & wipe -->
-				<template v-if="token.canDelete">
-					<template v-if="token.type !== TokenType.WIPING_TOKEN">
-						<NcActionButton
-							icon="icon-delete"
-							@click.stop.prevent="revoke">
-							<!-- TODO: add text/longtext with some description -->
-							{{ t('settings', 'Revoke') }}
-						</NcActionButton>
-						<NcActionButton
-							icon="icon-delete"
-							@click.stop.prevent="wipe">
-							{{ t('settings', 'Wipe device') }}
-						</NcActionButton>
-					</template>
-					<NcActionButton
-						v-else
-						icon="icon-delete"
-						:name="t('settings', 'Revoke')"
-						@click.stop.prevent="revoke">
-						{{ t('settings', 'Revoking this token might prevent the wiping of your device if it has not started the wipe yet.') }}
-					</NcActionButton>
-				</template>
-			</NcActions>
-		</td>
-		<AuthTokenDeleteDialog
-			v-if="deleteDialogOpen"
-			:token="token"
-			:open.sync="deleteDialogOpen"
-			@confirm="confirmDelete" />
-	</tr>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue'
-import type { IToken } from '../store/authtoken.ts'
-
-import { mdiAndroid, mdiAppleIos, mdiAppleSafari, mdiCellphone, mdiCheck, mdiFirefox, mdiGoogleChrome, mdiKeyOutline, mdiMicrosoftEdge, mdiMonitor, mdiTablet, mdiWeb } from '@mdi/js'
-import { showConfirmation } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
-import NcActionButton from '@nextcloud/vue/components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
-import NcActions from '@nextcloud/vue/components/NcActions'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcDateTime from '@nextcloud/vue/components/NcDateTime'
-import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
-import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
-import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
-import { detect } from '../utils/userAgentDetect.ts'
-
-const productName = window.OC.theme.productName as string
-
-const nameMap = {
-	edge: 'Microsoft Edge',
-	firefox: 'Firefox',
-	chrome: 'Google Chrome',
-	safari: 'Safari',
-	androidChrome: t('settings', 'Google Chrome for Android'),
-	iphone: 'iPhone',
-	ipad: 'iPad',
-	iosClient: t('settings', '{productName} iOS app', { productName }),
-	androidClient: t('settings', '{productName} Android app', { productName }),
-	iosTalkClient: t('settings', '{productName} Talk for iOS', { productName }),
-	androidTalkClient: t('settings', '{productName} Talk for Android', { productName }),
-	syncClient: t('settings', 'Sync client'),
-	davx5: 'DAVx5',
-	webPirate: 'WebPirate',
-	sailfishBrowser: 'SailfishBrowser',
-	neon: 'Neon',
-}
-
-export default defineComponent({
-	name: 'AuthToken',
-	components: {
-		AuthTokenDeleteDialog,
-		NcActions,
-		NcActionButton,
-		NcActionCheckbox,
-		NcButton,
-		NcDateTime,
-		NcIconSvgWrapper,
-		NcTextField,
-	},
-
-	props: {
-		token: {
-			type: Object as PropType<IToken>,
-			required: true,
-		},
-	},
-
-	setup() {
-		const authTokenStore = useAuthTokenStore()
-		return { authTokenStore }
-	},
-
-	data() {
-		return {
-			actionOpen: false,
-			renaming: false,
-			newName: '',
-			oldName: '',
-			deleteDialogOpen: false,
-			mdiCheck,
-			TokenType,
-		}
-	},
-
-	computed: {
-		canChangeScope() {
-			return this.token.type === TokenType.PERMANENT_TOKEN
-		},
-
-		/**
-		 * Object ob the current user agent used by the token
-		 * This either returns an object containing user agent information or `null` if unknown
-		 */
-		client() {
-			// pretty format sync client user agent
-			const matches = this.token.name.match(/Mozilla\/5\.0 \((\w+)\) (?:mirall|csyncoC)\/(\d+\.\d+\.\d+)/)
-
-			if (matches) {
-				return {
-					id: 'syncClient',
-					os: matches[1],
-					version: matches[2],
-				}
-			}
-
-			return detect(this.token.name)
-		},
-
-		/**
-		 * Last activity of the token as ECMA timestamp (in ms)
-		 */
-		tokenLastActivity() {
-			return this.token.lastActivity * 1000
-		},
-
-		/**
-		 * Icon to use for the current token
-		 */
-		tokenIcon() {
-			// For custom created app tokens / app passwords
-			if (this.token.type === TokenType.PERMANENT_TOKEN) {
-				return mdiKeyOutline
-			}
-
-			switch (this.client?.id) {
-				case 'edge':
-					return mdiMicrosoftEdge
-				case 'firefox':
-					return mdiFirefox
-				case 'chrome':
-					return mdiGoogleChrome
-				case 'safari':
-					return mdiAppleSafari
-				case 'androidChrome':
-				case 'androidClient':
-				case 'androidTalkClient':
-					return mdiAndroid
-				case 'iphone':
-				case 'iosClient':
-				case 'iosTalkClient':
-					return mdiAppleIos
-				case 'ipad':
-					return mdiTablet
-				case 'davx5':
-					return mdiCellphone
-				case 'syncClient':
-					return mdiMonitor
-				case 'webPirate':
-				case 'sailfishBrowser':
-				default:
-					return mdiWeb
-			}
-		},
-
-		/**
-		 * Label to be shown for current token
-		 */
-		tokenLabel() {
-			if (this.token.current) {
-				return t('settings', 'This session')
-			}
-			if (this.client === null) {
-				return this.token.name
-			}
-
-			const name = nameMap[this.client.id]
-			if (this.client.os) {
-				return t('settings', '{client} - {version} ({system})', { client: name, system: this.client.os, version: this.client.version })
-			} else if (this.client.version) {
-				return t('settings', '{client} - {version}', { client: name, version: this.client.version })
-			}
-			return name
-		},
-
-		/**
-		 * If the current token is considered for remote wiping
-		 */
-		wiping() {
-			return this.token.type === TokenType.WIPING_TOKEN
-		},
-	},
-
-	methods: {
-		t,
-		updateFileSystemScope(state: boolean) {
-			this.authTokenStore.setTokenScope(this.token, 'filesystem', state)
-		},
-
-		startRename() {
-			// Close action (popover menu)
-			this.actionOpen = false
-
-			this.oldName = this.token.name
-			this.newName = this.token.name
-			this.renaming = true
-			this.$nextTick(() => {
-				this.$refs.input!.select()
-			})
-		},
-
-		cancelRename() {
-			this.renaming = false
-		},
-
-		revoke() {
-			this.actionOpen = false
-			this.deleteDialogOpen = true
-		},
-
-		confirmDelete() {
-			this.authTokenStore.deleteToken(this.token)
-		},
-
-		rename() {
-			this.renaming = false
-			this.authTokenStore.renameToken(this.token, this.newName)
-		},
-
-		async wipe() {
-			this.actionOpen = false
-			const confirmed = await showConfirmation({
-				name: t('settings', 'Confirm wipe'),
-				text: t('settings', 'Do you really want to wipe your data from this device?'),
-				labelConfirm: t('settings', 'Wipe device'),
-				labelReject: t('settings', 'Cancel'),
-				severity: 'warning',
-			})
-			if (confirmed) {
-				this.authTokenStore.wipeToken(this.token)
-			}
-		},
-	},
-})
-</script>
-
-<style lang="scss" scoped>
-.auth-token {
-	border-top: 2px solid var(--color-border);
-	max-width: 200px;
-	white-space: normal;
-	vertical-align: middle;
-	position: relative;
-
-	&--wiping {
-		background-color: var(--color-background-dark);
-	}
-
-	&__name {
-		padding-block: 10px;
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		min-width: 355px; // ensure no jumping when renaming
-	}
-
-	&__name-wrapper {
-		display: flex;
-		flex-direction: column;
-	}
-
-	&__name-form {
-		align-items: end;
-		display: flex;
-		gap: 4px;
-	}
-
-	&__actions {
-		padding: 0 10px;
-	}
-
-	&__last-activity {
-		padding-inline-start: 10px;
-	}
-
-	.wiping-warning {
-		color: var(--color-text-maxcontrast);
-	}
-}
-</style>
diff --git a/apps/settings/src/components/AuthTokenSetupDialog.vue b/apps/settings/src/components/AuthTokenSetupDialog.vue
deleted file mode 100644
index 0b85adb0c68dc..0000000000000
--- a/apps/settings/src/components/AuthTokenSetupDialog.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<NcDialog
-		:open.sync="open"
-		:name="t('settings', 'New app password')"
-		content-classes="token-dialog">
-		<p>
-			{{ t('settings', 'Use the credentials below to configure your app or device. For security reasons this password will only be shown once.') }}
-		</p>
-		<div class="token-dialog__name">
-			<NcTextField :label="t('settings', 'Login')" :model-value="loginName" readonly />
-			<NcButton
-				variant="tertiary"
-				:title="copyLoginNameLabel"
-				:aria-label="copyLoginNameLabel"
-				@click="copyLoginName">
-				<template #icon>
-					<NcIconSvgWrapper :path="copyNameIcon" />
-				</template>
-			</NcButton>
-		</div>
-		<div class="token-dialog__password">
-			<NcTextField
-				ref="appPassword"
-				:label="t('settings', 'Password')"
-				:model-value="appPassword"
-				readonly />
-			<NcButton
-				variant="tertiary"
-				:title="copyPasswordLabel"
-				:aria-label="copyPasswordLabel"
-				@click="copyPassword">
-				<template #icon>
-					<NcIconSvgWrapper :path="copyPasswordIcon" />
-				</template>
-			</NcButton>
-		</div>
-		<div class="token-dialog__qrcode">
-			<NcButton v-if="!showQRCode" @click="showQRCode = true">
-				{{ t('settings', 'Show QR code for mobile apps') }}
-			</NcButton>
-			<QR v-else :value="qrUrl" />
-		</div>
-	</NcDialog>
-</template>
-
-<script lang="ts">
-import type { PropType } from 'vue'
-import type { ITokenResponse } from '../store/authtoken.ts'
-
-import QR from '@chenfengyuan/vue-qrcode'
-import { mdiCheck, mdiContentCopy } from '@mdi/js'
-import { showError } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
-import { getRootUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcDialog from '@nextcloud/vue/components/NcDialog'
-import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../logger.ts'
-
-export default defineComponent({
-	name: 'AuthTokenSetupDialog',
-	components: {
-		NcButton,
-		NcDialog,
-		NcIconSvgWrapper,
-		NcTextField,
-		QR,
-	},
-
-	props: {
-		token: {
-			type: Object as PropType<ITokenResponse | null>,
-			required: false,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			isNameCopied: false,
-			isPasswordCopied: false,
-			showQRCode: false,
-		}
-	},
-
-	computed: {
-		open: {
-			get() {
-				return this.token !== null
-			},
-
-			set(value: boolean) {
-				if (!value) {
-					this.$emit('close')
-				}
-			},
-		},
-
-		copyPasswordIcon() {
-			return this.isPasswordCopied ? mdiCheck : mdiContentCopy
-		},
-
-		copyNameIcon() {
-			return this.isNameCopied ? mdiCheck : mdiContentCopy
-		},
-
-		appPassword() {
-			return this.token?.token ?? ''
-		},
-
-		loginName() {
-			return this.token?.loginName ?? ''
-		},
-
-		qrUrl() {
-			const server = window.location.protocol + '//' + window.location.host + getRootUrl()
-			return `nc://login/user:${this.loginName}&password:${this.appPassword}&server:${server}`
-		},
-
-		copyPasswordLabel() {
-			if (this.isPasswordCopied) {
-				return t('settings', 'App password copied!')
-			}
-			return t('settings', 'Copy app password')
-		},
-
-		copyLoginNameLabel() {
-			if (this.isNameCopied) {
-				return t('settings', 'Login name copied!')
-			}
-			return t('settings', 'Copy login name')
-		},
-	},
-
-	watch: {
-		token() {
-			// reset showing the QR code on token change
-			this.showQRCode = false
-		},
-
-		open() {
-			if (this.open) {
-				this.$nextTick(() => {
-					this.$refs.appPassword!.select()
-				})
-			}
-		},
-	},
-
-	methods: {
-		t,
-		async copyPassword() {
-			try {
-				await navigator.clipboard.writeText(this.appPassword)
-				this.isPasswordCopied = true
-			} catch (e) {
-				this.isPasswordCopied = false
-				logger.error(e as Error)
-				showError(t('settings', 'Could not copy app password. Please copy it manually.'))
-			} finally {
-				setTimeout(() => {
-					this.isPasswordCopied = false
-				}, 4000)
-			}
-		},
-
-		async copyLoginName() {
-			try {
-				await navigator.clipboard.writeText(this.loginName)
-				this.isNameCopied = true
-			} catch (e) {
-				this.isNameCopied = false
-				logger.error(e as Error)
-				showError(t('settings', 'Could not copy login name. Please copy it manually.'))
-			} finally {
-				setTimeout(() => {
-					this.isNameCopied = false
-				}, 4000)
-			}
-		},
-	},
-})
-</script>
-
-<style scoped lang="scss">
-:deep(.token-dialog) {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-
-	padding-inline: 22px;
-	padding-block-end: 20px;
-
-	> * {
-		box-sizing: border-box;
-	}
-}
-
-.token-dialog {
-	&__name, &__password {
-		align-items: end;
-		display: flex;
-		gap: 10px;
-
-		:deep(input) {
-			font-family: monospace;
-		}
-	}
-
-	&__qrcode {
-		display: flex;
-		justify-content: center;
-	}
-}
-</style>
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
deleted file mode 100644
index eabad1bca6041..0000000000000
--- a/apps/settings/src/main-personal-security.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import VTooltipPlugin from 'v-tooltip'
-import Vue from 'vue'
-import AuthTokenSection from './components/AuthTokenSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-const pinia = createPinia()
-
-Vue.use(PiniaVuePlugin)
-Vue.use(VTooltipPlugin, { defaultHtml: false })
-Vue.prototype.t = t
-
-const View = Vue.extend(AuthTokenSection)
-new View({ pinia }).$mount('#security-authtokens')
diff --git a/apps/settings/templates/settings/personal/security/authtokens.php b/apps/settings/templates/settings/personal/security/authtokens.php
index e59266695bf7a..8f96f647cdef0 100644
--- a/apps/settings/templates/settings/personal/security/authtokens.php
+++ b/apps/settings/templates/settings/personal/security/authtokens.php
@@ -5,8 +5,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-personal-security', 'core');
-
 ?>
 
-<div id="security-authtokens" class="section"></div>
+<div id="security-authtokens"></div>
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 6e696e29f04a7..3efd882d40510 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -61,6 +61,8 @@ export default defineConfig([
 			'**/vendor/', // different vendors
 			// the public share entry point is Vue 3, it is linted by the Vue 3 frontend
 			'**/apps/files_sharing/src/public/',
+			// the app password section is Vue 3, it is linted by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index b3ceea7928082..ed691cde3c95c 100644
--- a/build/frontend-legacy/tsconfig.json
+++ b/build/frontend-legacy/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
 	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens"],
 	"compilerOptions": {
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"types": ["node", "vue", "vue-router"],
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 5fc0a49fe6658..d2f783556b43e 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -57,7 +57,7 @@ export default defineConfig({
 		},
 		coverage: {
 			include: ['./apps/*/src/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/authtokens/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
@@ -68,6 +68,8 @@ export default defineConfig({
 		exclude: [
 			...defaultExclude,
 			...gitIgnore,
+			// the app password section is Vue 3, it is tested by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
 		server: {
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index e7395b002bcc6..bee1648064ae5 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -28,7 +28,6 @@ module.exports = {
 		'vue-settings-profile-contact': path.join(__dirname, 'apps/settings/src', 'main-profile-contact.js'),
 		'vue-settings-language-locale': path.join(__dirname, 'apps/settings/src', 'main-language-locale.js'),
 		'vue-settings-personal-password': path.join(__dirname, 'apps/settings/src', 'main-personal-password.js'),
-		'vue-settings-personal-security': path.join(__dirname, 'apps/settings/src', 'main-personal-security.js'),
 		'vue-settings-personal-webauthn': path.join(__dirname, 'apps/settings/src', 'main-personal-webauth.js'),
 		'vue-settings-users-management': path.join(__dirname, 'apps/settings/src', 'main-users-management.ts'),
 		'declarative-settings-forms': path.join(__dirname, 'apps/settings/src', 'main-declarative-settings-forms.ts'),
diff --git a/build/frontend/package.json b/build/frontend/package.json
index 00a19f5607d93..72b06ab69c612 100644
--- a/build/frontend/package.json
+++ b/build/frontend/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "NODE_ENV=development vite build --mode development",
-    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage --reporter=default",
     "test:update-snapshots": "vitest run --update",
diff --git a/build/frontend/tsconfig.json b/build/frontend/tsconfig.json
index 24655181b3dbf..66b4e722e3e2f 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core"]
+	"include": ["./apps", "./core", "../../apps/settings/src/authtokens"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index 97fb47d25caef..c3010631d59db 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -95,6 +95,12 @@ const modules = {
 		main: resolve(import.meta.dirname, 'apps/profile/src', 'main.ts'),
 		reference: resolve(import.meta.dirname, 'apps/profile/src', 'reference.js'),
 	},
+	settings: {
+		// Only the app password section is migrated to Vue 3 so far, the rest
+		// of the app is still built by the Vue 2 frontend. It is referenced by path
+		// rather than through `apps/` so it resolves the Vue 3 dependencies.
+		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', 'main.ts'),
+	},
 	sharebymail: {
 		'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
 	},
diff --git a/build/frontend/vitest.config.ts b/build/frontend/vitest.config.ts
index cb6309ba09202..9589ee89cd265 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -44,7 +44,10 @@ export default defineConfig({
 		},
 	},
 	test: {
-		include: ['{apps,core}/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+		include: [
+			'{apps,core}/**/*.{test,spec}.?(c|m)[jt]s?(x)',
+			'../../apps/settings/src/authtokens/**/*.spec.ts',
+		],
 		env: {
 			LANG: 'en_US',
 			TZ: 'UTC',
@@ -58,6 +61,7 @@ export default defineConfig({
 		coverage: {
 			include: [
 				'apps/*/src/**',
+				'../../apps/settings/src/authtokens/**',
 				'core/src/**',
 			],
 			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],
diff --git a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
index f2598c07c55b9..b307436b2c543 100644
--- a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
+++ b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import type { ITokenResponse } from '../../../../apps/settings/src/store/authtoken.ts'
+import type { ITokenResponse } from '~/apps/settings/src/authtokens/store/authtoken.ts'
 
 import { mdiQrcodeScan } from '@mdi/js'
 import { getCurrentUser } from '@nextcloud/auth'