Moralis.authenticate({signingMessage:"hello"}) Issue with React

Hey guys iā€™m using latest hereā€™s my package json
ā€œmoralisā€: ā€œ^0.0.44ā€,
ā€œreact-moralisā€: ā€œ^0.2.2ā€

Hereā€™s how Iā€™m using Moralis through a hoc

import hocify from 'hocify'
import { useMoralis, useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis"
import { create, all } from 'mathjs'
import { useHistory } from 'react-router-dom';

const useHocify = (props) => {
    const {history} = useHistory(); 
    const Web3Api = useMoralisWeb3Api()
    const {authenticate, logout, isAuthenticated,authError, hasAuthError,user, enableWeb3,isAuthenticating, isWeb3Enabled, Moralis, web3} = useMoralis()
    return {Web3Api,history,authenticate, logout, isAuthenticated,authError, hasAuthError,user, enableWeb3, isAuthenticating, isWeb3Enabled, Moralis, web3};
};
  

const withMoralis = hocify(useHocify);
export default withMoralis

And hereā€™s how Iā€™m using it in a component

import React from 'react'
import { connect } from 'react-redux'
import withMoralis from "../../reusable/Hoc"

class TestComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
    componentDidMount(){
   
    }
    componentDidUpdate(prevProps) {

      }
    componentWillUnmount(){
    }

    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { hasError: true };
    }

    componentDidCatch(error, info) {
      console.log(error);
      console.log(info);
    }
render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>Something went wrong.</h1>;
        }else{
          return (
            <>
            {this.props.isAuthenticated && this.props.isWeb3Enabled  ? <>
<div><p>logged in </p></div>
</> : <>
<div><p>Not logged in </p></div>
<div><p onClick={async ()=>{
await this.props.Moralis.authenticate({signingMessage:"hello"}).then(async () => {
    if (!this.props.authError) {
        this.props.enableWeb3().then(async () => {
            console.log ("enabled web3 bruh...");
        });
    } else {
        console.log("Login Failed: " +this.props.authError.message);
    }
});
}}>Test</p></div>
</> })
 }
}


const mapStateToProps = state => ({
  loginModalVisibility: state.loginModalVisibility,
  sesionCreated: state.sesionCreated
});

const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    toggleAlert: (_title,_message)=>{
      dispatch({type: 'set', alertVisibility: true})
    },
    toggleModal: ()=>{
      dispatch({type: 'set', loginModalVisibility: true})
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withMoralis(TestComponent))

So whatā€™s the issue ?
The issue is that when using

await this.props.Moralis.authenticate({signingMessage:"hello"})

I do get the sign in message appearing on meta mask however when you click the metamask button ā€œSignā€ and it passes through it doesnā€™t updated the isAuthenticated getter and my react html doesnā€™t apply the changes i need to refresh the page in order for the getter to work.

If I use

await this.props.authenticate({signingMessage:"hello"})

Everything works as expected the dom reloads and isAuthenticated getā€™s set to true however thereā€™s no sign in message :smiley: ā€¦
Any. help ?

It may be something similar to this solution: I built an nft game in 12 hours [SOLVED], as in maybe this syntax is not supported: await this.props.Moralis.authenticate({signingMessage:"hello"}).then()

Nope thatā€™s not the issue tried it as that as well itā€™s not updating the getters and setters which are exposed as

const {authenticate, logout, isAuthenticated,authError, hasAuthError,user, enableWeb3,isAuthenticating, isWeb3Enabled, Moralis, web3} = useMoralis()

As in it is not updating isAuthenticated and all the others.
It updates them once i refresh the page but on earlier releases i didnā€™t had to do that and it worked as expected.

Are you using the latest Moralis version as dependency to react?

1 Like

ā€œmoralisā€: ā€œ^0.0.44ā€,
ā€œreact-moralisā€: ā€œ^0.2.2ā€
Yup

The Moralis ContextValue properties donā€™t get updated when I use the Moralis.authenticate() method.

export interface MoralisContextValue {
    Moralis: Moralis;
    isInitialized: boolean;
    authenticate: (options?: AuthenticateOptions) => Promise<void>;
    logout: () => Promise<void>;
    signup: Signup;
    login: Login;
    auth: Authentication;
    authError: Error | null;
    isAuthenticated: boolean;
    isUnauthenticated: boolean;
    isAuthenticating: boolean;
    hasAuthError: boolean;
    isLoggingOut: boolean;
    isAuthUndefined: boolean;
    setUserData: (data: SetUserData) => Promise<void>;
    user: Moralis.User | null;
    _setUser: (user: Moralis.User) => void;
    userError: null | Error;
    isUserUpdating: boolean;
    refetchUserData: () => Promise<void>;
    enableWeb3: (options?: Web3EnableOptions) => void;
    web3: Moralis.Web3 | null;
    isWeb3Enabled: boolean;
    web3EnableError: Error | null;
    isWeb3EnableLoading: boolean;
}