Change WeChat integration API #363

ref DEV-2809

Author: tung2744

example/reactnative/ios/reactNativeExample/Info.plist

@@ -43,16 +43,18 @@
 	</array>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
 	<key>LSApplicationQueriesSchemes</key>
 	<array>
 		<string>weixin</string>
 		<string>weixinULAPI</string>
+		<string>weixinURLParamsAPI</string>
 	</array>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	<!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
@@ -78,7 +80,5 @@
 	<string>Light</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>ITSAppUsesNonExemptEncryption</key>
-	<false/>
 </dict>
 </plist>

example/reactnative/package.json

@@ -34,6 +34,8 @@
     "@typescript-eslint/parser": "^5.29.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
+    "//": "For unknown reason, we need to install eslint-plugin-jest oursevles so that it is found by eslint",
+    "eslint-plugin-jest": "^27.9.0",
     "jest": "^29.6.3",
     "react-test-renderer": "18.3.1",
     "typescript": "5.0.4"

example/reactnative/src/screens/MainScreen.tsx

@@ -294,6 +294,25 @@ const HomeScreen: React.FC = () => {
       });
   }, []);
 
+  const sendWechatAuthRequest = useCallback(
+    (state: string) => {
+      console.log('user click login with wechat, open wechat sdk');
+      const {WechatAuth} = NativeModules;
+      WechatAuth.sendWechatAuthRequest(state)
+        .then((result: {code: string; state: string}) => {
+          console.log('sending wechat auth callback');
+          return authgear.wechatAuthCallback(result.code, result.state);
+        })
+        .then(() => {
+          console.log('send wechat auth callback successfully');
+        })
+        .catch((err: Error) => {
+          showError(err);
+        });
+    },
+    [showError],
+  );
+
   const delegate: ReactNativeContainerDelegate = useMemo(() => {
     const d: ReactNativeContainerDelegate = {
       onSessionStateChange: (
@@ -305,24 +324,9 @@ const HomeScreen: React.FC = () => {
           setUserInfo(null);
         }
       },
-      sendWechatAuthRequest: state => {
-        console.log('user click login with wechat, open wechat sdk');
-        const {WechatAuth} = NativeModules;
-        WechatAuth.sendWechatAuthRequest(state)
-          .then((result: {code: string; state: string}) => {
-            console.log('sending wechat auth callback');
-            return authgear.wechatAuthCallback(result.code, result.state);
-          })
-          .then(() => {
-            console.log('send wechat auth callback successfully');
-          })
-          .catch((err: Error) => {
-            showError(err);
-          });
-      },
     };
     return d;
-  }, [setSessionState, setUserInfo, showError]);
+  }, [setSessionState, setUserInfo]);
 
   useEffect(() => {
     authgear.delegate = delegate;
@@ -374,6 +378,7 @@ const HomeScreen: React.FC = () => {
               android: {
                 wechatRedirectURI,
               },
+              sendWechatAuthRequest,
             })
           : undefined,
         isSSOEnabled,
@@ -398,6 +403,7 @@ const HomeScreen: React.FC = () => {
     useWebKitWebView,
     postConfigure,
     showError,
+    sendWechatAuthRequest,
   ]);
 
   const login = useCallback(() => {

packages/authgear-react-native/src/index.ts

@@ -450,7 +450,6 @@ export class ReactNativeContainer {
       url: authorizeURL,
       redirectURI: options.redirectURI,
       shareCookiesWithDeviceBrowser: this._shareCookiesWithDeviceBrowser(),
-      containerDelegate: this.delegate,
     });
     const xDeviceInfo = await getXDeviceInfo();
     const result = await this.baseContainer._finishAuthentication(
@@ -508,7 +507,6 @@ export class ReactNativeContainer {
       url: authorizeURL,
       redirectURI: options.redirectURI,
       shareCookiesWithDeviceBrowser: this._shareCookiesWithDeviceBrowser(),
-      containerDelegate: this.delegate,
     });
     const xDeviceInfo = await getXDeviceInfo();
     await this.baseContainer._finishSettingsAction(redirectURL, {
@@ -583,7 +581,6 @@ export class ReactNativeContainer {
       url: endpoint,
       redirectURI: options.redirectURI,
       shareCookiesWithDeviceBrowser: this._shareCookiesWithDeviceBrowser(),
-      containerDelegate: this.delegate,
     });
     const xDeviceInfo = await getXDeviceInfo();
     const result = await this.baseContainer._finishReauthentication(
@@ -794,7 +791,6 @@ export class ReactNativeContainer {
       url: authorizeURL,
       redirectURI: options.redirectURI,
       shareCookiesWithDeviceBrowser: this._shareCookiesWithDeviceBrowser(),
-      containerDelegate: this.delegate,
     });
     const result = await this.baseContainer._finishAuthentication(
       redirectURL,
@@ -893,18 +889,6 @@ export class ReactNativeContainer {
     );
   }
 
-  /**
-   * @internal
-   */
-  _sendWechatRedirectURIToDelegate(deepLink: string): void {
-    const u = new URL(deepLink);
-    const params = u.searchParams;
-    const state = params.get("state");
-    if (state) {
-      this.delegate?.sendWechatAuthRequest(state);
-    }
-  }
-
   /**
    * Check whether biometric is supported on the current device.
    * If biometric is not supported, then a platform specific error is thrown.

packages/authgear-react-native/src/types.ts

@@ -26,19 +26,6 @@ export interface ReactNativeContainerDelegate {
     container: ReactNativeContainer,
     reason: SessionStateChangeReason
   ) => void;
-
-  /**
-   * This callback will be called when user click login with WeChat in
-   * react-native.
-   *
-   * Developer should implement this function to use WeChat SDK to
-   * obtain WeChat authentication code. After obtaining the code, developer
-   * should call wechatAuthCallback with code and state to complete the
-   * WeChat login.
-   *
-   * @public
-   */
-  sendWechatAuthRequest(state: string): void;
 }
 
 /**

packages/authgear-react-native/src/ui_implementation.ts

@@ -1,6 +1,5 @@
 import URL from "core-js-pure/features/url";
 import { openAuthorizeURL, openAuthorizeURLWithWebView } from "./nativemodule";
-import { ReactNativeContainerDelegate } from "./types";
 import eventEmitter from "./eventEmitter";
 
 /**
@@ -24,11 +23,6 @@ export interface OpenAuthorizationURLOptions {
    * such as those underlying implementations are based on ASWebAuthenticationSession, or CustomTabs.
    */
   shareCookiesWithDeviceBrowser: boolean;
-
-  /**
-   * @internal
-   */
-  containerDelegate?: ReactNativeContainerDelegate;
 }
 
 /**
@@ -134,6 +128,19 @@ export interface WebKitWebViewUIImplementationOptionsAndroid {
 export interface WebKitWebViewUIImplementationOptions {
   ios?: WebKitWebViewUIImplementationOptionsIOS;
   android?: WebKitWebViewUIImplementationOptionsAndroid;
+
+  /**
+   * This callback will be called when user click login with WeChat in
+   * react-native.
+   *
+   * Developer should implement this function to use WeChat SDK to
+   * obtain WeChat authentication code. After obtaining the code, developer
+   * should call wechatAuthCallback with code and state to complete the
+   * WeChat login.
+   *
+   * @public
+   */
+  sendWechatAuthRequest?: (state: string) => void;
 }
 
 /**
@@ -166,7 +173,7 @@ export class WebKitWebViewUIImplementation implements UIImplementation {
           const url = new URL(args.url);
           const state = url.searchParams.get("state");
           if (state != null) {
-            options.containerDelegate?.sendWechatAuthRequest(state);
+            this.options?.sendWechatAuthRequest?.(state);
           }
         }
       }