Keep user logged in on refresh

Except this refresh issue, all other things work fine.

Not sure, what happened, why after refresh, object of user and account lost?

I mean, end user, refresh web page, in navigator.

maybe the info is not saved in local storage?
that is where from the data is initialised on a page refresh in vanilla js

1 Like

Do you mean, I should store the user and account in localStorage.
Then what’s next step?

what kind of application is that?

I would expect it to work by default in react, as it works by default in vanilla js

you can try with refetchUserData:

1 Like

It is just web page, built with next,

Did you make it work meanwhile?

Still not, struggling.

          <Button onClick={() => refetchUserData()} disabled={isUserUpdating}>
            Refetch user data

This action has same effect with F5 from navigator?

No, that should only refresh the user data.
I think that you can force an equivalent of F5 with window.href I’m case that you want to do that

You need to store something in localStorage e.g. user from useMoralis that is used on app/component load (if it exists) to run enableWeb3 from useMoralis. You can use account and render it to test this (on refresh).

1 Like

I have tried below method:


No idea what to do, next

On app load you can use if (localStorage.getItem(...) and if true, run enableWeb3.

For example web3uikit does it in a similar way if you check out the demo and connect your wallet.

When you connect a wallet, in their WalletModal component they use:

window.localStorage.setItem('provider', provider);

And in their ConnectButton component:

useEffect(() => {
        // to avoid problems in Next.JS apps because of window object
        if (typeof window == 'undefined') return;

        const provider = window.localStorage.getItem(
        ) as MoralisType.Web3ProviderType;
        if (
            !isWeb3Enabled &&
            !isWeb3EnableLoading &&
            provider &&
            web3Status === 'disconnected'
        ) {
            // @ts-ignore
                onSuccess: () => setWeb3Status('only_web3'),
    }, [isWeb3Enabled, isWeb3EnableLoading, web3Status]);