diff --git a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue
index 16cfd219ac2..1f4ea0de715 100644
--- a/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue
+++ b/packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue
@@ -37,36 +37,42 @@
>
-
+
-
+
@@ -82,7 +88,7 @@
import { useVModel } from '@vueuse/core';
import { reactive } from 'vue';
import { useI18n } from '~/composables/i18n';
-import { Config } from '~/composables/useConfigHandler';
+import { Config, SsoAuthProviders } from '~/composables/useConfigHandler';
import IconEye from '~icons/lucide/eye';
import IconEyeOff from '~icons/lucide/eye-off';
@@ -137,4 +143,34 @@ const providerConfigFields = reactive([
]);
const microsoftTenant = workingConfigs.value.providers.microsoft.fields.tenant;
+
+const maskState = reactive({
+ google: {
+ client_id: true,
+ client_secret: true,
+ callback_url: true,
+ scope: true,
+ },
+ github: {
+ client_id: true,
+ client_secret: true,
+ callback_url: true,
+ scope: true,
+ },
+ microsoft: {
+ client_id: true,
+ client_secret: true,
+ callback_url: true,
+ scope: true,
+ tenant: true,
+ },
+});
+
+const toggleMask = (provider: SsoAuthProviders, fieldKey: FieldKey) => {
+ maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]] =
+ !maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]];
+};
+
+const isMasked = (provider: SsoAuthProviders, fieldKey: FieldKey) =>
+ maskState[provider][fieldKey as keyof (typeof maskState)[typeof provider]];