[Archive] Pregenerated Wallets

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by sdelvalle57 on 10/23/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.


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

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.

Sure, this is my Web3Auth project configuration:

image
image1666Ă—796 65.8 KB

And the custom authentication methods I have set:

image
image1685Ă—581 46.4 KB

So the lookup query would be something like this:

image
image1100Ă—938 112 KB

This is what happens when running the app:

image
image874Ă—586 141 KB

image
image874Ă—586 27.3 KB

image
image857Ă—945 103 KB

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?

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:

image
image1920Ă—1993 224 KB

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

image
image1920Ă—1993 164 KB

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

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.

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]

image
image1072Ă—687 53.2 KB

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.