Adding reset password functionality to react / redux login functionality

I used the following login with react/redux tutorial to build a signup / signin functionality into my React app, however I did not realize until recently that I now also need a reset-password / forgot-password functionality.

This feature is not a part of the tutorial at all, and I am simply wondering if anybody has any suggestions as to how I can go about this?

Let me know if I can share any info about my app that will help with this, or if there's a better place to post this type of question. I'm holding off on sharing more on the app as I think it's redundant given the info in the tutorial is nearly exactly how my signup / signin is setup.

Thanks!

After the user enters the proper credentials that you state (usually username, email, or both)

1. Make an api call to your backend that creates a password reset token. Store it in the database and, in one form or another, associate it with the user (usually it's the same database entry).

2. Send an email to the user with a link that has the password reset token embedded into it. Have a route in your react-router routes that will handle the url you link to.

3. Have the route mount a component that has a componentDidMount, which takes the token and makes an api to the backend to validate the token.

4. Once validated, open a ui element in the react component that allows the user to set a new password

5. Take the new password, password confirmation, and reset token and make an api call to the backend to change the password.

6. Delete the reset token in the backend after successful password change

// in your routes file
<Route path="/password_reset/:token" component={PasswordResetValidator}/>

//
class PasswordResetValidator extends React.Component {
  state = {password: '', passwordReset: '', isValidated: false}

  async componentDidMount() {
    const response = await validatePasswordResetToken(this.props.token)
    if (response.ok) {
      this.setState({ isValidated: true })
    } else {
      // some error
    }
  }

  handleSubmit = () => {
    const { token } = this.props
    const { password, passwordReset } = this.state
    sendPasswordResetData({password, passwordReset, token})
    // probably want some confirmation feedback to the user after successful or failed attempt
  }

  render() {
    if(this.state.isValidated) {
      return (
        <div>
          <input />
          <input />
          <button onClick={this.handleSubmit}>Set new password</button>
        <div>
      )
    }
    return // something while token is being validated
        
  }
}

Obviously you need to make your own text input handlers. You should also have error handling, and good ui feedback to the user. But ultimately, that's all at your discretion.

Best of luck