Reputation: 43
// UserLoginProvider.js
export const UserLoginProvider = ({ children }) => {
const [walletAddress, setWalletAddress] = useState("");
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const getUserLoggedIn = async () => {
let isLogin = await isLoggedIn();
setLoggedIn(isLogin);
};
getUserLoggedIn();
}, [walletAddress]);
// ... other state and functions
return (
<UserLoginContext.Provider value={value}>
{children}
</UserLoginContext.Provider>
);
};
// ConnectBtn.js
export default function ConnectBtn() {
// ... state and functions from useUserLogin()
const {
setWalletAddress,
setIsLoading,
setIsError,
setWallet,
connectButtonRef,
setLoggedIn,
} = useUserLogin();
const { disconnect } = useDisconnect();
const { refetchProducts } = useProducts();
const clientBackend = {
clientId: "d41dd66624d7e93e047a1285c00e9dd2",
secretKey: undefined,
};
const saveInDatabaseHandler = async (
walletAddress: string,
wallet: Wallet
) => {
try {
setIsLoading(true);
const email = await getUserEmail({ client: clientBackend });
if (!email) {
disconnect(wallet);
}
const payload = {
email: email,
wallet_address: walletAddress,
};
const response = await CreateUserService(payload);
if (response && response.token) {
localStorage.setItem("token", response.token);
}
setWalletAddress(walletAddress);
setWallet(wallet);
await refetchProducts();
} catch (err) {
console.log(err);
setIsError(true);
disconnect(wallet);
} finally {
setWalletAddress("");
setIsLoading(false);
}
};
const handleDisconnect = async () => {
localStorage.removeItem("token");
setWalletAddress("");
setIsLoading(false);
setWallet(null);
await refetchProducts();
};
return (
<ConnectButton
// ... configuration props
auth={{
isLoggedIn: async (address) => {
let userLoggedIn = await isLoggedIn();
return userLoggedIn;
},
doLogin: async (params) => {
await login(params);
},
getLoginPayload: async ({ address }) => generatePayload({ address }),
doLogout: async () => {
await logout();
},
}}
onConnect={async (wallet) => {
const acc = wallet.getAccount();
await saveInDatabaseHandler(acc.address, wallet); //This request will go to the backend first to generate the user if user is not present.
}}
onDisconnect={handleDisconnect}
/>
);
}
Is this approach of combining Thirdweb's ConnectButton with custom authentication logic (including server-side checks and a separate database for user management) a valid and recommended way to implement user login and wallet connection in a Thirdweb-based application? Are there any potential issues or best practices we should be aware of when implementing this pattern?
Its working but sometimes giving , 429 too many embedded Third web calls, and producing too many request error from sentry.
Upvotes: 0
Views: 90