Firebase Auth - Reset Password (ReactJS)

Question

I am trying to create a button where a user clicks it and gets sent the "reset password" email from Firebase.

It's coming up with the following error:

t {code: "auth/invalid-email", message: "The email address is badly formatted.", a: null}
a: null
code: "auth/invalid-email"
message: "The email address is badly formatted."

However, the email address seems to be the correct format if I log it in console.

Here's my code:

import React, { Component } from 'react';
import '../../Profile.scss'
import { connect } from 'react-redux';

const firebase = require("firebase");

const forgotPassword = (Email) => {
firebase.auth().sendPasswordResetEmail(Email)
    .then(function () {
        alert('Please check your email...')
    }).catch(function (e) {
        console.log(e)
    }) 
}

  
const UserInformation = (props) => {
    const {profile} = props;
   
    return (
        <div className = "UserInformation">
                        <h1> User Information </h1>
                        <div className = "InfoBox">
                        <h3> Full name</h3>
                        <p> {profile.firstName} {profile.lastName}</p>
                        </div>

                        <div className = "InfoBox">
                        <h3> Email Address</h3>
                        <p> {profile.email} </p>
                        <input type = "button" onClick = {forgotPassword(toString(profile.email))} value = "Reset Password"/>
                        </div>
                       
        </div>
    )
}

const mapStateToProps = (state) => {
    console.log(state)
    return {
        profile: state.firebase.profile
    }
}

    
  export default connect(mapStateToProps)(UserInformation)

I'm pretty new to Firebase auth and I'd appreciate any help!

question from:https://stackoverflow.com/questions/65884496/firebase-auth-reset-password-reactjs

Answer 1

The onClick parameter should contain a function reference, but your code (onClick = {forgotPassword(toString(profile.email))}) executes the function when the component is loaded.

Can you change it to: onClick={() => forgotPassword(toString(profile.email))}.