Web3auth web sdk in webview of react native

  1. I am using web3auth web sdk in WebView on my react native project, and I tried to integrate the predesigned login page in web sdk for my project.

  2. In my local server which is handling web3auth web sdk (I get this by CDN), the instance of web3auth object is successfully created as displayed in log, but there is no response and no error message processing these two functions, where the codes are stuck:

     await web3auth.initModal();
     const provider = await web3auth.connect();
    
  3. This is the codes for my html handling webVIew (cliend id is deleted cuz this is a public post):

Web3Auth Login

Login with Web3Auth


this is the package.json:

{
“name”: “pantheon”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“android”: “react-native run-android”,
“ios”: “react-native run-ios”,
“lint”: “eslint .”,
“start”: “react-native start”,
“test”: “jest”,
“server”: “nodemon server.js”,
“build”: “webpack --config webpack.config.js”
},
“dependencies”: {
@react-navigation/native”: “^6.1.18”,
@react-navigation/stack”: “^6.4.1”,
@web3auth/base”: “^8.12.4”,
@web3auth/ethereum-provider”: “^8.12.4”,
@web3auth/modal”: “^8.12.7”,
@web3auth/web3auth”: “^2.1.3”,
“express”: “^4.19.2”,
“metro-react-native-babel-preset”: “^0.77.0”,
“react”: “18.3.1”,
“react-native”: “0.75.2”,
“react-native-dotenv”: “^3.4.11”,
“react-native-gesture-handler”: “^2.19.0”,
“react-native-safe-area-context”: “^4.10.9”,
“react-native-webview”: “^13.12.2”,
“web3”: “^4.12.1”
},
“devDependencies”: {
@babel/core”: “^7.25.2”,
@babel/plugin-transform-class-properties”: “^7.25.4”,
@babel/plugin-transform-private-methods”: “^7.25.4”,
@babel/plugin-transform-private-property-in-object”: “^7.24.7”,
@babel/preset-env”: “^7.25.4”,
@babel/runtime”: “^7.20.0”,
@react-native/babel-preset”: “0.75.2”,
@react-native/eslint-config”: “0.75.2”,
@react-native/metro-config”: “0.75.2”,
@react-native/typescript-config”: “0.75.2”,
@types/react”: “^18.2.6”,
@types/react-test-renderer”: “^18.0.0”,
“babel-jest”: “^29.6.3”,
“babel-loader”: “^9.1.3”,
“eslint”: “^8.19.0”,
“jest”: “^29.6.3”,
“nodemon”: “^3.1.4”,
“prettier”: “2.8.8”,
“react-test-renderer”: “18.3.1”,
“typescript”: “5.0.4”,
“webpack”: “^5.94.0”,
“webpack-cli”: “^5.1.4”
},
“engines”: {
“node”: “>=18”
}
}

this is the server for running webview / web3auth web sdk:
const express = require(‘express’);
const path = require(‘path’);

const app = express();
const PORT = 8080;

// Serve static files from the public directory
app.use(express.static(path.join(__dirname, ‘public’)));

// Handle all requests and send back the web3auth-login.html file
app.get(‘/’, (req, res) => {
res.sendFile(path.join(__dirname, ‘public’, ‘web3auth-login.html’));
});

// Start the server
app.listen(PORT, () => {
console.log(Server is running on http://localhost:${PORT});
});


Hi 陈泽坤,

Thank you for providing such detailed information! Let’s see if we can diagnose this issue.

Key Issue:

Your Web3Auth instance seems to be created successfully, but you aren’t getting a response or an error when calling await web3auth.initModal() and await web3auth.connect().

About Your Setup:

  • SDK Details: Web3Auth Web SDK
  • SDK Versions:
    • @web3auth/modal: ^8.12.7
    • @web3auth/web3auth: ^2.1.3
  • Platform: React Native (using WebView)

Steps to Debug:

  1. Console Logs: Ensure you have checked the browser console logs thoroughly. There might be crucial error or warning messages around your initModal() and connect() calls.

  2. Initialization & Connection Code:

    • Make sure your clientId and chainConfig are correctly set.
    • Verify that the Web3Auth network configuration (sapphire_devnet) is supported for your clientId.
  3. Network Requests: Monitor network requests in the browser’s dev tools. See if any requests to Web3Auth’s servers are failing or timing out.

Possible Issues and Solutions:

  1. Asynchronous Timing:

    • Sometimes, waiting on asynchronous operations might not behave as expected in WebView. Try adding more logs before and after initModal() and connect() to ensure they are being invoked.
  2. Event Loop Blocking:

    • The browser might be blocking script execution due to heavy computation or resource loading. Check if any errors related to this are present in the console.
  3. Network Configuration:

    • Your configuration for chainNamespace, chainId, and rpcTarget needs to match what Web3Auth’s backend expects. Double-check these settings.
  4. Script Loading:

    • Ensure that your HTML file is served correctly from your express server and can completely load all necessary scripts from CDN.

Potential Fix:

Make sure your await calls inside DOMContentLoaded are capturing any exceptions or logging output as below:

document.addEventListener('DOMContentLoaded', async () => {
  console.log('DOM content loaded');

  if (typeof window.Web3auth === 'undefined') {
    console.error('Web3Auth is not defined. Check if the script is imported correctly.');
    return;
  }

  console.log('Web3Auth is successfully loaded.');
  const clientId = 'Your_Client_ID';

  try {
    console.log('Initializing Web3Auth...');
    const web3auth = new window.Web3auth.Web3Auth({
      clientId,
      chainConfig: {
        chainNamespace: 'eip155',
        chainId: '0xaa36a7',
        rpcTarget: 'https://rpc.ankr.com/eth_sepolia'
      },
      web3AuthNetwork: 'sapphire_devnet'
    });

    console.log('Web3Auth initialized:', web3auth);

    console.log('Initializing Modal...');
    await web3auth.initModal();
    console.log('Modal Initialized');

    console.log('Connecting...');
    const provider = await web3auth.connect();
    console.log('Connected to Web3Auth, provider:', provider);

    // More logic here...
  } catch (error) {
    console.error('Error during Web3Auth process:', error);
  }
});

Final Checks:

  • Ensure your express server is correctly serving web3auth-login.html.
  • Confirm network connectivity and no CSP (Content Security Policy) issues.

If you still run into issues, consider providing:

  1. Browser Console Screenshots and Network Tab logs.
  2. Web3Auth Initialization & Login Code Snippets (You’ve provided most, but align them as shown for clarity).

This response was generated by the Web3Auth Bot, and a team member will also review your query and provide additional assistance if needed.

Hey @czk6kun6 ,

Thanks for sharing all the details about your integration. While I see you’re using the Web3Auth Web SDK inside a WebView in your React Native project, we recommend using the Web3Auth React Native Plug and Play (PnP) SDK for a smoother integration with native features. This SDK is designed specifically for React Native environments and would help you avoid potential issues when using Web SDKs in WebView.

Here’s the link to the docs to get you started: https://web3auth.io/docs/sdk/pnp/react-native

Hello

I know web3auth react native sdk is available, but web3auth react native doesnt support the predesigned login, thats why i need to use web3auth web sdk

Hey @czk6kun6,

Thanks for sharing the details. Unfortunately, Web3Auth web SDKs aren’t optimized to work within a WebView in React Native. Instead, I recommend using the dedicated React Native SDKs that we provide, either the Plug and Play SDK or the Single Factor Authentication (SFA) SDK. These SDKs are tailored for native environments and will ensure a smoother integration experience.

You can find more details and setup instructions here:

Let me know if you need any help with the setup!

Hi @maharshi ,

In your website, the authentication process seems to be using your own SDK. Is that true?
Because if so, that works pretty well within the WebView, which makes me think there’s a way to get it working.

The main difference I see in the web3auth URLs is that the one we’re using in our app uses v9, and your website uses v8. Other than that, I don’t see why it wouldn’t work.

EDIT: I tried both v8 and v9, same results. With v8 the URL looks very similar to the one on your website, but it won’t redirect to google.

hey @luis.tanica

Running the Web3Auth Web SDK in a WebView inside a React Native app isn’t ideal because WebViews don’t handle redirects, pop-ups, or cross-origin requests well. This leads to issues like the functions initModal() and connect() not working properly. Web SDKs are designed for full web environments, which have more control over these interactions.

Also, WebViews are not secure for handling sensitive authentication flows. Web3Auth’s React Native SDK, on the other hand, is built to work natively with mobile apps, offering deep linking support for redirect flows, secure session management with encrypted storage on iOS and Android, and overall smoother handling of the authentication process.

The main difference between the Web and React Native SDKs is the predesigned login modal. While the Web SDK has it out-of-the-box, it’s just a set of buttons that can be recreated in React Native with the same backend logic. All the core functionality remains identical.

As for the version difference (v8 vs. v9), both are similar in terms of authentication. The issues you’re encountering likely stem from the limitations of running the Web SDK inside a WebView, not from the SDK versions themselves.

Hey @yashovardhan!

I’m currently not pursuing this, but your answer still didn’t explain to me why I can open your website and login inside a webview, but if I open my app (which works on a regular browser) on a webview it doesn’t.

I’m not even talking about integrating anything between the React Native app and the web app, I just want to understand why a web app that works in the browser wouldn’t work when loaded inside a WebView.

Our Web3Auth Auth Service works inside a Webview. Telegram mini apps are a good example for that. However certain login methods like Google do not work in webviews because of their own platform restrictions.

You can checkout our telegram mini app examples: Integrate Web3Auth with TON Blockchain for a Telegram Mini App | Web3Auth

Please note login in popup mode won’t work since webviews have a deeplinking issues for catching the redirects.