Keep logged in status after refreshing a page (React)

Moralis General
#1

Hi, I am creating an app with react Moralis and I’ve come into a problem
The logging part of my app is basically on the homepage and if I refresh the page here my status of authentification is still true.
But when I go to another page (I use react-router-dom) and I refresh this page after refreshing it seems like Moralis no longer sees me as authenticated despite still being connected according to Metamask wallet.

 const { logout, authenticate, isAuthenticated, user } = useMoralis();
<button onClick={() => authenticate({ signingMessage:"x", onError: (error) => setErrorMessage(error.message)})}>Connect Wallet</button>

Button I use to login using Moralis on Homepage

    const {isAuthenticated, user, Moralis} = useMoralis();

on other page I will use the isAuthenticated to check if I am or not but after refreshing the variable == false all the time I need to go back on the homepage to get it back to true. How can I manage to avoid that?
Best regards,

#2

Hi, a quick update on this post, in my useEffect hook I added the isAuthenficated dependencies and now it works properly.

const {isAuthenticated, user, Moralis, refetchUserData} = useMoralis();

useEffect(async() => {
        const getUserInfo = async () => {
            setIsLoading(true)
            if(isAuthenticated === true){
                await refetchUserData();
                let tmp = await user.get('accounts')[0];
                setUserAddress(tmp);
            }
            else{
                setIsLoading(false);
                return setErrorMessage("You need to be logged in to view this page");
            }
        };
        getUserInfo();
    }, [isAuthenticated])

However I have notice a few things (not sure if it’s me or bug or working the intended way) but the Moralis.onAccountChanged() does not work.
Also if you disconnect from MM wallet Moralis will keep your status as logged in because of local storage however it should not so how can we do this? Like when user disconnect not from clicking my U.I button but through the extension I need to handle this to disconnect the user from the app (so delete the local storage in other words)

EDIT: So do we need to user like ether.js on top of Moralis to handle this kind of things?

#3

In latest SDK this got changed. Try the below code.
window.ethereum.on("chainChanged", async (chain) => { });

I think you need to use Moralis.User.logOut(); to completely disconnect. If it is manually disconnected from metamask, if throws an error when you try to make any transaction.

#4

I will try later, but something I don’t understand is that I created a button that basically shows login if user is not logged or it will show log out if user is logged in. When I manually disconnect from metamask using the extension, this button will automatically update to login (since I was already logged in) but my page will not rerender. I don’t understand why.

EDIT: I tried to do

window.ethereum.on("disconnect", async()=> {
        console.log('test')
        await logout();
    })

as well as event accountsChanged it works but it’s not the best sometimes it crashes when I disconnect through MM and try to reconnect on my app

#5

Final update: for people trying to manage users signing out through the Metamask app and not with a button you can just add some logic with account (object/prop?) from the useMoralis hooks
Basically do something like:

const {isAuthenticated, Moralis, account,} = useMoralis();


{isAuthenticated && account ?
        <div>
            <h1> Hello {account}</h1>
            </div>
        </div>
        :
        <div>
            <p style={{color:'red'}}>{errorMessage} You need to be logged in to view this page</p>
        </div>
        }

You can combine this with the useEffect hook and call account in the dependencies array.
Thanks all good luck.