Is there a method to verify whether or not an email address has been verified before logging in? Using the firebase authentication hooks "useCreateUserWithEmailAndPassword", I'm sending verification links to the email. It's working perfect. However, I want to verify the email address. The user is already logged in, even if he does not check his email. I want the user to confirm their email address the he'll be logged in.
const navigate = useNavigate(); const [ createUserWithEmailAndPassword, user, loading, error, ] = useCreateUserWithEmailAndPassword(auth, {sendEmailVerification: true});
`const handleSubmit = event => {
event.preventDefault();
const email = event.target.email.value;
const password = event.target.password.value;
createUserWithEmailAndPassword(email, password);
console.log(email, password);
}`
Anyone can use a fake email to log in and visit a protected route. But you can manage this by email verification. Not only just log in, they have to verify their email also and only after this they can visit the protected route. To implement this, set an email verification condition. Here's the code:
const RequireAuth = ({ children }) => {
const [sendEmailVerification] = useSendEmailVerification(auth);
const [user, loading] = useAuthState(auth);
const location = useLocation();
if (loading) {
return <Spinner animation='border' variant='primary'></Spinner>
}
if (!user) {
return <Navigate to='/signIn' state={{ from: location }} replace></Navigate>
}
if (!user?.emailVerified) {
return (
<div className='w-50 my-5 mx-auto'>
<h2 className='text-danger'>Your Email is not verified</h2>
<Button onClick={async () => sendEmailVerification()} variant="primary">Verify your email</Button>
</div>
)
}
return children;
Take a useState and initialised it with user come from useAuthState.and then load data to ui. and then check emailVerified.if its true then you can show it ui to the user to check email