diff --git a/api/src/controllers/users.ts b/api/src/controllers/users.ts
index b9c91d2673..2f6f7436cf 100644
--- a/api/src/controllers/users.ts
+++ b/api/src/controllers/users.ts
@@ -4,9 +4,10 @@ import { InvalidCredentialsException, ForbiddenException, InvalidPayloadExceptio
 import { respond } from '../middleware/respond';
 import useCollection from '../middleware/use-collection';
 import { validateBatch } from '../middleware/validate-batch';
-import { AuthenticationService, MetaService, UsersService, TFAService } from '../services';
+import { AuthenticationService, MetaService, UsersService, RolesService, TFAService } from '../services';
 import { PrimaryKey } from '../types';
 import asyncHandler from '../utils/async-handler';
+import { Role } from '@directus/shared/types';
 
 const router = express.Router();
 
@@ -354,6 +355,37 @@ router.post(
 			throw new InvalidPayloadException(`"otp" is required`);
 		}
 
+		// Override permissions only when enforce TFA is enabled in role
+		if (req.accountability.role) {
+			const rolesService = new RolesService({
+				schema: req.schema,
+			});
+			const role = (await rolesService.readOne(req.accountability.role)) as Role;
+
+			if (role && role.enforce_tfa) {
+				const existingPermission = await req.accountability.permissions?.find(
+					(p) => p.collection === 'directus_users' && p.action === 'update'
+				);
+
+				if (existingPermission) {
+					existingPermission.fields = ['tfa_secret'];
+					existingPermission.permissions = { id: { _eq: req.accountability.user } };
+					existingPermission.presets = null;
+					existingPermission.validation = null;
+				} else {
+					(req.accountability.permissions || (req.accountability.permissions = [])).push({
+						action: 'update',
+						collection: 'directus_users',
+						fields: ['tfa_secret'],
+						permissions: { id: { _eq: req.accountability.user } },
+						presets: null,
+						role: req.accountability.role,
+						validation: null,
+					});
+				}
+			}
+		}
+
 		const service = new TFAService({
 			accountability: req.accountability,
 			schema: req.schema,
@@ -377,6 +409,37 @@ router.post(
 			throw new InvalidPayloadException(`"otp" is required`);
 		}
 
+		// Override permissions only when enforce TFA is enabled in role
+		if (req.accountability.role) {
+			const rolesService = new RolesService({
+				schema: req.schema,
+			});
+			const role = (await rolesService.readOne(req.accountability.role)) as Role;
+
+			if (role && role.enforce_tfa) {
+				const existingPermission = await req.accountability.permissions?.find(
+					(p) => p.collection === 'directus_users' && p.action === 'update'
+				);
+
+				if (existingPermission) {
+					existingPermission.fields = ['tfa_secret'];
+					existingPermission.permissions = { id: { _eq: req.accountability.user } };
+					existingPermission.presets = null;
+					existingPermission.validation = null;
+				} else {
+					(req.accountability.permissions || (req.accountability.permissions = [])).push({
+						action: 'update',
+						collection: 'directus_users',
+						fields: ['tfa_secret'],
+						permissions: { id: { _eq: req.accountability.user } },
+						presets: null,
+						role: req.accountability.role,
+						validation: null,
+					});
+				}
+			}
+		}
+
 		const service = new TFAService({
 			accountability: req.accountability,
 			schema: req.schema,
@@ -394,4 +457,26 @@ router.post(
 	respond
 );
 
+router.post(
+	'/:pk/tfa/disable',
+	asyncHandler(async (req, _res, next) => {
+		if (!req.accountability?.user) {
+			throw new InvalidCredentialsException();
+		}
+
+		if (!req.accountability.admin || !req.params.pk) {
+			throw new ForbiddenException();
+		}
+
+		const service = new TFAService({
+			accountability: req.accountability,
+			schema: req.schema,
+		});
+
+		await service.disableTFA(req.params.pk);
+		return next();
+	}),
+	respond
+);
+
 export default router;
diff --git a/app/src/app.vue b/app/src/app.vue
index 07d67e4c86..b20d92cad5 100644
--- a/app/src/app.vue
+++ b/app/src/app.vue
@@ -22,12 +22,13 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, toRefs, watch, computed, onMounted, onUnmounted } from 'vue';
+import { defineComponent, toRefs, watch, computed, onMounted, onUnmounted, StyleValue } from 'vue';
 import { useAppStore, useUserStore, useServerStore } from '@/stores';
 import { startIdleTracking, stopIdleTracking } from './idle';
 import useSystem from '@/composables/use-system';
 
 import setFavicon from '@/utils/set-favicon';
+import { User } from '@directus/shared/types';
 
 export default defineComponent({
 	setup() {
@@ -42,7 +43,7 @@ export default defineComponent({
 		const brandStyle = computed(() => {
 			return {
 				'--brand': serverStore.info?.project?.project_color || 'var(--primary)',
-			};
+			} as StyleValue;
 		});
 
 		onMounted(() => startIdleTracking());
@@ -58,17 +59,17 @@ export default defineComponent({
 		);
 
 		watch(
-			() => userStore.currentUser,
-			(newUser) => {
+			() => (userStore.currentUser as User)?.theme,
+			(theme) => {
 				document.body.classList.remove('dark');
 				document.body.classList.remove('light');
 				document.body.classList.remove('auto');
 
-				if (newUser !== undefined && newUser !== null && newUser.theme) {
-					document.body.classList.add(newUser.theme);
+				if (theme) {
+					document.body.classList.add(theme);
 					document
 						.querySelector('head meta[name="theme-color"]')
-						?.setAttribute('content', newUser.theme === 'light' ? '#ffffff' : '#263238');
+						?.setAttribute('content', theme === 'light' ? '#ffffff' : '#263238');
 				} else {
 					// Default to auto mode
 					document.body.classList.add('auto');
diff --git a/app/src/composables/use-tfa-setup.ts b/app/src/composables/use-tfa-setup.ts
new file mode 100644
index 0000000000..89a3ebd844
--- /dev/null
+++ b/app/src/composables/use-tfa-setup.ts
@@ -0,0 +1,117 @@
+import api from '@/api';
+import { nanoid } from 'nanoid';
+import { onMounted, ref } from 'vue';
+import qrcode from 'qrcode';
+import { useUserStore } from '@/stores';
+
+export function useTFASetup(initialEnabled: boolean) {
+	const loading = ref(false);
+	const password = ref('');
+	const tfaEnabled = ref(initialEnabled);
+	const tfaGenerated = ref(false);
+	const secret = ref<string>();
+	const otp = ref('');
+	const error = ref<any>();
+	const canvasID = nanoid();
+
+	const userStore = useUserStore();
+
+	onMounted(() => {
+		password.value = '';
+	});
+
+	return {
+		generateTFA,
+		enableTFA,
+		disableTFA,
+		adminDisableTFA,
+		loading,
+		password,
+		tfaEnabled,
+		tfaGenerated,
+		secret,
+		otp,
+		error,
+		canvasID,
+	};
+
+	async function generateTFA() {
+		if (loading.value === true) return;
+
+		loading.value = true;
+
+		try {
+			const response = await api.post('/users/me/tfa/generate', { password: password.value });
+			const url = response.data.data.otpauth_url;
+			secret.value = response.data.data.secret;
+			await qrcode.toCanvas(document.getElementById(canvasID), url);
+			tfaGenerated.value = true;
+			error.value = null;
+		} catch (err: any) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function enableTFA() {
+		if (loading.value === true) return;
+
+		loading.value = true;
+
+		let success = false;
+		try {
+			await api.post('/users/me/tfa/enable', { otp: otp.value, secret: secret.value });
+			success = true;
+			tfaEnabled.value = true;
+			tfaGenerated.value = false;
+			password.value = '';
+			otp.value = '';
+			secret.value = '';
+			error.value = null;
+			await userStore.hydrate();
+		} catch (err: any) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+		return success;
+	}
+
+	async function disableTFA() {
+		loading.value = true;
+		let success = false;
+
+		try {
+			await api.post('/users/me/tfa/disable', { otp: otp.value });
+			success = true;
+			await userStore.hydrate();
+			tfaEnabled.value = false;
+			otp.value = '';
+			error.value = null;
+		} catch (err: any) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+		return success;
+	}
+
+	async function adminDisableTFA(pk: string) {
+		loading.value = true;
+		let success = false;
+
+		try {
+			await api.post(`/users/${pk}/tfa/disable`);
+			success = true;
+			tfaEnabled.value = false;
+			otp.value = '';
+			error.value = null;
+		} catch (err: any) {
+			error.value = err;
+		} finally {
+			loading.value = false;
+		}
+		return success;
+	}
+}
diff --git a/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue b/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
index 46c4f71db1..95fb39c1bb 100644
--- a/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
+++ b/app/src/interfaces/_system/system-mfa-setup/system-mfa-setup.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-checkbox block :model-value="tfaEnabled" :disabled="!isCurrentUser" @click="toggle">
+		<v-checkbox block :model-value="tfaEnabled" :disabled="!isCurrentUser && !tfaEnabled" @click="toggle">
 			{{ tfaEnabled ? t('enabled') : t('disabled') }}
 			<div class="spacer" />
 			<template #append>
@@ -15,7 +15,7 @@
 						{{ t('enter_password_to_enable_tfa') }}
 					</v-card-title>
 					<v-card-text>
-						<v-input v-model="password" :nullable="false" type="password" :placeholder="t('password')" />
+						<v-input v-model="password" :nullable="false" type="password" :placeholder="t('password')" autofocus />
 
 						<v-error v-if="error" :error="error" />
 					</v-card-text>
@@ -28,37 +28,53 @@
 				<v-progress-circular v-else-if="loading === true" class="loader" indeterminate />
 
 				<div v-show="tfaEnabled === false && tfaGenerated === true && loading === false">
-					<form @submit.prevent="enableTFA">
+					<form @submit.prevent="enable">
 						<v-card-title>
 							{{ t('tfa_scan_code') }}
 						</v-card-title>
 						<v-card-text>
 							<canvas :id="canvasID" class="qr" />
 							<output class="secret selectable">{{ secret }}</output>
-							<v-input v-model="otp" type="text" :placeholder="t('otp')" :nullable="false" />
+							<v-input ref="inputOTP" v-model="otp" type="text" :placeholder="t('otp')" :nullable="false" />
 							<v-error v-if="error" :error="error" />
 						</v-card-text>
 						<v-card-actions>
 							<v-button type="button" secondary @click="cancelAndClose">{{ t('cancel') }}</v-button>
-							<v-button type="submit" :disabled="otp.length !== 6" @click="enableTFA">{{ t('done') }}</v-button>
+							<v-button type="submit" :disabled="otp.length !== 6" @click="enable">{{ t('done') }}</v-button>
 						</v-card-actions>
 					</form>
 				</div>
 			</v-card>
 		</v-dialog>
 
-		<v-dialog v-model="disableActive" @esc="disableActive = false">
+		<v-dialog v-model="disableActive" persistent @esc="cancelAndClose">
 			<v-card>
-				<form @submit.prevent="disableTFA">
+				<form v-if="isCurrentUser" @submit.prevent="disable">
 					<v-card-title>
 						{{ t('enter_otp_to_disable_tfa') }}
 					</v-card-title>
 					<v-card-text>
-						<v-input v-model="otp" type="text" :placeholder="t('otp')" :nullable="false" />
+						<v-input v-model="otp" type="text" :placeholder="t('otp')" :nullable="false" autofocus />
 						<v-error v-if="error" :error="error" />
 					</v-card-text>
 					<v-card-actions>
-						<v-button type="submit" kind="warning" :loading="loading" :disabled="otp.length !== 6">
+						<v-button type="button" secondary @click="cancelAndClose">{{ t('cancel') }}</v-button>
+						<v-button type="submit" kind="danger" :loading="loading" :disabled="otp.length !== 6">
+							{{ t('disable_tfa') }}
+						</v-button>
+					</v-card-actions>
+				</form>
+				<form v-else @submit.prevent="disable">
+					<v-card-title>
+						{{ t('disable_tfa') }}
+					</v-card-title>
+					<v-card-text>
+						{{ t('admin_disable_tfa_text') }}
+						<v-error v-if="error" :error="error" />
+					</v-card-text>
+					<v-card-actions>
+						<v-button type="button" secondary @click="cancelAndClose">{{ t('cancel') }}</v-button>
+						<v-button type="submit" kind="danger" :loading="loading">
 							{{ t('disable_tfa') }}
 						</v-button>
 					</v-card-actions>
@@ -70,11 +86,10 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, ref, watch, onMounted, computed } from 'vue';
-import api from '@/api';
-import qrcode from 'qrcode';
-import { nanoid } from 'nanoid';
+import { defineComponent, ref, watch, computed, nextTick } from 'vue';
 import { useUserStore } from '@/stores';
+import { useTFASetup } from '@/composables/use-tfa-setup';
+import { User } from '@directus/shared/types';
 
 export default defineComponent({
 	props: {
@@ -91,20 +106,27 @@ export default defineComponent({
 		const { t } = useI18n();
 
 		const userStore = useUserStore();
-		const tfaEnabled = ref(!!props.value);
-		const tfaGenerated = ref(false);
 		const enableActive = ref(false);
 		const disableActive = ref(false);
-		const loading = ref(false);
-		const canvasID = nanoid();
-		const secret = ref<string>();
-		const otp = ref('');
-		const error = ref<any>();
-		const password = ref('');
 
-		onMounted(() => {
-			password.value = '';
-		});
+		const inputOTP = ref<any>(null);
+
+		const isCurrentUser = computed(() => (userStore.currentUser as User)?.id === props.primaryKey);
+
+		const {
+			generateTFA,
+			enableTFA,
+			disableTFA,
+			adminDisableTFA,
+			loading,
+			password,
+			tfaEnabled,
+			tfaGenerated,
+			secret,
+			otp,
+			error,
+			canvasID,
+		} = useTFASetup(!!props.value);
 
 		watch(
 			() => props.value,
@@ -113,7 +135,16 @@ export default defineComponent({
 			},
 			{ immediate: true }
 		);
-		const isCurrentUser = computed(() => userStore.currentUser?.id === props.primaryKey);
+
+		watch(
+			() => tfaGenerated.value,
+			async (generated) => {
+				if (generated) {
+					await nextTick();
+					(inputOTP.value.$el as HTMLElement).querySelector('input')!.focus();
+				}
+			}
+		);
 
 		return {
 			t,
@@ -121,7 +152,7 @@ export default defineComponent({
 			tfaGenerated,
 			generateTFA,
 			cancelAndClose,
-			enableTFA,
+			enable,
 			toggle,
 			password,
 			enableActive,
@@ -129,12 +160,27 @@ export default defineComponent({
 			loading,
 			canvasID,
 			secret,
-			disableTFA,
+			disable,
 			otp,
 			error,
 			isCurrentUser,
+			inputOTP,
 		};
 
+		async function enable() {
+			const success = await enableTFA();
+			enableActive.value = !success;
+
+			if (!success) {
+				(inputOTP.value.$el as HTMLElement).querySelector('input')!.focus();
+			}
+		}
+
+		async function disable() {
+			const success = await (isCurrentUser.value ? disableTFA() : adminDisableTFA(props.primaryKey));
+			disableActive.value = !success;
+		}
+
 		function toggle() {
 			if (tfaEnabled.value === false) {
 				enableActive.value = true;
@@ -143,68 +189,14 @@ export default defineComponent({
 			}
 		}
 
-		async function generateTFA() {
-			if (loading.value === true) return;
-
-			loading.value = true;
-
-			try {
-				const response = await api.post('/users/me/tfa/generate', { password: password.value });
-				const url = response.data.data.otpauth_url;
-				secret.value = response.data.data.secret;
-				await qrcode.toCanvas(document.getElementById(canvasID), url);
-				tfaGenerated.value = true;
-				error.value = null;
-			} catch (err: any) {
-				error.value = err;
-			} finally {
-				loading.value = false;
-			}
-		}
-
 		function cancelAndClose() {
 			tfaGenerated.value = false;
 			enableActive.value = false;
+			disableActive.value = false;
 			password.value = '';
 			otp.value = '';
 			secret.value = '';
-		}
-
-		async function enableTFA() {
-			if (loading.value === true) return;
-
-			loading.value = true;
-
-			try {
-				await api.post('/users/me/tfa/enable', { otp: otp.value, secret: secret.value });
-				tfaEnabled.value = true;
-				tfaGenerated.value = false;
-				enableActive.value = false;
-				password.value = '';
-				otp.value = '';
-				secret.value = '';
-				error.value = null;
-			} catch (err: any) {
-				error.value = err;
-			} finally {
-				loading.value = false;
-			}
-		}
-
-		async function disableTFA() {
-			loading.value = true;
-
-			try {
-				await api.post('/users/me/tfa/disable', { otp: otp.value });
-
-				tfaEnabled.value = false;
-				disableActive.value = false;
-				otp.value = '';
-			} catch (err: any) {
-				error.value = err;
-			} finally {
-				loading.value = false;
-			}
+			error.value = null;
 		}
 	},
 });
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index ea62a4a87c..46a1331aeb 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -570,9 +570,11 @@ bookmark_doesnt_exist_cta: Return to collection
 select_an_item: Select an item...
 edit: Edit
 enabled: Enabled
+tfa_setup: Setup 2FA
 disable_tfa: Disable 2FA
 tfa_scan_code: Scan the code in your authenticator app to finish setting up 2FA
 enter_otp_to_disable_tfa: Enter the OTP to disable 2FA
+admin_disable_tfa_text: The user will have to re-enable 2FA after it is disabled.
 create_account: Create Account
 account_created_successfully: Account Created Successfully
 auto_fill: Auto Fill
diff --git a/app/src/modules/settings/routes/roles/app-permissions.ts b/app/src/modules/settings/routes/roles/app-permissions.ts
index a68bcafc3f..38c5c9fe9e 100644
--- a/app/src/modules/settings/routes/roles/app-permissions.ts
+++ b/app/src/modules/settings/routes/roles/app-permissions.ts
@@ -121,6 +121,7 @@ export const appRecommendedPermissions: Partial<Permission>[] = [
 			'avatar',
 			'language',
 			'theme',
+			'tfa_secret',
 		],
 	},
 	{
diff --git a/app/src/router.ts b/app/src/router.ts
index 7221842d48..a5476514e4 100644
--- a/app/src/router.ts
+++ b/app/src/router.ts
@@ -1,5 +1,6 @@
 import { refresh } from '@/auth';
 import { hydrate } from '@/hydrate';
+import TFASetup from '@/routes/tfa-setup';
 import AcceptInviteRoute from '@/routes/accept-invite';
 import LoginRoute from '@/routes/login';
 import LogoutRoute from '@/routes/logout';
@@ -43,6 +44,14 @@ export const defaultRoutes: RouteRecordRaw[] = [
 			public: true,
 		},
 	},
+	{
+		name: 'tfa-setup',
+		path: '/tfa-setup',
+		component: TFASetup,
+		meta: {
+			track: false,
+		},
+	},
 	{
 		name: 'logout',
 		path: '/logout',
@@ -76,6 +85,7 @@ let firstLoad = true;
 export const onBeforeEach: NavigationGuard = async (to) => {
 	const appStore = useAppStore();
 	const serverStore = useServerStore();
+	const userStore = useUserStore();
 
 	// First load
 	if (firstLoad) {
@@ -92,16 +102,40 @@ export const onBeforeEach: NavigationGuard = async (to) => {
 		await serverStore.hydrate();
 	}
 
-	if (to.meta?.public !== true && appStore.hydrated === false) {
-		appStore.hydrating = false;
-		if (appStore.authenticated === true && appStore.hydrating === false) {
-			await hydrate();
-			return to.fullPath;
-		} else {
-			if (to.fullPath) {
-				return '/login?redirect=' + encodeURIComponent(to.fullPath);
+	if (to.meta?.public !== true) {
+		if (appStore.hydrated === false) {
+			appStore.hydrating = false;
+			if (appStore.authenticated === true) {
+				await hydrate();
+				if (
+					userStore.currentUser &&
+					to.fullPath === '/tfa-setup' &&
+					!('share' in userStore.currentUser) &&
+					userStore.currentUser.tfa_secret !== null
+				) {
+					return userStore.currentUser.last_page || '/login';
+				}
+				return to.fullPath;
 			} else {
-				return '/login';
+				if (to.fullPath) {
+					return '/login?redirect=' + encodeURIComponent(to.fullPath);
+				} else {
+					return '/login';
+				}
+			}
+		}
+
+		if (userStore.currentUser && !('share' in userStore.currentUser) && userStore.currentUser.role) {
+			if (to.path !== '/tfa-setup') {
+				if (userStore.currentUser.role.enforce_tfa && userStore.currentUser.tfa_secret === null) {
+					if (userStore.currentUser.last_page === to.fullPath) {
+						return '/tfa-setup';
+					} else {
+						return '/tfa-setup?redirect=' + encodeURIComponent(to.fullPath);
+					}
+				}
+			} else if (userStore.currentUser.tfa_secret !== null) {
+				return userStore.currentUser.last_page || '/login';
 			}
 		}
 	}
@@ -112,7 +146,7 @@ let trackTimeout: number | null = null;
 export const onAfterEach: NavigationHookAfter = (to) => {
 	const userStore = useUserStore();
 
-	if (to.meta.public !== true) {
+	if (to.meta.public !== true && to.meta.track !== false) {
 		// The timeout gives the page some breathing room to load. No need to clog up the thread with
 		// this call while more important things are loading
 
diff --git a/app/src/routes/tfa-setup/index.ts b/app/src/routes/tfa-setup/index.ts
new file mode 100644
index 0000000000..bd6c589ea0
--- /dev/null
+++ b/app/src/routes/tfa-setup/index.ts
@@ -0,0 +1,4 @@
+import TFASetup from './tfa-setup.vue';
+
+export { TFASetup };
+export default TFASetup;
diff --git a/app/src/routes/tfa-setup/tfa-setup.vue b/app/src/routes/tfa-setup/tfa-setup.vue
new file mode 100644
index 0000000000..f2a4fe270a
--- /dev/null
+++ b/app/src/routes/tfa-setup/tfa-setup.vue
@@ -0,0 +1,136 @@
+<template>
+	<public-view>
+		<div class="header">
+			<h1 class="type-title">{{ t('tfa_setup') }}</h1>
+		</div>
+
+		<form v-if="tfaEnabled === false && tfaGenerated === false && loading === false" @submit.prevent="generateTFA">
+			<div class="title">
+				{{ t('enter_password_to_enable_tfa') }}
+			</div>
+			<div>
+				<v-input v-model="password" :nullable="false" type="password" :placeholder="t('password')" autofocus />
+
+				<v-error v-if="error" :error="error" />
+			</div>
+			<v-button type="submit" :loading="loading">{{ t('next') }}</v-button>
+		</form>
+
+		<v-progress-circular v-else-if="loading === true" class="loader" indeterminate />
+
+		<div v-show="tfaEnabled === false && tfaGenerated === true && loading === false">
+			<form @submit.prevent="enable">
+				<div class="title">
+					{{ t('tfa_scan_code') }}
+				</div>
+				<div>
+					<canvas :id="canvasID" class="qr" />
+					<output class="secret selectable">{{ secret }}</output>
+					<v-input ref="inputOTP" v-model="otp" type="text" :placeholder="t('otp')" :nullable="false" />
+					<v-error v-if="error" :error="error" />
+				</div>
+				<v-button type="submit" :disabled="otp.length !== 6" @click="enable">{{ t('done') }}</v-button>
+			</form>
+		</div>
+
+		<template #notice>
+			<v-icon name="lock_outlined" left />
+			{{ t('not_authenticated') }}
+		</template>
+	</public-view>
+</template>
+
+<script lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { useTFASetup } from '@/composables/use-tfa-setup';
+import { useAppStore, useUserStore } from '@/stores';
+import { router } from '@/router';
+import { User } from '@directus/shared/types';
+
+export default defineComponent({
+	setup() {
+		const { t } = useI18n();
+		const appStore = useAppStore();
+		const userStore = useUserStore();
+
+		const inputOTP = ref<any>(null);
+
+		onMounted(() => {
+			if (appStore.authenticated === false) {
+				router.push('/login');
+			}
+		});
+
+		const { generateTFA, enableTFA, loading, password, tfaEnabled, tfaGenerated, secret, otp, error, canvasID } =
+			useTFASetup(false);
+
+		watch(
+			() => tfaGenerated.value,
+			async (generated) => {
+				if (generated) {
+					await nextTick();
+					(inputOTP.value.$el as HTMLElement).querySelector('input')!.focus();
+				}
+			}
+		);
+
+		return {
+			t,
+			generateTFA,
+			enableTFA,
+			loading,
+			password,
+			tfaEnabled,
+			tfaGenerated,
+			secret,
+			otp,
+			error,
+			canvasID,
+			enable,
+			inputOTP,
+		};
+
+		async function enable() {
+			await enableTFA();
+			if (error.value === null) {
+				const redirectQuery = router.currentRoute.value.query.redirect as string;
+				router.push(redirectQuery || (userStore.currentUser as User)?.last_page || '/login');
+			} else {
+				(inputOTP.value.$el as HTMLElement).querySelector('input')!.focus();
+			}
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+h1 {
+	margin-bottom: 20px;
+}
+
+.v-input,
+.v-notice,
+.v-error {
+	margin-bottom: 20px;
+}
+
+.title {
+	margin-bottom: 10px;
+	font-weight: 600;
+}
+
+.qr {
+	display: block;
+	margin: 0 auto;
+}
+
+.secret {
+	display: block;
+	margin: 0 auto 16px;
+	color: var(--foreground-subdued);
+	font-family: var(--family-monospace);
+	letter-spacing: 2.6px;
+	text-align: center;
+}
+</style>
diff --git a/app/src/stores/user.ts b/app/src/stores/user.ts
index 2c3c11cbe1..55beec8535 100644
--- a/app/src/stores/user.ts
+++ b/app/src/stores/user.ts
@@ -42,10 +42,12 @@ export const useUserStore = defineStore({
 					'email',
 					'last_page',
 					'theme',
+					'tfa_secret',
 					'avatar.id',
 					'role.admin_access',
 					'role.app_access',
 					'role.id',
+					'role.enforce_tfa',
 				];
 
 				const { data } = await api.get(`/users/me`, { params: { fields } });
diff --git a/packages/shared/src/types/users.ts b/packages/shared/src/types/users.ts
index be9711413d..ba14b8355d 100644
--- a/packages/shared/src/types/users.ts
+++ b/packages/shared/src/types/users.ts
@@ -3,7 +3,7 @@ export type Role = {
 	name: string;
 	description: string;
 	icon: string;
-	enforce_2fa: null | boolean;
+	enforce_tfa: null | boolean;
 	external_id: null | string;
 	ip_whitelist: string[];
 	app_access: boolean;
@@ -27,7 +27,7 @@ export type User = {
 	last_login: string;
 	last_page: string;
 	external_id: string;
-	'2fa_secret': string;
+	tfa_secret: string;
 	theme: 'auto' | 'dark' | 'light';
 	role: Role;
 	password_reset_token: string | null;
diff --git a/packages/specs/src/paths/roles/role.yaml b/packages/specs/src/paths/roles/role.yaml
index ae4a3377db..a43b87e06b 100644
--- a/packages/specs/src/paths/roles/role.yaml
+++ b/packages/specs/src/paths/roles/role.yaml
@@ -37,7 +37,7 @@ patch:
             description:
               description: Description of the role.
               type: string
-            enforce_2fa:
+            enforce_tfa:
               description: Whether or not this role enforces the use of 2FA.
               type: boolean
             external_id:
diff --git a/packages/specs/src/paths/roles/roles.yaml b/packages/specs/src/paths/roles/roles.yaml
index bd69e4e6c2..4288bafb05 100644
--- a/packages/specs/src/paths/roles/roles.yaml
+++ b/packages/specs/src/paths/roles/roles.yaml
@@ -48,7 +48,7 @@ post:
             description:
               description: Description of the role.
               type: string
-            enforce_2fa:
+            enforce_tfa:
               description: Whether or not this role enforces the use of 2FA.
               type: boolean
             external_id: