Getting error while using @toruslabs/react-native-web-browser

Help - Plug n Play PnP React Native SDK
1

Getting error [Error: undefined Unable to resolve module crypto from node_modules/@toruslabs/eccrypto/dist/eccrypto.cjs.js: crypto could not be found within the project or in these directories:

79 |const external_crypto_namespaceObject = require(“crypto”);
80 | var external_crypto_default = /#PURE/webpack_require.n(external_crypto_namespaceObject);

After successful installation of @toruslabs/react-native-web-browser getting above mentioned error while trying to run the app for android and ios

Below are the details:
“@toruslabs/react-native-web-browser”: “^1.1.0”
“@web3auth/react-native-sdk”: “^5.1.0”
“react”: “18.2.0”
“react-native”: “0.72.3”
Platform: Android & iOS

2

@rahul Welcome Aboard!

Which of these examples are you using for your code?:

3

I’m not using any example. I’m building my own application by following the steps mentions in web3auth docs official website.

4

Hey @rahul ,

I see you’re encountering an issue with resolving the crypto package. To address this, I recommend checking out the metro.config.js configuration suggested in our documentation, which you can find here. Additionally, ensure you’ve installed the necessary polyfilled packages as outlined in the guide. This step is crucial for proper functionality. If you’ve followed these steps and still face difficulties, please don’t hesitate to reach out for further assistance. We’re here to help!

1 Like
5

hey, resolved the package issues, encountering some new ones while calling web3auth.login(), could you help with this:

Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11

we are using this package for browser as per docs:
import * as WebBrowser from ‘@toruslabs/react-native-web-browser’;

1 Like
6

Hey @rahul,

It seems the issue you’re encountering might be related to a missing polyfill necessary for secure random number generation. I strongly encourage you to follow the troubleshooting guide available at React Native issues thoroughly. While you may have already configured metro.config.js according to the guide, it’s crucial to continue with the recommended steps. This includes creating a globals.js file and importing it into your index.js.

Moreover, please ensure you include the line import "react-native-get-random-values"; in your index.js. I suspect this could be the key to resolving the issue at hand. Give these steps a try and let me know how it goes. I’m here to help if you have any further questions or run into more challenges.

1 Like
7

Hey @maharshi ,
Thank you for your response, I’ve solved this issue but now the flow is getting stuck on loader after selecting the google account and returning login flow failed with error type dismiss error.

8

Hey @rahul,
I’m glad I could help. Could you please get me the screenshot of the error and the console logs displayed ?

10

Hey @maharshi

Screenshot_1708693536
Screenshot_17086935361080×2220 61.2 KB

getting stuck on this.
And after closing this gives [Web3Auth] login flow failed with error type dismiss error.
Also this is getting stuck on android only.

11

hey @maharshi
can you please help me here

12

hey @vjgee. Can you please look into this?

13

Apologies for the delay in responding, @rahul. Unfortunately, the loader screenshot doesn’t provide enough detail to pinpoint the issue. To assist you more effectively, could you please provide some console logs? Debugging Android devices will give us more insight into what’s happening. You can find a step-by-step guide on how to proceed with this here. Looking forward to your response so we can get this resolved for you.

14