sendPasswordResetEmail failed: First argument "email" must be a valid string

Question

I'm doing resetting passwords with firebase auth, but I got the error. Below is my code that I'm using Reactjs with Redux, and Redux-Form. Kindly check it and give me your solution, thank you so much.

[// Libs
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { reduxForm, SubmissionError, Form } from "redux-form";
import { Row, Alert, Col, Divider } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

// Image

// Components
import Footer from "@src/components/layout/footer";
import Input from "@components/input";
import Button from "@src/components/button";
import LoginHeader from "./components/form/header";

// Utils
import { validate } from "@src/helpers";
import {
  LOGIN_REQUEST,
  LOGIN_FAILURE,
  FORGET_PASSWORD_SUBMIT_RULES,
} from "@src/constants/authentication";
import { login } from "@src/actions/authentication";
import styled from "styled-components";
import { Link } from "react-router-dom";
import Title from "@src/components/title";
import { forgetPassword } from "@src/services/authentication";
import { auth } from "@src/services/firebase";

const WrapperContainer = styled.div`
  height: 100vh;
  background-size: 100%;
  background-color: #fff;
  background-repeat: repeat;
  background-position: center;

  .login-content-group {
    margin-top: 10px;
    margin-bottom: 20px;

    small.display-block {
      font-size: 70% !important;
    }
  }
`;

class ForgetPassword extends Component {
  onSubmit = async (email) => {
    try {
      await auth.sendPasswordResetEmail(email);
      alert("Password reset link sent!");
    } catch (err) {
      console.error(err);
      alert(err.message);
    }
  };
  render() {
    const { handleSubmit, errorLogin, loading } = this.props;
    return (
      <WrapperContainer>
        <Row
          type="flex"
          align="middle"
          justify="center"
          style={{ height: "93vh" }}
        >
          <Col xxl={2} xl={3} md={4} sm={8} xs={10}>
            <div className="p-3 rounded box-shadow">
              <Form onSubmit={handleSubmit(this.onSubmit)}>
                <LoginHeader />
                {errorLogin && (
                  <Alert
                    message={errorLogin.message}
                    type="error"
                    className="mb-3"
                  />
                )}
                <Input
                  name="email"
                  placeholder="Email"
                  prefix={<UserOutlined />}
                  autoFocus
                />
                <Button loading={loading} type="submit" block>
                  Submit
                </Button>
                <Divider />
                <Link to="../login">Log In</Link>
              </Form>
            </div>
          </Col>
        </Row>
        <Footer />
      </WrapperContainer>
    );
  }
}

ForgetPassword.propTypes = {
  handleSubmit: PropTypes.func,
  errorLogin: PropTypes.object,
  loading: PropTypes.bool,
};

const mapStateToProps = (state) => {
  return {
    errorLogin: state.error\[LOGIN_FAILURE\],
    loading: state.request\[LOGIN_REQUEST\],
  };
};

const forgetPasswordReduxForm = reduxForm({
  form: "forgetPasswordForm",
})(ForgetPassword);

export default connect(mapStateToProps)(forgetPasswordReduxForm);][1]

When I submitted it, I got an error as the message below:

=> sendPasswordResetEmail failed: First argument "email" must be a valid string.

Answer 1

The onSubmit of a form does not automatically get passed the value of a field in that form that was changed. It may get an event, but even that event will only point to the form itself, not to the email field.

The solution is to store the value of the email field in the state, as shown in the ReactJS documentation on Forms:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value}); //  set the value of the field to the state
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value); //  use the value from the state
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}