Fix MPC Core Kit React Native Example for Latest version

README.md

@@ -40,7 +40,6 @@ results in a standard cryptographic key provider specific to the user and applic
 | `@web3auth/single-factor-auth` | `Angular`      | [SFA Quick Start - Angular](/single-factor-auth-web/quick-starts/sfa-angular-quick-start/)       |
 | `@web3auth/single-factor-auth` | `Next.js`      | [SFA Quick Start - Next.js](/single-factor-auth-web/quick-starts/sfa-nextjs-quick-start/)        |
 | `@web3auth/single-factor-auth` | `React`        | [SFA Quick Start - React](/single-factor-auth-web/quick-starts/sfa-react-quick-start/)           |
-| `@web3auth/single-factor-auth` | `React - Vite` | [SFA Quick Start - React Vite](/single-factor-auth-web/quick-starts/sfa-react-vite-quick-start/) |
 | `@web3auth/single-factor-auth` | `JavaScript`   | [SFA Quick Start - Vanilla JS](/single-factor-auth-web/quick-starts/sfa-vanillajs-quick-start/)  |
 | `@web3auth/single-factor-auth` | `Vue.js`       | [SFA Quick Start - Vue](/single-factor-auth-web/quick-starts/sfa-vue-quick-start/)               |
 | Other examples                 |                |                                                                                                  |

mpc-core-kit-react-native/mpc-core-kit-rn-auth0/App.tsx

@@ -14,23 +14,22 @@ import '@ethersproject/shims';
 import {useAuth0, Auth0Provider} from 'react-native-auth0';
 // IMP END - Auth Provider Login
 import EncryptedStorage from 'react-native-encrypted-storage';
-import * as tssLib from '@toruslabs/react-native-tss-lib-bridge';
+import {tssLib} from '@toruslabs/react-native-tss-lib-bridge';
 import {Bridge} from '@toruslabs/react-native-tss-lib-bridge';
 import {EthereumSigningProvider} from '@web3auth/ethereum-mpc-provider';
 
 // IMP START - Quick Start
 import {
   Web3AuthMPCCoreKit,
   WEB3AUTH_NETWORK,
-  IdTokenLoginParams,
   TssShareType,
   parseToken,
   generateFactorKey,
   COREKIT_STATUS,
   keyToMnemonic,
   mnemonicToKey,
   makeEthereumSigner,
-  TssLib,
+  JWTLoginParams,
 } from '@web3auth/mpc-core-kit';
 // import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK, Point, SubVerifierDetailsParams,
 // TssShareType, keyToMnemonic, getWebBrowserFactor, COREKIT_STATUS, TssSecurityQuestion,
@@ -61,10 +60,7 @@ const chainConfig = {
   tickerName: 'Ethereum',
 };
 
-const tsslibInstance: TssLib = {
-  keyType: 'secp256k1',
-  lib: tssLib,
-};
+const tsslibInstance = tssLib;
 // setup async storage for react native
 const asyncStorageKey = {
   getItem: async (key: string) => {
@@ -156,11 +152,11 @@ function Home() {
       uiConsole('idToken', idToken);
       const parsedToken = parseToken(idToken!);
 
-      const idTokenLoginParams = {
+      const idTokenLoginParams: JWTLoginParams = {
         verifier,
-        verifierId: parsedToken.email,
-        idToken,
-      } as IdTokenLoginParams;
+        verifierId: parsedToken.sub,
+        idToken: idToken!,
+      };
 
       await coreKitInstance.loginWithJWT(idTokenLoginParams);
       if (coreKitInstance.status === COREKIT_STATUS.LOGGED_IN) {
@@ -260,6 +256,7 @@ function Home() {
         shareType: TssShareType.DEVICE,
         factorKey: factorKey.private,
       });
+      setLoading(false);
       uiConsole('Stored factor: ', factorKey);
     } catch (error: any) {
       uiConsole(error.message);

mpc-core-kit-react-native/mpc-core-kit-rn-auth0/android/app/build.gradle

@@ -103,6 +103,11 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
+
+    packagingOptions {
+        pickFirst 'lib/arm64-v8a/libcrypto.so' // Exclude the conflicting file
+        pickFirst 'lib/x86_64/libcrypto.so' // If needed, exclude other architectures
+    }
 }
 
 dependencies {

mpc-core-kit-react-native/mpc-core-kit-rn-auth0/globals.js → mpc-core-kit-react-native/mpc-core-kit-rn-auth0/globals.ts

@@ -1,20 +1,22 @@
-global.Buffer = require('buffer').Buffer;
-// import './shim.js';
+import {install} from 'react-native-quick-crypto';
+
+install();
 
-console.log(Buffer.from( 'Hello World!', "utf-8" ).toString('base64'))
 // Needed so that 'stream-http' chooses the right default protocol.
+// @ts-ignore
 global.location = {
   protocol: 'file:',
 };
-
+// @ts-ignore
 global.process.version = 'v16.0.0';
 if (!global.process.version) {
   global.process = require('process');
   console.log({process: global.process});
 }
-
+// @ts-ignore
 process.browser = true;
 
+global.Buffer = require('buffer').Buffer;
 
 const TextEncodingPolyfill = require('text-encoding');
 // const WebAssembly = require('react-native-webassembly');
@@ -25,4 +27,4 @@ Object.assign(global, {
   TextDecoder: TextEncodingPolyfill.TextDecoder,
   // WebAssembly: WebAssembly,
   // BigInt: BigInt,
-});
+});

mpc-core-kit-react-native/mpc-core-kit-rn-auth0/ios/Podfile.lock

@@ -957,7 +957,13 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.11.0):
     - React-Core
-  - react-native-webview (13.8.6):
+  - react-native-quick-crypto (0.7.3):
+    - glog
+    - OpenSSL-Universal
+    - RCT-Folly (= 2022.05.16.00)
+    - React
+    - React-Core
+  - react-native-webview (13.12.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1188,6 +1194,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
+  - react-native-quick-crypto (from `../node_modules/react-native-quick-crypto`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1292,6 +1299,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-encrypted-storage"
   react-native-get-random-values:
     :path: "../node_modules/react-native-get-random-values"
+  react-native-quick-crypto:
+    :path: "../node_modules/react-native-quick-crypto"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-nativeconfig:
@@ -1382,7 +1391,8 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 84ea43c6c6232049135b1550b8c60b2faac19fab
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
-  react-native-webview: d6607cbbe7bad689cc08d6d5e35cbf9938093223
+  react-native-quick-crypto: baf477ca99eb2d142ebc8fd10c82eba98f4ebfa6
+  react-native-webview: af2cf33a5cb5dc5789b9ac8811714a4f66a4c505
   React-nativeconfig: b4d4e9901d4cabb57be63053fd2aa6086eb3c85f
   React-NativeModulesApple: cd26e56d56350e123da0c1e3e4c76cb58a05e1ee
   React-perflogger: 5f49905de275bac07ac7ea7f575a70611fa988f2
@@ -1405,7 +1415,7 @@ SPEC CHECKSUMS:
   ReactCommon: 2aa35648354bd4c4665b9a5084a7d37097b89c10
   SimpleKeychain: f8707c8e97b38c6a6e687b17732afc9bcef06439
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: 805bf71192903b20fc14babe48080582fee65a80
+  Yoga: d17d2cc8105eed528474683b42e2ea310e1daf61
 
 PODFILE CHECKSUM: 1a3458f40f2b81d631519b0c779e211db1e54541
 

mpc-core-kit-react-native/mpc-core-kit-rn-auth0/metro.config.js

@@ -12,6 +12,7 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
   //   return {
 const config =  {
     resolver: {
+      // IMP START - Bundler Issues
       extraNodeModules: {
         assert: require.resolve('empty-module'), // assert can be polyfilled here if needed
         http: require.resolve('empty-module'), // stream-http can be polyfilled here if needed
@@ -24,6 +25,7 @@ const config =  {
         stream: require.resolve('stream-browserify'),
         buffer: require.resolve('buffer'),
       },
+      // IMP END - Bundler Issues
 
       // assetExts: assetExts.filter(ext => ext !== 'svg'),