Hi, thanks for answering.
Yeah, simply that I build the app in React, where everything works, and I use Django as my backend in production. When I move it there, to production, Web3Auth no longer works.
Package versions:
“web3auth/base”: “^8.6.1”,
“web3auth/ethereum-provider”: “^8.6.1”,
“web3auth/modal”: “^8.6.1”,
(some more)
“devDependencies”: {
“esbuild-plugins/node-globals-polyfill”: “^0.2.3”,
“rollup/plugin-replace”: “^5.0.5”,
“types/react”: “^18.3.3”,
“vitejs/plugin-react”: “^4.2.1”,
“eslint”: “^8.57.0”,
“eslint-plugin-react”: “^7.34.1”,
“eslint-plugin-react-hooks”: “^4.6.0”,
“eslint-plugin-react-refresh”: “^0.4.6”,
“vite”: “^5.2.0”
[of course, in my code there are @ before the packages—excluding here because “mentioning users error”]
Code snippets
is TSX
import React, { useEffect, useState } from “react”;
import { Web3Auth } from “web3auth/modal”;
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from “web3auth/base”;
import { EthereumPrivateKeyProvider } from “web3auth/ethereum-provider”;
import Button from ‘-@mui/material/Button’;
import “./ConnectWeb3Auth.css”;
const clientId = “xxx”;
const chainConfig = {
chainId: “0x1”, // 0x1 for Mainnet
rpcTarget: “https://rpc.ankr.com/eth”,
chainNamespace: CHAIN_NAMESPACES.EIP155,
displayName: “Ethereum Mainnet”,
blockExplorerUrl: “https://etherscan.io/”,
ticker: “ETH”,
tickerName: “Ethereum”,
logo: “Bitmap”,
};
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig: chainConfig },
});
const web3auth = new Web3Auth({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
});
const Web3AuthComponent = ({ onLogin, onLogout }) => {
const [provider, setProvider] = useState(null);
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const init = async () => {
try {
if (!web3auth.provider) {
await web3auth.initModal();
setProvider(web3auth.provider);
if (web3auth.connected) {
const accounts = await web3auth.provider.request({ method: 'eth_accounts' });
setLoggedIn(true);
onLogin(accounts[0], disconnect); // Pass the account address and disconnect function to the parent component
}
}
} catch (error) {
console.error(error);
}
};
init();
}, []);
const login = async () => {
const web3authProvider = await web3auth.connect();
setProvider(web3authProvider);
if (web3auth.connected) {
const accounts = await web3auth.provider.request({ method: ‘eth_accounts’ });
setLoggedIn(true);
onLogin(accounts[0], disconnect); // Pass the account address and disconnect function to the parent component
}
};
const logout = async () => {
try {
await web3auth.logout();
setProvider(null);
setLoggedIn(false);
onLogout(); // Call onLogout when logged out
} catch (error) {
console.error(“Error logging out:”, error);
}
};
const disconnect = async () => {
try {
await web3auth.logout();
localStorage.clear(); // Clear local storage to forget session completely
setProvider(null);
setLoggedIn(false);
onLogout(); // Call onLogout when logged out
} catch (error) {
console.error(“Error disconnecting:”, error);
}
};
return (
{loggedIn ? (
<Button
variant=“contained”
onClick={logout}
sx={{
borderRadius: 2,
backgroundColor: ‘#7ec6fa’,
‘&:hover’: {
backgroundColor: ‘#646cffaa’,
},
}}
>
Logout
) : (
<Button
variant=“contained”
onClick={login}
sx={{
borderRadius: 2,
backgroundColor: ‘#7ec6fa’,
‘&:hover’: {
backgroundColor: ‘#646cffaa’,
},
}}
>
Connect Email
)}
{loggedIn && (
<Button
variant=“contained”
onClick={disconnect}
sx={{
borderRadius: 2,
backgroundColor: ‘#ff6666’,
‘&:hover’: {
backgroundColor: ‘#cc0000’,
},
marginLeft: 2,
}}
>
Disconnect Account
)}
);
};
export default Web3AuthComponent;
Thank you, good idea 
,
Grateful for any insights,
Sending my very best!
