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;
}