diff --git a/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx b/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx
index 5011367c1..b5ca3c05c 100644
--- a/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx
+++ b/packages/ui/src/containers/SocialSignIn/SocialSignInList/index.tsx
@@ -2,6 +2,7 @@ import type { ConnectorMetadata } from '@logto/schemas';
 import classNames from 'classnames';
 
 import SocialLinkButton from '@/components/Button/SocialLinkButton';
+import useNativeMessageListener from '@/hooks/use-native-message-listener';
 import useSocial from '@/hooks/use-social';
 import { getLogoUrl } from '@/utils/logo';
 
@@ -14,6 +15,7 @@ type Props = {
 
 const SocialSignInList = ({ className, socialConnectors = [] }: Props) => {
   const { invokeSocialSignIn, theme } = useSocial();
+  useNativeMessageListener();
 
   return (
     <div className={classNames(styles.socialLinkList, className)}>
diff --git a/packages/ui/src/containers/SocialSignIn/index.tsx b/packages/ui/src/containers/SocialSignIn/index.tsx
index 1f2b01ffc..99cf10f90 100644
--- a/packages/ui/src/containers/SocialSignIn/index.tsx
+++ b/packages/ui/src/containers/SocialSignIn/index.tsx
@@ -1,5 +1,4 @@
 import TermsOfUse from '@/containers/TermsOfUse';
-import useNativeMessageListener from '@/hooks/use-native-message-listener';
 import useSocial from '@/hooks/use-social';
 
 import SocialSignInList from './SocialSignInList';
@@ -11,7 +10,6 @@ type Props = {
 
 const SocialSignIn = ({ className }: Props) => {
   const { socialConnectors } = useSocial();
-  useNativeMessageListener();
 
   return (
     <>