Electron + Web3Auth

Help - Plug n Play PnP Web SDKs
1

I’m looking to integrate web3auth PnP SDK (modal) into an electron app.

The react native docs gave some guidelines on how to get started but it’s not entirely working.

I use redirects instead of popup and define a redirectURL with my app name and the auth schema so that the redirect lands in the app (or at least that’s the intention)

const authAdapter = new AuthAdapter({
  loginSettings: {
    mfaLevel: MFA_LEVELS.OPTIONAL
  },
  adapterSettings: {
    uxMode: UX_MODE.REDIRECT, // "redirect" | "popup"
    redirectUrl: 'joinhive-app://auth'
  }
});

When I click the screen to skip MFA the spinner just keeps loading and I never get redirected back to my application.

image
image2984×1580 222 KB

1. What are the necessary steps to fully integrate with electron
2. Can I enable walletconnect in this modus ? (in electron the option to connect a wallet is hidden because there is no browser to inject in I assume)

Many thanks !

2

Hi Nico! Thanks for reaching out. Let’s see how we can help you with your integration issue.

Steps to Integrate Web3Auth PnP SDK with Electron:

  1. Ensure URL Scheme is Correct: Double-check that your redirect URL scheme ('joinhive-app://auth') is properly configured in your Electron app. Make sure the app can handle this custom protocol.

  2. Electron Handler: Set up an event listener in your Electron main process to handle incoming requests to your custom URL scheme.

  3. Login Flow: Make sure your login flow is correctly calling the Web3Auth’s login function and that when it gets redirected, the app recognizes the incoming event to capture the login token or result.

  4. Cross-Origin Requests: Electron behaves differently than regular browsers when it comes to security policies. Check if CORS or any other security policies need adjustments.

Enabling WalletConnect in Electron:

Since Electron doesn’t have a built-in browser environment, wallet connections that depend on browser injections won’t work directly. Here are steps you might consider:

  1. Custom WebView/BrowserWindow: Use Electron’s BrowserWindow or WebView to open WalletConnect-compatible UIs as separate windows and manage interactions.

  2. Integration Packages: Check for any NPM packages or community resources that provide Electron-specific solutions for WalletConnect.

  3. Alternative Wallet Solutions: Consider using wallets that support direct integration via APIs or SDKs without requiring a browser environment.

We are here to assist if you need further guidance or share more code snippets. Let me know if you need anything else! Many thanks for reaching out, and happy coding! :blush:

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

3

Hey @nico2

Currently, our PnP SDKs do not support Electron. I will update this thread when we have any future developments.