How can I show error message when user email and password doesn't matched

Question

I'm trying to add firebase email-password authentication using firebase and react firebase hooks. I want to show an error message when user try to sign in and the user email and password doesn't matched.

  const [user] = useAuthState(auth);

  const [signInWithEmailAndPassword, error] = useSignInWithEmailAndPassword(auth);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const getEmail = (event) => {
    setEmail(event.target.value);
  };
  const getPassword = (event) => {
    setPassword(event.target.value);
  };
  

  if (error) {
    setEmail("");
    setPassword("");
  }

  return (
      <div className="form-area">        
        <input
          onBlur={getEmail}
          type="email"
          placeholder="Your Email"
        />
        <input
          onBlur={getPassword}
          type="password"
          placeholder="Password"
          required
        />
        <input
          onClick={() => signInWithEmailAndPassword(email, password)}
          type="submit"
          value="Log In"
        />
    </div>
  );
};

Answer 1

Try this out instead of the if statement,

 const [user] = useAuthState(auth);

  const [signInWithEmailAndPassword, user, loading, error] =
    useSignInWithEmailAndPassword(auth);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const getEmail = (event) => {
    setEmail(event.target.value);
  };
  const getPassword = (event) => {
    setPassword(event.target.value);
  };

  return (
      <div className="form-area">        
        <input
          onBlur={getEmail}
          type="email"
          placeholder="Your Email"
        />
        <input
          onBlur={getPassword}
          type="password"
          placeholder="Password"
          required
        />
         {error?.message ? (
            <p
              className="text-danger"
              style={{
                fontSize: "12px",
                fontWeight: "bolder",
                textAlign: "left",
              }}
            >
              Wrong password. Try again!
            </p>
          ) : (
            ""
          )}
        <input
          onClick={() => signInWithEmailAndPassword(email, password)}
          type="submit"
          value="Log In"
        />
    </div>
  );
};
 

Following is the documentation of React Firebase Hooks. You can find about displaying error message there.

https://github.com/CSFrequency/react-firebase-hooks/tree/master/auth#useauthstate