diff --git a/packages/ui/src/containers/SocialSignIn/index.tsx b/packages/ui/src/containers/SocialSignIn/index.tsx
index 99cf10f90..9fe897c0d 100644
--- a/packages/ui/src/containers/SocialSignIn/index.tsx
+++ b/packages/ui/src/containers/SocialSignIn/index.tsx
@@ -1,16 +1,16 @@
+import type { ConnectorMetadata } from '@logto/schemas';
+
 import TermsOfUse from '@/containers/TermsOfUse';
-import useSocial from '@/hooks/use-social';
 
 import SocialSignInList from './SocialSignInList';
 import * as styles from './index.module.scss';
 
 type Props = {
   className?: string;
+  socialConnectors: ConnectorMetadata[];
 };
 
-const SocialSignIn = ({ className }: Props) => {
-  const { socialConnectors } = useSocial();
-
+const SocialSignIn = ({ className, socialConnectors }: Props) => {
   return (
     <>
       <TermsOfUse className={styles.terms} />
diff --git a/packages/ui/src/pages/Register/index.tsx b/packages/ui/src/pages/Register/index.tsx
index 799346a0b..caf54c019 100644
--- a/packages/ui/src/pages/Register/index.tsx
+++ b/packages/ui/src/pages/Register/index.tsx
@@ -24,7 +24,9 @@ const Register = () => {
       {signUpMethods.length > 0 && (
         <IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
       )}
-      {signUpMethods.length === 0 && socialConnectors.length > 0 && <SocialSignIn />}
+      {signUpMethods.length === 0 && socialConnectors.length > 0 && (
+        <SocialSignIn className={styles.main} socialConnectors={socialConnectors} />
+      )}
       {
         // SignIn footer
         signInMode === SignInMode.SignInAndRegister && signInMethods.length > 0 && (
diff --git a/packages/ui/src/pages/SignIn/Main.tsx b/packages/ui/src/pages/SignIn/Main.tsx
index 439f3e415..1fe87566d 100644
--- a/packages/ui/src/pages/SignIn/Main.tsx
+++ b/packages/ui/src/pages/SignIn/Main.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 const Main = ({ signInMethods, socialConnectors }: Props) => {
   if (signInMethods.length === 0 && socialConnectors.length > 0) {
-    return <SocialSignIn className={styles.main} />;
+    return <SocialSignIn className={styles.main} socialConnectors={socialConnectors} />;
   }
 
   const isPasswordOnly =