When asking for help in this category, please make sure to provide the following details:
-
SDK Version(package.json):
“@web3auth/base”: “^9.0.0”,
“@web3auth/ethereum-provider”: “^9.0.0”,
“@web3auth/modal”: “^10.0.5”,
“@web3auth/solana-provider”: “^9.7.0”, -
Platform: ReactJS in web browser
-
Browser Screenshots:
-
Browser Console Screenshots:
-
Error message:
Error 400: redirect_uri_mismatch
- My code use @web3auth/modal:
import { Web3AuthProvider } from '@web3auth/modal/react';
import web3AuthContextConfig from './contexts/web3auth/web3authContext';
import { WagmiProvider } from '@web3auth/modal/react/wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
<Web3AuthProvider config={web3AuthContextConfig}>
<QueryClientProvider client={queryClient}>
<WagmiProvider> {children}</WagmiProvider>
</QueryClientProvider>
</Web3AuthProvider>
const web3AuthContextConfig = {
web3AuthOptions: {
clientId: clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
uiConfig: {
mode: 'dark',
defaultLanguage: language,
borderRadiusType: 'medium',
displayInstalledExternalWallets: true,
displayExternalWalletsCount: false,
},
modalConfig: {
connectors: {
[WALLET_CONNECTORS.AUTH]: {
label: 'auth',
loginMethods: {
google: {
name: 'Google',
showOnModal: true,
authConnectionId: 'w3a-google-bth',
},
email_passwordless: {
name: 'Email',
showOnModal: true,
authConnectionId: 'w3a-email-btn',
},
apple: {
name: 'Apple',
showOnModal: false,
},
facebook: { showOnModal: false },
twitter: { showOnModal: false },
discord: { showOnModal: false },
},
showOnModal: true,
},
[WALLET_CONNECTORS.METAMASK]: {
label: 'metamask',
showOnModal: false,
},
},
hideWalletDiscovery: true,
},
},
};
import { useWeb3AuthConnect } from "@web3auth/modal/react";
const { connect } = useWeb3AuthConnect();
<button className="login-button" onClick={() => connect()}>
When connecting to login with google, error “Error 400: redirect_uri_mismatch” occurs
I can’t find the cause, can you help me, thank you!