When asking for help in this category, please make sure to provide the following details:
Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.
here is my code
import { WEB3AUTH_NETWORK } from ‘@web3auth/modal’;
import { Web3AuthProvider } from ‘@web3auth/modal/react’;
const layout = () => {
const web3AuthContextConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
// mfaLevel: ‘none’,
// ssr: true,
},
};
const modalStates = useAppSelector((state) => state.app);
return (
{/* /}
{/ */}
{children}
{modalStates?.monetiseDataModal && <MonetiseDataModal onClose={() => dispatch(setMonetiseDataModal(false))} />}
{/* </WagmiProvider> */}
{/* </WalletServicesProvider> */}
</Web3AuthProvider>
);
};
export default DashboardLayout;
Thank you for sharing the details and the screenshot, Waqas! I see you’re using the Web3Auth Plug and Play (PnP) Web SDK and are encountering an error that prevents you from retrieving the private and public keys.
To help the support team assist you efficiently, could you please provide the following additional details:
Additionally, if you are using custom authentication (such as your own verifier or JWTs), please let us know:
Your screenshot is helpful, but if you could also share the full error message from the browser console, that would be great.
In the meantime, here are some general troubleshooting steps:
You can also refer to the official documentation for initialization and login examples:
Once you provide the requested details, the support team will be able to guide you further!
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.
Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours
and for connection…
// import { useWeb3Auth } from ‘@web3auth/modal-react-hooks’;
import { useWeb3Auth } from ‘@web3auth/modal/react’;
import Image from ‘next/image’;
import Link from ‘next/link’;
import { usePathname } from ‘next/navigation’;
import { FC, useEffect, useState } from ‘react’;
import { Button } from ‘@/components/shared/buttons/button’;
import ProfileDropdown from ‘@/components/shared/dropdowns/profile-dropdown’;
import { toaster } from ‘@/components/shared/toaster’;
import { Typography } from ‘@/components/shared/typography’;
import { content } from ‘@/constants’;
import { useConnectWallet } from ‘@/hooks/api/patient/useConnectWallet’;
import { useAppSelector } from ‘@/redux/hooks’;
import {
copyAddressToClipboard,
handleGetPrivateKey,
handleGetPublicKey,
handleWalletAddress,
handleWalletBalance,
truncateAddress,
} from ‘@/utils/web3-auth-helpers’;
import MobileHeader from ‘…/mobile-header’;
const MainHeader: FC = () => {
const pathname = usePathname();
const [showInfo, setShowInfo] = useState(false);
const showMobileHeader = useAppSelector((state) => state.app.showMobileHeader);
const userData = useAppSelector((state) => state.auth.user);
// —
const [walletAddress, setWalletAddress] = useState<string | null>(null);
const [walletBalance, setWalletBalance] = useState<string | null>(null);
const [walletPublicKey, setWalletPublicKey] = useState<string | null>(null);
const { web3Auth, provider, isConnected, status } = useWeb3Auth();
const { mutate } = useConnectWallet();
const getWalletAddress = async () => {
const walletAddress = await handleWalletAddress(provider);
setWalletAddress(walletAddress ?? null);
return walletAddress ?? null;
};
const getPublicKey = async () => {
const publicKey = await handleGetPublicKey(provider);
setWalletPublicKey(publicKey ?? null);
return publicKey ?? null;
};
const getWalletBalance = async () => {
const balanceInEth = await handleWalletBalance(provider, walletAddress);
setWalletBalance(balanceInEth ?? null);
};
useEffect(() => {
if (isConnected) {
if (
walletAddress &&
walletPublicKey &&
walletBalance &&
userData?.walletAddress === ‘’ &&
userData?.walletPublicKey === ‘’
) {
mutate({
publicKey: walletPublicKey,
walletAddress,
});
} else {
getWalletAddress();
getPublicKey();
getWalletBalance();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
isConnected,
walletAddress,
walletPublicKey,
walletBalance,
provider,
userData?.walletAddress,
userData?.walletPublicKey,
]);
const handleConnect = async () => {
try {
if (!isConnected) {
await web3Auth?.connect();
toaster(‘Wallet connected’, ‘success’);
} else {
copyAddressToClipboard(walletAddress || ‘’);
await web3Auth?.logout();
setWalletAddress(null);
}
} catch (error: any) {
if (error?.message?.toLowerCase().includes(‘user closed’)) {
toaster(‘Wallet connection cancelled by user’, ‘error’);
} else {
console.error(‘Wallet Connection error:’, error);
}
}
};
return (
font-semibold hover:text-light-blue ${pathname === item.href ? 'text-light-blue !font-bold' : 'text-dark-blue'}}max-w-[130px] !rounded-lg text-nowrap !font-normal !text-md !w-fit !px-6 !py-3 ${!isConnected ? 'xs:!px-6 xl:!px-6' : 'lg:!px-3 xl:!px-6'}}export default MainHeader;