[Archive] React Native Expo integration bug

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by githubdiscussions on 1/19/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

Hello! I'm trying currently to do a basic integration of web3auth for a PoC. I have mostly ripped out what I got from the integration builder. However it would appear there might be a problem wrt your modules. Here's what I have written down:

const handleConnectWallet = useCallback(
({ onSuccess, onFailure }: HandleConnectWalletArguments) => {
(async () => {
try {
const clientId = Constants.expoConfig?.extra?.web3auth.clientId;
const web3auth = new Web3Auth(WebBrowser, {
clientId,
network: OPENLOGIN_NETWORK.TESTNET, // MAINNET, AQUA, CELESTE, CYAN or TESTNET
loginConfig: {
// Add login configs corresponding to the provider
// Auth0 login works with jwt login config
jwt: {
verifier: Constants.expoConfig?.extra?.web3auth.auth0Verifier, // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: “jwt”,
clientId: Constants.expoConfig?.extra?.auth0.clientId, // use your app client id you got from auth0
},
// Add other login providers here
},
});

      const info = await web3auth.login({
        redirectUrl: resolvedRedirectUrl,
        mfaLevel: "none", // Pass on the mfa level of your choice: default, optional, mandatory, none
        // HIGHLIGHTSTART-customAuthStep
        // Auth0 login works with JWT loginProvider
        loginProvider: "jwt",
        extraLoginOptions: {
          domain: Constants.expoConfig?.extra?.auth0.domain, // Please append "https://" before your domain
          verifierIdField: "sub", // For SMS & Email Passwordless, use "name" as verifierIdField
        },
      });

  alert("Logged In with: " + info.privKey);
  // will rework the below later
  if (!w3m) {
    alert('Undefined wallet modal provider.');
    logger.warn('w3m not yet defined');
    return;
  }

  const web3Provider = await getProvider();

  if (!web3Provider) {
    logger.warn('web3Provider not yet defined');
    return;
  }

  setIsConnecting(true);

  const signer = web3Provider.getSigner();
  const signerAddress = await signer.getAddress();
  const chain = ChainNames.Ethereum;
  const subChain = SubChainIds.EthereumMainnet;
  setConnectedAddress(signerAddress);

  if (onSuccess) onSuccess(signerAddress, chain, subChain);
} catch (e) {
  logger.error('Failed to connect wallet', e as Error);
  setError(String(e)); // :shrug:

  if (onFailure) onFailure(e as Error);
} finally {
  setIsConnecting(false);
}



})();

},

[w3m, getProvider],

);

whenever I try to run it I'm getting:

@web3auth/react-native-sdk/dist/reactNativeSdk.cjs.js:36:60)">
node_modules/react-native-url-polyfill/index.js:1

import ‘./js/ios10Fix’;

^^^^^^


SyntaxError: Cannot use import statement outside a module

at compileFunction (<anonymous>)

at Object.compileFunction (node:vm:352:18)

at wrapSafe (node:internal/modules/cjs/loader:1033:15)

at Module._compile (node:internal/modules/cjs/loader:1069:27)

at Object.Module._extensions…js (node:internal/modules/cjs/loader:1159:10)

at Module.load (node:internal/modules/cjs/loader:981:32)

at Function.Module._load (node:internal/modules/cjs/loader:822:12)

at Module.require (node:internal/modules/cjs/loader:1005:19)

at require (node:internal/modules/cjs/helpers:102:18)

at Object.919 (/Users/vor0220/kod/kod-ecosystem/node_modules/@web3auth/react-native-sdk/dist/reactNativeSdk.cjs.js:36:60)

Any suggestions or views into this would be appreciated as it appears to be stemming from this particular reactNativeSdk.



Originally posted by: VoR0220

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/1223