Is possible to connect to multiple providers (Google, Apple, etc) by passing the LOGIN_PROVIDER dynamically ?
Or do multiple instances of Web3AuthConnector with hardcoded loginParams have to be created ?
I am having the same issues. I was thinking of creating multiple connector instances, but I feel there should be a better way. Perhaps another solution is dynamically changing the config created from wagmi’s createConfig.
Can you check our multichain example https://github.com/Web3Auth/web3auth-pnp-examples/blob/main/web-no-modal-sdk/blockchain-connection-examples/multi-chain-no-modal-example/src/App.tsx
The example you posted does not use web3auth-wagmi-connector.
@vjgee
My question specifically refers to using web3auth-wagmi-connector with the NoModal SDK to connect to multiple providers dynamically.
Is using these two packages together supported?
Also, for email specifically: the email address is inherently dynamic. How to pass it after initializing the connector such that:
Web3AuthConnector({
web3AuthInstance,
// Cannot pass this directly at initialization, need to pass it later when user entered email address
loginParams: {
loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
extraLoginOptions: {
login_hint: 'address@email.com'
},
},
}),
Hey @afarley,
Yes, it’s entirely possible to use the NoModal SDK in conjunction with the web3auth-wagmi-connector. For an implementation example showcasing this integration, you might want to check out our example here: Wagmi No Modal Example.
Regarding your question about dynamically setting the email address for the email passwordless login option, you can indeed modify the initialization process to accommodate this. Here’s how you can adjust your Web3AuthConnectorInstance function to make the login_hint dynamic based on user input, such as an email address:
// Modify the function to accept userEmail as an argument
export default function Web3AuthConnectorInstance(chains: Chain[], userEmail: string) {
// Rest of the code
return Web3AuthConnector({
web3AuthInstance,
loginParams: {
loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
extraLoginOptions: {
login_hint: userEmail, // Now dynamically set based on user input
},
},
});
}
With this modification, you can pass the user’s email dynamically to the Web3AuthConnectorInstance function as they enter it, allowing for a more tailored and dynamic login process.
I hope this addresses your queries. Should you have any more questions or need further clarification, feel free to reach out!
I ended up just creating multiple instances, which works:
const config = createConfig({
chains: [polygon],
transports: {
[polygon.id]: http(),
},
connectors: [
Web3AuthConnector({
web3AuthInstance: web3AuthInstance,
loginParams: { loginProvider: "google" },
}),
Web3AuthConnector({
web3AuthInstance: web3AuthInstance,
loginParams: { loginProvider: "apple" },
}),
Web3AuthConnector({
web3AuthInstance: web3AuthInstance,
loginParams: { loginProvider: "line" },
}),
],
});
I believe Web3Auth automatically adds the MetaMask and Phantom connectors as the last 2 connectors. To display the login options:
import { useConnect } from "wagmi";
const { connectAsync, connectors } = useConnect();
const myConnectors = [
{ name: "Google", connectorIndex: 0 },
{ name: "Apple", connectorIndex: 1 },
{ name: "Line", connectorIndex: 2 },
{ name: "MetaMask", connectorIndex: 3 },
]
<div>
{myConnectors.map<any>((i: any) => (
<button
onClick={async () => {
await connectAsync({ connector: connectors[i.connectorIndex] });
router.push("/app");
}}
>
{i.name}
</button>
))}
</div>Thank you, @jonwayhuang, for sharing your solution with the community. We genuinely appreciate users like you who contribute to making our developer community more self-sufficient and collaborative.
Hey @afarley, given the solutions now available (albeit just a couple), are you still encountering the issue? Please don’t hesitate to inform us if you’re facing any further difficulties or if there’s more we can do to assist you.