Moralis connects to wallet but still doesn't authenticate

Moralis General
#1

Hi
So I’m trying to authenticate the user using Sequence wallet via Wallet connect.
I am using web3uikit’s ConnectButton to help me use WalletConnect to connect to Sequence wallet.

This is my index.js file (the necessary imports have been made)

ReactDOM.render(
    <React.StrictMode>
        <MoralisProvider
            appId=process.env.APP_ID
            serverUrl=process.env.SERVER_URL
            initializeOnMount={false}
        >
            <NotificationProvider>
                <BrowserRouter>
                    <App />
                </BrowserRouter>
            </NotificationProvider>
        </MoralisProvider>
    </React.StrictMode>,
    document.getElementById("root")
);

And in my app.js file

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

    useEffect(() => {
        const isAuth = () =>
            !isAuthenticated
                ? authenticate({ provider: "walletconnect" })
                      .then((user) => log(user))
                      .catch((e) => log(e))
                : null;
        isInitialized && isAuth();
    }, [isInitialized, isAuthenticated]);

 return (
        <>
            {log("isAuthenticated", isAuthenticated)}
            {isAuthenticated ? (
                // redirect to user dashboard
            ) : (
                <div>
                    <h1>Please connect wallet to continue</h1>
                    <ConnectButton moralisAuth={false} />
                </div>
            )}
        </>
    );
}

I have used the same approach before but with Metamask, and it seems to turn isAuthenticated to true after signing in.
But now the issue is that even if I login, the web3uikit’s ConnectButton displays my account name and money, but it still keeps isAuthenticated to false

#2

In order to use env variables in react, You must create custom environment variables beginning with REACT_APP_. You can read more here
You should have such in your .env file

REACT_APP_APP_ID = 
REACT_APP_SERVER_URL =

So you can have

            appId=process.env.REACT_APP_APP_ID
            serverUrl=process.env.REACT_APP_SERVER_URL
#3

Ok so I tried a few more things

I simply hardcoded the values, and then when I call authenticate it works with Metamask

But when I call authenticate({ provider: "walletconnect" }), it stores all the account info in the browser’s local storage, but it won’t update isAuthenticated to true

#4

Using wallet connect, you need to sign the message in order to update isAuthenticated. And make sure you have @walletconnect/web3-provider installed to use wallectconnect properly.