We are using Web3Auth to have google, twitter, discord and external wallets as sign-in/connection options.
We have created custom verifiers for google, twitter and discord.
The sub-verifier for google is working. But the sub-verifiers for twitter and discord are not working.
We suspect the issue could be related to how auth0, social logins and web3auth are configured with each other, but are not 100% sure on this.
I have attached the errors we are getting for both the social logins.
Hello @shubbham.jain,
Could you kindly provide me with the following information:
Thank you.
Hello @shahbaz ,
Here is the information you asked for-
Verifier name - gamerse-testnet
sub verifier names-
a. gamerse-google
b. gamerse-twitter
c. gamerse-discord
Web3Auth network - testnet
We are using wagmi connector with web3auth.
The code snippet of the whole setup-
import { Chain } from "wagmi";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CoinbaseAdapter } from "@web3auth/coinbase-adapter";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
export default function Web3AuthNoModalConnectorInstance(chains: Chain[]) {
if (typeof window !== "undefined") {
const web3AuthInstance = new Web3AuthNoModal({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: `0x${chains[0].id.toString(16)}`,
rpcTarget: chains[0].rpcUrls.default.http[0],
displayName: chains[0].name,
tickerName: chains[0].nativeCurrency?.name,
ticker: chains[0].nativeCurrency?.symbol,
},
web3AuthNetwork: "testnet",
// enableLogging: true,
});
const verifier = "gamerse-testnet";
const openloginAdapter = new OpenloginAdapter({
clientId: "GSBPw1SWWUuh47SYCjiVjgV31Gvo3AZx",
adapterSettings: {
redirectUrl: "http://localhost:3000",
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
uxMode: "popup",
loginConfig: {
google: {
name: "Google",
verifier,
verifierSubIdentifier: "gamerse-google",
typeOfLogin: "google",
clientId:
"919754403806-444kmjgtvge17v09cgubtjehkdl4tspc.apps.googleusercontent.com",
},
twitter: {
name: "Twitter",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "gamerse-twitter", // Pass the Sub-Verifier here. eg w3a-a0-github
typeOfLogin: "twitter", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "Tm1JY2xJVGpzU09VY0dTSE94RS06MTpjaQ", // Pass the Auth0 `Client ID` here.
},
discord: {
name: "Discord",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "gamerse-discord", // Pass the Sub-Verifier here. eg w3a-a0-github
typeOfLogin: "discord", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "1114120776786919484", // Pass the Auth0 `Client ID` here.
},
},
},
});
const metamaskAdapter = new MetamaskAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
const coinbaseAdapter = new CoinbaseAdapter({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
sessionTime: 3600,
web3AuthNetwork: "testnet",
});
web3AuthInstance.configureAdapter(openloginAdapter);
web3AuthInstance.configureAdapter(metamaskAdapter);
web3AuthInstance.configureAdapter(walletConnectV2Adapter);
web3AuthInstance.configureAdapter(coinbaseAdapter);
return web3AuthInstance;
}
}
Hey
Can you try changing this to twitterauth0 and see if this works or not?
And same for discord, to discordauth0.
Also, I don’t see your connectTo code here.
Here’s how it would look like.
const web3authProvider = await web3auth.connectTo(
WALLET_ADAPTERS.OPENLOGIN,
{
loginProvider: "twitterauth0",
extraLoginOptions: {
domain: "https://dev-u0****tk.us.auth0.com/", // <-- Replace this with your auth0 domain.
verifierIdField: "email",
isVerifierIdCaseSensitive: false,
},
}
);
Hello @shahbaz ,
By changing twitter and discord you mean in typeOfLogin, like this-
twitter: {
name: "Twitter",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "gamerse-twitter", // Pass the Sub-Verifier here. eg w3a-a0-github
typeOfLogin: "twitterauth0", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "Tm1JY2xJVGpzU09VY0dTSE94RS06MTpjaQ", // Pass the Auth0 `Client ID` here.
},
discord: {
name: "Discord",
verifier, // Pass the Verifier name here. eg. w3a-agg-example
verifierSubIdentifier: "gamerse-discord", // Pass the Sub-Verifier here. eg w3a-a0-github
typeOfLogin: "discordauth0", // Pass the type of login provider. For Auth0, it's jwt and not Auth0.
clientId: "1114120776786919484", // Pass the Auth0 `Client ID` here.
},
Can you confirm on this ?
Also for connecting with social auths and wallets we are using this code-
import Navbar from "@/components/layout/Navbar";
import { verifySignature } from "@/utils/apiCalls";
import { MouseEventHandler, useEffect, useState } from "react";
import {
Connector,
useAccount,
useConnect,
useDisconnect,
useSignMessage,
} from "wagmi";
export default function Home() {
const { disconnect } = useDisconnect();
const { address, connector, isConnected } = useAccount();
const { data, signMessage, variables } = useSignMessage();
const { connect, connectors, error, isLoading, pendingConnector } =
useConnect();
const [hydrated, setHydrated] = useState(false);
const returnConnectionName = (conn: Connector) => {
return conn?.options?.loginParams?.loginProvider || conn?.name;
};
const returnValidatorForConnection = (conn: Connector) => {
if (conn.id === "web3auth") {
return (
conn?.options?.loginParams?.loginProvider ===
pendingConnector?.options?.loginParams?.loginProvider
);
}
return conn?.id === pendingConnector?.id;
};
const verifyUserSignature = async () => {
try {
const response = await verifySignature({
walletAddress: address,
message: variables?.message,
signature: data,
});
console.log(response);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
setHydrated(true);
}, []);
useEffect(() => {
signMessage({
message:
"message",
});
}, [address, isConnected]);
useEffect(() => {
if (data) {
verifyUserSignature();
}
}, [data]);
if (!hydrated) {
return null;
}
return (
<div className="main">
<Navbar />
{isConnected ? (
<div>
<div className="title">
Connected to{" "}
{connector?.options.loginParams?.loginProvider ||
connector?.name}
</div>
<div>{address}</div>
<button
type="button"
className="card"
onClick={disconnect as unknown as MouseEventHandler}
>
Disconnect
</button>
</div>
) : (
<>
<div className="flex flex-col">
{connectors &&
connectors.map((conn: Connector, index) => {
const connectionName =
returnConnectionName(conn);
const validator =
returnValidatorForConnection(conn);
return (
<div
className="flex-auto"
key={index as unknown as number}
>
<button
type="button"
disabled={!conn?.ready}
key={conn?.id}
onClick={() =>
connect({ connector: conn })
}
>
{connectionName}
{!conn?.ready && " (unsupported)"}
{isLoading &&
validator &&
" (connecting)"}
</button>
<br />
<br />
{validator && error && (
<div>{error.message}</div>
)}
</div>
);
})}
</div>
</>
)}
</div>
);
}
Let me know if any change is required in this code base.
No, I meant:
twitterauth0: {
name: "Twitter",
verifier,
verifierSubIdentifier: "gamerse-twitter",
typeOfLogin: "twitter",
clientId: ".......", // Pass the Auth0 `Client ID` here.
},
discordauth0: {
name: "Discord",
verifier,
verifierSubIdentifier: "gamerse-discord",
typeOfLogin: "discord",
clientId: ".....", // Pass the Auth0 `Client ID` here.
},
Thanks for the Answer, the problem is solved and login with Discord and twitter is now working properly.
One thing I wanted to ask is that when using social auths, we are not able to get user info. We tried using web3Instance.getUserInfo() but that also does not work. We think the reason could be wagmi. As we are using wagmi with web3auth.
Could you suggest how we can get the user info while still using wagmi ? You can see our logic as to how the login is currently set up in the above code shared.