From e82ea0a815438ed28c822fad3512280b7846d797 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Wed, 22 Nov 2023 10:40:54 +0800
Subject: [PATCH] feat(experience): add native listener to SSO callback page
 (#4930)

* feat(experience): add native listener to SSO callback page

add native listenter to SSO callback page

* fix(experience): add useEffect hook dependency

add useEffect hook dependency
---
 .../src/hooks/use-native-message-listener.ts      | 15 ++++++++++++---
 .../pages/SocialSignInCallback/SingleSignOn.tsx   | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/experience/src/hooks/use-native-message-listener.ts b/packages/experience/src/hooks/use-native-message-listener.ts
index 5ee897b58..d913dafe5 100644
--- a/packages/experience/src/hooks/use-native-message-listener.ts
+++ b/packages/experience/src/hooks/use-native-message-listener.ts
@@ -4,12 +4,21 @@ import { isNativeWebview } from '@/utils/native-sdk';
 
 import useToast from './use-toast';
 
-const useNativeMessageListener = () => {
+/**
+ * UseNativeMessageListener
+ *
+ * Used to monitor native error message.
+ * If native error message is sent, it will be displayed as toast.
+ * Add a bypass parameter to bypass the native error message listener.
+ *
+ * @param {boolean} bypass (default: false)
+ */
+const useNativeMessageListener = (bypass = false) => {
   const { setToast } = useToast();
 
   // Monitor Native Error Message
   useEffect(() => {
-    if (!isNativeWebview()) {
+    if (!isNativeWebview() || bypass) {
       return;
     }
 
@@ -26,7 +35,7 @@ const useNativeMessageListener = () => {
     return () => {
       window.removeEventListener('message', nativeMessageHandler);
     };
-  }, [setToast]);
+  }, [bypass, setToast]);
 };
 
 export default useNativeMessageListener;
diff --git a/packages/experience/src/pages/SocialSignInCallback/SingleSignOn.tsx b/packages/experience/src/pages/SocialSignInCallback/SingleSignOn.tsx
index 6d4a38518..ca451abcf 100644
--- a/packages/experience/src/pages/SocialSignInCallback/SingleSignOn.tsx
+++ b/packages/experience/src/pages/SocialSignInCallback/SingleSignOn.tsx
@@ -1,16 +1,25 @@
+import useNativeMessageListener from '@/hooks/use-native-message-listener';
+import { useSieMethods } from '@/hooks/use-sie';
+
 import SignIn from '../SignIn';
 
 import useSingleSignOnListener from './use-single-sign-on-listener';
 
-/**
- * Single sign-on callback page
- */
 type Props = {
   connectorId: string;
 };
 
 const SingleSignOn = ({ connectorId }: Props) => {
+  const { socialConnectors } = useSieMethods();
+
+  /* To avoid register duplicated native message listeners,
+    we only add the native message listener if there are no social connectors.
+    Set the bypass flag to true if there are social connectors.
+  */
+  useNativeMessageListener(socialConnectors.length > 0);
+
   useSingleSignOnListener(connectorId);
+
   return <SignIn />;
 };