diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 9e97918fdf26332ebd1bec1c51647d21b9ccf054..8219ce778d9024da288123bc611ec440c5aa55ca 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -280,6 +280,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
     }
   })
 
+  store.commit('authFlow/setRouter', router)
+
   /* eslint-disable no-new */
   return new Vue({
     router,
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 1a17909911ec283b14fb8e10d0da267ea3724c98..4c66c8950b2d1e3503469bdbbe1cb68030ba3459 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -14,6 +14,8 @@ import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import UserSearch from 'components/user_search/user_search.vue'
 import Notifications from 'components/notifications/notifications.vue'
 import LoginForm from 'components/login_form/login_form.vue'
+import TOTPForm from 'components/mfa_form/totp_form.vue'
+import RecoveryForm from 'components/mfa_form/recovery_form.vue'
 import ChatPanel from 'components/chat_panel/chat_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
@@ -43,6 +45,8 @@ export default (store) => {
     { name: 'user-settings', path: '/user-settings', component: UserSettings },
     { name: 'notifications', path: '/:username/notifications', component: Notifications },
     { name: 'login', path: '/login', component: LoginForm },
+    { name: 'mfa-totp', path: '/sessions/two-factor', component: TOTPForm },
+    { name: 'mfa-recovery', path: '/sessions/two-factor/recovery', component: RecoveryForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
     { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) },
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index fbe9b437a971faa97c94ac96683de3859e13dd18..630bda2808a1727783bef6f6e007be85ff2280e1 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -13,6 +13,11 @@ export default {
     }),
     ...mapState({ instance: 'instance' })
   },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (!vm.authApp) { vm.$router.push({name: 'login'}) }
+    })
+  },
   methods: {
     ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 806746f476a2b08e0bb41723aa161b1f70229bb2..e0e2d65bd580d96dd63721b2ecd426a808006c7c 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -17,6 +17,7 @@
             <a href="#" @click.prevent="requireTOTP">
               {{$t('login.enter_two_factor_code')}}
             </a>
+            <br />
             <a href="#" @click.prevent="abortMFA">
               {{$t('general.cancel')}}
             </a>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 6c94fe52bff6632f92367b306e2e82a0fd55c867..e235eecc14b02ff843c8dd1bb37a2cf05a3f6059 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -12,6 +12,11 @@ export default {
     }),
     ...mapState({ instance: 'instance' })
   },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (!vm.authApp) { vm.$router.push({name: 'login'}) }
+    })
+  },
   methods: {
     ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index d39caa6d1a971eef152d66edfd32719e1b36da88..c547785e2ba716fe2ee0f91e81089a601fa150c0 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -21,6 +21,7 @@
             <a href="#" @click.prevent="requireRecovery">
               {{$t('login.enter_recovery_code')}}
             </a>
+            <br />
             <a href="#" @click.prevent="abortMFA">
               {{$t('general.cancel')}}
             </a>
diff --git a/src/modules/auth_flow.js b/src/modules/auth_flow.js
index 86328cf3f69716063a95ff768d98285f95bc6dde..5fb50efe53643d8ba48e587ce01f6e63f2e4564e 100644
--- a/src/modules/auth_flow.js
+++ b/src/modules/auth_flow.js
@@ -7,6 +7,7 @@ const RECOVERY_STRATEGY = 'recovery'
 
 // initial state
 const state = {
+  router: null,
   app: null,
   settings: {},
   strategy: PASSWORD_STRATEGY,
@@ -43,6 +44,9 @@ const getters = {
 
 // mutations
 const mutations = {
+  setRouter (state, router) {
+    if (router) { state.router = router }
+  },
   setInitialStrategy (state, strategy) {
     if (strategy) {
       state.initStrategy = strategy
@@ -59,15 +63,29 @@ const mutations = {
     state.settings = settings
     state.app = app
     state.strategy = TOTP_STRATEGY // default strategy of MFA
+
+    if (state.router.currentRoute.name === 'login') {
+      state.router.push({name: 'mfa-totp'})
+    }
   },
   requireRecovery (state) {
     state.strategy = RECOVERY_STRATEGY
+    if (state.router.currentRoute.name === 'mfa-totp') {
+      state.router.push({name: 'mfa-recovery'})
+    }
   },
   requireTOTP (state) {
     state.strategy = TOTP_STRATEGY
+    if (state.router.currentRoute.name === 'mfa-recovery') {
+      state.router.push({name: 'mfa-totp'})
+    }
   },
   abortMFA (state) {
     resetState(state)
+    if (state.router.currentRoute.name === 'mfa-totp' ||
+        state.router.currentRoute.name === 'mfa-recovery') {
+      state.router.push({name: 'login'})
+    }
   }
 }