Pregenerated Wallets

[sdelvalle57]

I have a PnP Web Application EVM Based Chain sapphire_devnet Project under base plan

I want to test if from response of the lookup url I can get the same evm wallet address after logging in in my app, Ive tried many approaches since there’s no much documentation nor examples of this topic, I had to reach at this forum for some help, this is the lookup link using email_passwordless:

https://lookup.web3auth.io/lookup?verifier=Darwin&verifierId=sdelvalle57@gmail.com&web3AuthNetwork=sapphire_devnet&clientId=BGOuHe9fhDfK1KJSUHsTOvHENWCCoepmOAI531fLTf53-eq8qxvR4PO4akTaoysbUGBAXaDeNaxTsq0uaZTrT7M&

Response:

{
  "data": {
    "evmAddress": "0x95ab4ade8bE591D47FB95710B5bE7DF1820Da6ed",
    "X": "3b471d50be0dc15e82600366753a53ce28c2249dabacfbad2809d14a9e91014a",
    "Y": "6c712d9ad16fc34b123eee2baf30cc2679f2b3d69ec26ba6cea96d705c654ef8",
    "isMfaEnabled": false
  },
  "success": true
}

And this is my app configuration:
Im trying to wrap the connector into wagmi

export const config = createConfig({
  chains: process.env.REACT_APP_USE_CHAIN === 'polygon' ? [polygon] : [arbitrumSepolia],
  transports: { [arbitrumSepolia.id]: http(), [polygon.id]: http() },
  connectors: [SocialWeb3AuthConnector()],
});

Where SocialWeb3AuthConnector:

// Web3Auth Libraries
import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector';
import { Web3Auth } from '@web3auth/modal';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from '@web3auth/base';
import { AuthAdapter } from '@web3auth/auth-adapter';

export default function SocialWeb3AuthConnector() {
  // Create Web3Auth Instance
  const name = "Darwin Evolution";
  const clientId = "BGOuHe9fhDfK1KJSUHsTOvHENWCCoepmOAI531fLTf53-eq8qxvR4PO4akTaoysbUGBAXaDeNaxTsq0uaZTrT7M"

  const chainConfig = {
    logo: "https://web3auth.io/images/web3authlog.png",
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: process.env.REACT_APP_USE_CHAIN === "polygon" ? "0x89" : "0x66eee", 
    rpcTarget:  process.env.REACT_APP_USE_CHAIN === "polygon" ? process.env.REACT_APP_ALCHEMY_POLYGON_API_KEY as string : process.env.REACT_APP_QUICKNODE_ARBITRUM_SEPOLIA_API_KEY as string,
    displayName:  process.env.REACT_APP_USE_CHAIN === "polygon" ? "Polygon Mainnet" : "Arbitrum Sepolia",
    blockExplorerUrl:  process.env.REACT_APP_USE_CHAIN === "polygon" ? process.env.REACT_APP_MATIC_SCAN as string : process.env.REACT_APP_SEPOLIA_SCAN as string,
    ticker: process.env.REACT_APP_USE_CHAIN === "polygon" ? "MATIC" : "ETH",
    tickerName: process.env.REACT_APP_USE_CHAIN === "polygon" ? "Polygon" : "Arbitrum Sepolia",
  };

  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

  const web3AuthInstance = new Web3Auth({
    clientId,
    chainConfig,
    privateKeyProvider,
    uiConfig: {
      appName: name,
      loginMethodsOrder: ["google", "github"],
      defaultLanguage: "en",
      modalZIndex: "2147483647",
      logoLight: "https://web3auth.io/images/web3authlog.png",
      logoDark: "https://web3auth.io/images/web3authlogodark.png",
      uxMode: "redirect",
      mode: "light",

    },
    web3AuthNetwork:
      process.env.REACT_APP_USE_CHAIN === 'polygon'
        ? WEB3AUTH_NETWORK.SAPPHIRE_MAINNET
        : WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
    enableLogging: true
  });


  const authAdapter = new AuthAdapter({
    adapterSettings: {
      loginConfig: {
        email_passwordless: {
          verifier: "Darwin", // Pass the Verifier name here. eg. aggregate-sapphire
          typeOfLogin: "email_passwordless"
        },
        google: {
          verifier: "DarwinGoole",
          typeOfLogin: "google"
        }
      },
    },
  });

  web3AuthInstance.configureAdapter(authAdapter);


  return Web3AuthConnector({
    web3AuthInstance
  });
}

Trying to use both passwordless or google Im still getting a different wallet address

Any help would be much appreciated

[w3abot]

Hi Santiago! Thanks for reaching out and providing such detailed information about your issue. It sounds like you’re encountering a challenge with pre-generated wallets in your PnP Web Application on the EVM-based chain, specifically with maintaining the same wallet address after login.

Here’s a summary of the details you’ve provided:

Issue Details:

• SDK Details: PnP Web SDK
• Platform: Web Application (EVM-Based)
• Environment: sapphire_devnet
• Lookup URL: Provided
• Expected Outcome: Consistent EVM wallet address after login
• Code Snippets: Shared login configuration code and setup for the SocialWeb3AuthConnector

Response from Lookup:

You’re receiving a wallet address from the lookup URL, but after logging in with either passwordless or Google, the wallet address differs.

Proposed Solutions:

1. Double-check the Verifier: Ensure that the Verifier name you’re using in the authentication configuration matches the one used when generating the wallets. This will help maintain consistency in the wallet retrieval process.
2. Session Management: Check if there’s any session-related handling that could be influencing wallet generation across different login methods (passwordless vs. Google).
3. Logger: Since you have logging enabled in Web3Auth, check the logs for any discrepancies or errors during the login process that relate to wallet generation.

Would it be possible for you to share any error messages from the browser console associated with this issue? Additionally, if you have any screenshots or links to further clarify the problem, that would be helpful for our support team to dive deeper into the issue.

Looking forward to helping you sort this out!

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.

[sdelvalle57]

Sure, this is my Web3Auth project configuration:

And the custom authentication methods I have set:

So the lookup query would be something like this:

This is what happens when running the app:

If you see there’s a mismatch between wallet addresses

Is there an example of an app where it shows it matches the addresses from the lookup query?

[maharshi]

Hey @sdelvalle57,

The mismatch you’re experiencing is likely due to the missing useCoreKitKey: true flag in your Web3Auth constructor. I know the documentation might feel a bit light on details, but it’s important to take a close look at what’s already there.

If you scroll up from the screenshot you posted, there’s a section that explains the situation clearly:

It states:

“This API only returns the Core Kit Key wallet addresses. To use the wallet addresses with the Web3Auth SDKs, you will need to either use the useCoreKitKey flag in our PnP SDKs or use any of our Core Kit SFA SDKs.”

If you search for useCoreKitKey in the docs, you’d find the relevant details for the Modal SDK right here: Initializing PnP Web Modal SDK | Documentation | Web3Auth

Hope this helps to get everything aligned for you! Let me know if anything else comes up.

[sdelvalle57]

Thank you for you response

But Ive also tried to add the coreKit flag, but when I do this I get:

Failed to connect with cached openlogin provider WalletLoginError: useCoreKitKey flag is enabled but coreKitKey is not available.

[sdelvalle57]

Ok, now I managed to make it work by updating packages to latest.
Now I have an issue trying to implement email_passwordless functionality:

This is the web3 connector instance:

// Web3Auth Libraries
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK, UX_MODE } from "@web3auth/base";
import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
import { AuthAdapter } from "@web3auth/auth-adapter";

export default function Web3AuthConnectorInstance(email: string) {
  // Create Web3Auth Instance
  const name = "My App Name";
  const chainConfig = {
    logo: "https://web3auth.io/images/web3authlog.png",
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x66eee", 
    rpcTarget:  "https://nameless-blissful-glitter.arbitrum-sepolia.quiknode.pro/68645066d69fab1fa0eb7cbdee71acdf9a91fb3c/",
    displayName:  "Arbitrum Sepolia",
    blockExplorerUrl: "https://sepolia.arbiscan.io/",
    ticker: "ETH",
    tickerName: "Arbitrum Sepolia",
  };

  const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });

  const web3AuthInstance = new Web3AuthNoModal({
    clientId: "BGOuHe9fhDfK1KJSUHsTOvHENWCCoepmOAI531fLTf53-eq8qxvR4PO4akTaoysbUGBAXaDeNaxTsq0uaZTrT7M",
    chainConfig,
    privateKeyProvider,
    uiConfig: {
      appName: name,
      defaultLanguage: "en",
      logoLight: "https://web3auth.io/images/web3authlog.png",
      logoDark: "https://web3auth.io/images/web3authlogodark.png",
      mode: "light",
    },
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
    enableLogging: true,
    useCoreKitKey: true
  });

  const authAdapter = new AuthAdapter({
    adapterSettings: {
      loginConfig: {
        email_passwordless: {
          verifier: "DarwinPasswordless", 
          typeOfLogin: "email_passwordless",
          clientId: "BGOuHe9fhDfK1KJSUHsTOvHENWCCoepmOAI531fLTf53-eq8qxvR4PO4akTaoysbUGBAXaDeNaxTsq0uaZTrT7M"
        }
      },
    },
  });

  web3AuthInstance.configureAdapter(authAdapter);

  const walletServicesPlugin = new WalletServicesPlugin({
    walletInitOptions: {
      whiteLabel: {
        showWidgetButton: true,
      }
    }
  });
  web3AuthInstance.addPlugin(walletServicesPlugin);

  return Web3AuthConnector({
      web3AuthInstance,
      loginParams: {
        loginProvider: "email_passwordless",
        extraLoginOptions: {
          login_hint: email.trim()
        }
      },
  });
}

And my App.tsx file, please note the login function how the connector gets injected into wagmi

// WAGMI Libraries
import { WagmiProvider, createConfig, http, useAccount, useConnect, useDisconnect } from "wagmi";
import { arbitrumSepolia } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 

import { SendTransaction } from "./sendTransaction";
import { SwitchChain } from "./switchNetwork";
import { Balance } from "./balance";
import { WriteContract } from "./writeContract";

import Web3AuthConnectorInstance from "./Web3AuthConnectorInstance";
import "./App.css";

const queryClient = new QueryClient() 

// Set up client
const config = createConfig({
  chains: [arbitrumSepolia],
  transports: { [arbitrumSepolia.id]: http() },
  connectors: [
    // Web3AuthConnectorInstance([arbitrumSepolia]),
  ],
});

function Profile() {
  const { address, connector, isConnected } = useAccount();
  const { connect, connectors, error } = useConnect();
  const { disconnect } = useDisconnect();

  const login = () =>{
    const web3AuthConnector = Web3AuthConnectorInstance("sdelvalle57@gmail.com");
    if (!web3AuthConnector) {
      console.log("no web3auth connector")
      return;
    }

    connect({ connector: web3AuthConnector });
  }

  if (isConnected) {
    return (
      <div className="main">
        <div className="title">Connected to {connector?.name}</div>
        <div>{address}</div>
        <button className="card" onClick={disconnect as any}>
          Disconnect
        </button>
        <SendTransaction />
        <Balance />
        <WriteContract />
        <SwitchChain />
      </div>
    );
  } else {
    return (
      <div className="main">
        <button onClick={login}>Email</button>
      </div>
    );
  }
}

// Pass client to React Context Provider
function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
      <div className="container">
        <Profile />
      </div>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

export default App;

There seems to be some bug in the code. Please contact support to fix this.

Error occurred while verifying params unable to verify jwt token, [failed to verify jws signature: failed to verify message: failed to verify signature using ecdsa failed to verify jws signature: failed to verify message: crypto/rsa: verification error failed to verify jws signature: failed to verify message: crypto/rsa: verification error]

[maharshi]

Hey @sdelvalle57,
Could you please submit a recording of the issue using a tool like jam.dev? We need more logs to properly understand what’s happening. We’ll take cognizance of the issue and report it to the team for a closer look.