diff --git a/src/auth.ts b/src/auth.ts
index 32c9bed66e..57cb140f5e 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -29,12 +29,9 @@ export async function login(credentials: LoginCredentials) {
 	const projectsStore = useProjectsStore();
 	const { currentProjectKey } = projectsStore.state;
 
-	const { email, password } = credentials;
-
 	await api.post(`/${currentProjectKey}/auth/authenticate`, {
+		...credentials,
 		mode: 'cookie',
-		email: email,
-		password: password,
 	});
 
 	await hydrate();
diff --git a/src/routes/login/components/login-form/login-form.vue b/src/routes/login/components/login-form/login-form.vue
index 5a193bee83..c1d184ba2a 100644
--- a/src/routes/login/components/login-form/login-form.vue
+++ b/src/routes/login/components/login-form/login-form.vue
@@ -13,6 +13,11 @@
 			v-model="password"
 			:placeholder="$t('password')"
 		/>
+
+		<transition-expand>
+			<v-input type="text" :placeholder="$t('otp')" v-if="requiresTFA" v-model="otp" />
+		</transition-expand>
+
 		<v-notice type="warning" v-if="error">
 			{{ errorFormatted }}
 		</v-notice>
@@ -46,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import router from '@/router';
 import { useProjectsStore } from '@/stores/projects';
 import { login } from '@/auth';
@@ -54,6 +59,12 @@ import { RequestError } from '@/api';
 import { translateAPIError } from '@/lang';
 import getRootPath from '@/utils/get-root-path';
 
+type Credentials = {
+	email: string;
+	password: string;
+	otp?: string;
+};
+
 export default defineComponent({
 	props: {
 		ssoError: {
@@ -68,6 +79,12 @@ export default defineComponent({
 		const email = ref<string>(null);
 		const password = ref<string>(null);
 		const error = ref<RequestError>(null);
+		const otp = ref<string>(null);
+		const requiresTFA = ref(false);
+
+		watch(email, () => {
+			if (requiresTFA.value === true) requiresTFA.value = false;
+		});
 
 		const errorFormatted = computed(() => {
 			if (error.value) {
@@ -103,6 +120,8 @@ export default defineComponent({
 			loggingIn,
 			forgotLink,
 			translateAPIError,
+			otp,
+			requiresTFA,
 		};
 
 		async function onSubmit() {
@@ -113,14 +132,24 @@ export default defineComponent({
 			try {
 				loggingIn.value = true;
 
-				await login({
+				const credentials: Credentials = {
 					email: email.value,
 					password: password.value,
-				});
+				};
+
+				if (otp.value) {
+					credentials.otp = otp.value;
+				}
+
+				await login(credentials);
 
 				router.push(`/${currentProjectKey}/collections/`);
 			} catch (err) {
-				error.value = err;
+				if (err.response?.data?.error?.code === 111) {
+					requiresTFA.value = true;
+				} else {
+					error.value = err;
+				}
 			} finally {
 				loggingIn.value = false;
 			}