Web3 return null after refresh browser on react moralis

I console log web3 after login with await authenticate({signingMessage: " login"});. It return Web3Provider. But when I refresh the browser, web3 will return null when I console log it.
I code on react and next js.

const {
        authenticate,    
        isAuthenticated,
        user,
        Moralis,
        web3,
        web3Library,
        enableWeb3,
        isWeb3Enabled,
        isWeb3EnableLoading,
    } = useMoralis();

What happens if you try to enableWeb3 after the page is refreshed?

When try to enableWeb3, it return Web3Provider. But I wondering that I have to enableWeb3 everytime after I refresh page, right?

you can try to enable it every time after refresh

For anyone still struggling with this. The best solution is to put await enableWeb3 in your App.js file.

function App(){
const { enableWeb3 } = useMoralis()

useEffect(async () =>{
  await enableWeb3()
},[])

   return(
    some stuff......
   )
}

This will keep Web3 enabled through out the whole site. Hope this helps. Don’t forget to import useEffect and put a blank array.

1 Like

@DevWill another solution is to use the ConnectButton component from Web3UIKit which will call enableWeb3() behind the scenes on refreshes so you don’t have to manually do it.

1 Like