diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
index 2acee862..d44a3ab7 100644
--- a/src/components/user_settings/mfa.js
+++ b/src/components/user_settings/mfa.js
@@ -7,6 +7,7 @@ import { mapState } from 'vuex'
 const Mfa = {
   data: () => ({
     settings: { // current settings of MFA
+      available: false,
       enabled: false,
       totp: false
     },
@@ -139,7 +140,9 @@ const Mfa = {
     // fetch settings from server
     async fetchSettings () {
       let result = await this.backendInteractor.fetchSettingsMFA()
+      if (result.error) return
       this.settings = result.settings
+      this.settings.available = true
       return result
     }
   },
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
index ded426dd..1f1be60d 100644
--- a/src/components/user_settings/mfa.vue
+++ b/src/components/user_settings/mfa.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="setting-item mfa-settings" v-if="readyInit">
+<div class="setting-item mfa-settings" v-if="readyInit && settings.available">
 
   <div class="mfa-heading">
     <h2>{{$t('settings.mfa.title')}}</h2>