Keep user logged in on refresh

Moralis General
#1

Except this refresh issue, all other things work fine.

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

image
image908×269 44.8 KB

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

#2

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
#3

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

#4

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
#5

It is just web page, built with next,

#6

Did you make it work meanwhile?

#7

Still not, struggling.

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

This action has same effect with F5 from navigator?

#8

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

#9

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
#10

I have tried below method:

image

No idea what to do, next

#11

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(
            'provider',
        ) as MoralisType.Web3ProviderType;
        if (
            !isWeb3Enabled &&
            !isWeb3EnableLoading &&
            provider &&
            web3Status === 'disconnected'
        ) {
            // @ts-ignore
            setWeb3Status('pending');
            enableWeb3({
                provider,
                chainId,
                onSuccess: () => setWeb3Status('only_web3'),
            });
        }
    }, [isWeb3Enabled, isWeb3EnableLoading, web3Status]);