diff --git a/app/models/AuthenticationProvider.ts b/app/models/AuthenticationProvider.ts
index e144eb94e..f292651a8 100644
--- a/app/models/AuthenticationProvider.ts
+++ b/app/models/AuthenticationProvider.ts
@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import BaseModel from "./BaseModel";
 import Field from "./decorators/Field";
 
@@ -14,6 +14,11 @@ class AuthenticationProvider extends BaseModel {
   @Field
   @observable
   isEnabled: boolean;
+
+  @computed
+  get isActive() {
+    return this.isEnabled && this.isConnected;
+  }
 }
 
 export default AuthenticationProvider;
diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx
index 840822f22..57a870ff2 100644
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -165,8 +165,13 @@ function Security() {
             })}
           >
             <Flex align="center">
-              <CheckboxIcon color={theme.primary} checked />{" "}
-              <Text type="secondary">{t("Connected")}</Text>
+              <CheckboxIcon
+                color={provider.isActive ? theme.primary : undefined}
+                checked={provider.isActive}
+              />{" "}
+              <Text type="secondary">
+                {provider.isActive ? t("Connected") : t("Disabled")}
+              </Text>
             </Flex>
           </SettingRow>
         ))}