CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authentication
Christopher Koziol
Christopher Koziol

Reputation: 213

Firebase sendResetPasswordEmail firing twice?

I'm trying to have a user enter their email address in a text field, and click a submit button to send them a reset link using firebase's reset method. Only issue is, I can get it to work one way, but it fires twice, and fires before the button is even clicked. I have a commented out function that should work, but isn't working for some reason. Any reason why the commented out one isn't working? Still new to react so any help is appreciated!

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() {

    const navigate = useNavigate();

    const [email, setEmail] = useState('')
    const auth = getAuth();


 //   const triggerResetEmail = async () => {
 //       await sendPasswordResetEmail(auth, email)
 //           .then(() => {
 //               navigate('/signin')   //   Issue, keep reseaching
 //           })
 //           .catch((error) => {
 //               const errorCode = error.code;
 //               const errorMessage = error.message;
//
 //           });
 //   }

    sendPasswordResetEmail(auth, email)
        .then(() => {
            // Password reset email sent!
            navigate('/signin')
            // ..
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            // ..
        });

    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={() => sendPasswordResetEmail}>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='ghost' onClick={() => navigate('/signin')}>Log In</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default ForgotPassword;

Upvotes: 2

Views: 172

Answers (1)

windowsill
windowsill

Reputation: 3649

You are calling sendPasswordResetEmail(auth, email) in the function body of your functional component. Which means it will be called every time the component renders. Just like if you put console.log("rendering") in your function body.

const someFunction = () => {
    sendPasswordResetEmail(auth, email);
};

and

<button onClick={someFunction} />

Upvotes: 2

Related Questions