refactor(ui): refactor native supported social connectors jsbridge (#907)

* refactor(ui): refactor native supported social connectors jsbridge api schema

refactor native supported social connectors jsbridge api schema

* fix(ui): fix typo

fix typo

packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.test.tsx

@@ -28,7 +28,10 @@ describe('SecondarySocialSignIn', () => {
       platform: 'web',
       getPostMessage: jest.fn(() => jest.fn()),
       callbackLink: '/logto:',
-      supportedSocialConnectorTargets: socialConnectors.map(({ id }) => id),
+      supportedConnector: {
+        universal: true,
+        nativeTargets: socialConnectors.map(({ target }) => target),
+      },
     };
     /* eslint-enable @silverhand/fp/no-mutation */
   });

packages/ui/src/hooks/utils.test.ts

@@ -20,7 +20,7 @@ describe('filterSocialConnectors', () => {
     expect(filterSocialConnectors()).toEqual([]);
   });
 
-  it('filter web connectors', () => {
+  it('filter Web Connectors', () => {
     expect(filterSocialConnectors(mockConnectors)).toEqual([
       { platform: 'Web', target: 'facebook' },
       { platform: 'Web', target: 'google' },
@@ -28,12 +28,15 @@ describe('filterSocialConnectors', () => {
     ]);
   });
 
-  it('filter Native connectors', () => {
+  it('filter Native Connectors', () => {
     /* eslint-disable @silverhand/fp/no-mutation */
     // @ts-expect-error mock global object
     globalThis.logtoNativeSdk = {
       platform: 'ios',
-      supportedSocialConnectorTargets: ['Web', 'WeChat'],
+      supportedConnector: {
+        universal: true,
+        nativeTargets: ['Web', 'WeChat'],
+      },
     };
     /* eslint-enable @silverhand/fp/no-mutation */
 
@@ -42,4 +45,21 @@ describe('filterSocialConnectors', () => {
       { platform: 'Native', target: 'WeChat' },
     ]);
   });
+
+  it('filter Native & Universal Connectors', () => {
+    /* eslint-disable @silverhand/fp/no-mutation */
+    // @ts-expect-error mock global object
+    globalThis.logtoNativeSdk = {
+      platform: 'ios',
+      supportedConnector: {
+        universal: false,
+        nativeTargets: ['Web', 'WeChat'],
+      },
+    };
+    /* eslint-enable @silverhand/fp/no-mutation */
+
+    expect(filterSocialConnectors(mockConnectors)).toEqual([
+      { platform: 'Native', target: 'WeChat' },
+    ]);
+  });
 });

packages/ui/src/hooks/utils.ts

@@ -68,6 +68,13 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => {
 
   const connectorMap = new Map<string, ConnectorData>();
 
+  /**
+   * Browser Environment
+   * Accepts both web and universal platform connectors.
+   * Insert universal connectors only if there is no  web platform connector provided with the same target.
+   * Web platform has higher priority.
+   **/
+
   if (!isNativeWebview()) {
     for (const connector of socialConnectors) {
       const { platform, target } = connector;
@@ -76,11 +83,6 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => {
         continue;
       }
 
-      /**
-       * Accepts both web and universal platform connectors.
-       * Insert universal connectors only if there is no  web platform connector provided with the same target.
-       * Web platform has higher priority.
-       **/
       if (platform === 'Web' || !connectorMap.get(target)) {
         connectorMap.set(target, connector);
         continue;
@@ -90,6 +92,13 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => {
     return Array.from(connectorMap.values());
   }
 
+  /**
+   * Native Webview Environment
+   * Accepts both native and universal platform connectors.
+   * Insert universal connectors only if there is no  native platform connector provided with the same target.
+   * Native platform has higher priority.
+   **/
+
   for (const connector of socialConnectors) {
     const { platform, target } = connector;
 
@@ -97,20 +106,19 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => {
       continue;
     }
 
-    /**
-     * Accepts both Native and universal platform connectors.
-     * Insert universal connectors only if there is no  Native platform connector provided with the same target.
-     * Native platform has higher priority.
-     **/
-    if (
-      platform === 'Native' &&
-      getLogtoNativeSdk()?.supportedSocialConnectorTargets.includes(target)
-    ) {
+    const { supportedConnector } = getLogtoNativeSdk() ?? {};
+
+    // No native supportedConnector settings found
+    if (!supportedConnector) {
+      continue;
+    }
+
+    if (platform === 'Native' && supportedConnector.nativeTargets.includes(target)) {
       connectorMap.set(target, connector);
       continue;
     }
 
-    if (platform === 'Universal' && !connectorMap.get(target)) {
+    if (platform === 'Universal' && supportedConnector.universal && !connectorMap.get(target)) {
       connectorMap.set(target, connector);
       continue;
     }

packages/ui/src/include.d/global.d.ts

@@ -4,7 +4,10 @@ type LogtoNativeSdkInfo = {
   platform: 'ios' | 'android';
   callbackLink: string;
   getPostMessage: () => (data: { callbackUri?: string; redirectTo?: string }) => void;
-  supportedSocialConnectorTargets: string[];
+  supportedConnector: {
+    universal: boolean;
+    nativeTargets: string[];
+  };
 };
 
 declare const logtoNativeSdk: LogtoNativeSdkInfo | undefined;