.then part of Firebase sendPasswordReset function not working?

Viewed 20

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;
0 Answers
Related