如何使用 p 标签显示身份验证错误

Question

如何以不同于警报的方式向用户显示身份验证错误？例如：用户将输入一个错误的密码，并且 p 标签会告诉他，他输入了不正确的密码。使用 Firebase v9 和 React。

一些代码：

    import React from 'react'
import { Link, useNavigate } from "react-router-dom";
import { UserAuth } from '../context/AuthContext';
import { useState } from 'react';



const Signin = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const { signIn } = UserAuth();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('')
    try{
        await signIn(email, password)
        navigate("/");
    } catch (e) {
      setError(e.message)
      alert(e.message)
      
    }
  }

  return (
    <div className='Signin'>Signin
    
    <form onSubmit={handleSubmit}>
         
            <label>Email</label>
            <input onChange={(e) => setEmail(e.target.value)} type="email"/>
            <label>password</label>
            <input onChange={(e) => setPassword(e.target.value)} type="password"/>
            <button type="submit">Sign up</button>
            <p className='errorp'></p>
            
        </form>
    
    </div>
  )
}

导出默认登录

谢谢！

Answer 1

类似于{error && <p className='errorp'>{error}</p>}

如何使用 p 标签显示身份验证错误

How to display auth errors with p tag

javascript

firebase

reactjs

firebase-authentication