diff --git a/console/src/components/login/SocialAuthProviderItem.vue b/console/src/components/login/SocialAuthProviderItem.vue
index a93bff310..57439ae9e 100644
--- a/console/src/components/login/SocialAuthProviderItem.vue
+++ b/console/src/components/login/SocialAuthProviderItem.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { SocialAuthProvider } from "@/modules/system/actuator/types";
-import { ref } from "vue";
+import { inject, ref } from "vue";
+import type { Ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,7 +12,13 @@ const props = withDefaults(
 
 const loading = ref(false);
 
+const disabled = inject<Ref<boolean>>("disabled");
+
 function handleSocialLogin() {
+  if (disabled) {
+    disabled.value = true;
+  }
+
   loading.value = true;
   window.location.href = props.authProvider.authenticationUrl;
 }
@@ -20,6 +27,11 @@ function handleSocialLogin() {
 <template>
   <button
     class="group inline-flex select-none flex-row items-center gap-2 rounded bg-white px-2.5 py-1.5 ring-1 ring-gray-200 transition-all hover:bg-gray-100 hover:shadow hover:ring-gray-900"
+    :class="{
+      'cursor-not-allowed opacity-80 hover:shadow-none hover:ring-gray-200':
+        disabled,
+    }"
+    :disabled="disabled"
     @click="handleSocialLogin"
   >
     <svg
diff --git a/console/src/components/login/SocialAuthProviders.vue b/console/src/components/login/SocialAuthProviders.vue
index 8cb04b35f..16a3a3f85 100644
--- a/console/src/components/login/SocialAuthProviders.vue
+++ b/console/src/components/login/SocialAuthProviders.vue
@@ -1,10 +1,14 @@
 <script lang="ts" setup>
-// auth providers
+import { ref, provide } from "vue";
+import type { Ref } from "vue";
 
+// auth providers
 import { useGlobalInfoFetch } from "@/composables/use-global-info";
 import SocialAuthProviderItem from "./SocialAuthProviderItem.vue";
 
 const { globalInfo } = useGlobalInfoFetch();
+
+provide<Ref<boolean>>("disabled", ref(false));
 </script>
 
 <template>