'React: reset password send email with reset password link to reset the password

I am trying to create a forgot password component which has an email field. The user will enter his email. Now, this component should send a password reset email to that entered email.

The user will then click on that email link in his mail client which will redirect the user to another password reset page where the user will enter his email, new-password, and confirm password.

how do I achieve this? So far, I have just able to create a forgot password page. Not sure, how to proceed.

Code for my forgot password:

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";

const ResetPassword = () => {
  const [email, setEmail] = useState("");

  const history = useHistory();

  const validateForm = () => {
    return email.length > 0;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (

      <div className="password-reset">
        <div className="password-reset-form-container">

          <div className="content">
            <Form className="password-reset-form">
              <h3 className="form-title">Password Reset</h3>
              <InputGroup>
                <InputGroupAddon
                  className="input-group-addon"
                  addonType="prepend"
                >
                  <i className="fa fa-user"></i>
                </InputGroupAddon>
                <Input
                  autoFocus
                  type="email"
                  aria-label="Username"
                  aria-describedby="username"
                  aria-invalid="false"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </InputGroup>

              <div className="form-actions">
                <Button
                  className="pull-left"
                  block
                  bssize="small"
                  type="submit"
                  onClick={() => history.push("/")}
                >
                  Cancel
                </Button>

                <Button
                  className="pull-right"
                  block
                  bssize="small"
                  disabled={!validateForm()}
                  type="submit"
                  onSubmit={handleSubmit}
                >
                  Reset
                </Button>
              </div>
            </Form>
          </div>
        </div>

      </div>
    </div>
  );
};

export default ResetPassword;

reactjs

Solution 1:^[1]

In order to implement this kind of logic, all you need is a mailing service, to send email to client's email address, and in it, you can supply the forgot password page page/Url for client to submit new password.

And there's a open source project that can auto send email and serve the purpose: go take a look at Nodemailer doc or their github repo

Youtuber Ben has a section of video specifically solves this problem: Fullstack React GraphQL TypeScript Tutorial

Solution 2:^[2]

You need to have an API endpoint that takes care of handling the process of sending a mail to the user related to the email.

The backend will provide a frontend link like http://localhost:3000/resetPassword/token

The token should be generated in the backend which will be sent back again with the new user password

Solution 3:^[3]

When the backend gives you frontend route something like: http://localhost:3000/resetPassword/resetToken add below line in your routes.

<Route exact path="/resetPassword/:resetToken" component={ResetPassword} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Harry

'React: reset password send email with reset password link to reset the password

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]