how to display to user an auth error differently than with alert? For example: User will type a bad password, and a p tag will tell him, that he typed uncorrect password. Using Firebase v9 and React.
Some code:
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>
)
}
export default Signin
Thank you!
CodePudding user response:
Something like {error && <p className='errorp'>{error}</p>}