I have a basic forgot password page set up, and I'm trying to implement the sendPasswordResetEmail function. I've been able to get it firing correctly, but any time I implement some sort of 'navigate' functionality after success, it doesn't work. Regardless of fail or success, after submission, it automatically jumps to the landing page with a '?' at the end of the url. Any ideas why this may be happening?
Code:
import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';
import { getAuth, sendPasswordResetEmail } from "firebase/auth";
import '../scss/pages/ForgotPage.scss'
function ForgotPassword() {
document.title = 'Acquired | Forgot Password';
const navigate = useNavigate();
const navigateTo = (path) => {
navigate(path)
}
const [email, setEmail] = useState('')
const auth = getAuth();
const forgotPassword = (Email) => {
sendPasswordResetEmail(auth, Email)
.then(function () {
console.log('success');
}).catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(errorMessage);
});
}
return (
<div className='pageBackground'>
<div className='loginContainer'>
<div className="regForm-container sign-in-container">
<form className='regForm' action="/">
<h1 className='formHeader'>Enter your login email</h1>
<input className='loginInput' type="email" placeholder="Email" onChange={(a) => setEmail(a.target.value)} value={email} required />
<button className='ghost' onClick={() => forgotPassword(email)}>Reset</button>
</form>
</div>
<div className="overlay-container">
<div className="overlay">
<div className="overlay-panel overlay-right">
<h1 className='formHeader'>Don't sweat it</h1>
<h5 className='regP'>Forgetting a password happens to the best of us!</h5>
<h5 className='regP'>But just in case you remembered</h5>
<button className='ghostOther' onClick={() => navigate('/signin')}>Log In</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default ForgotPassword;