How to reset password using React and Redux?

Question

I'm trying to reset password using React and Redux. I got an url to email address and when I paste it into browser everything is fine - site with fields to input new password is rendering. The problem is when I want to set new password. Response from Django server is 200 OK but I have this error in the browser after submit:

Access to XMLHttpRequest at 'http://127.0.0.1:8000/password-reset/confirm/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field token is not allowed by Access-Control-Allow-Headers in preflight response.

My password.js file in actions directory (Redux):

export const resetPassword = (password, token) => (dispatch, getState) => {

  // Headers
  const config = {
    headers: {
      'Content-Type': "application/json",
      token
    },
  }

  const body = JSON.stringify({ password })

  // Post request to API
  axios.post('http://127.0.0.1:8000/password-reset/confirm/', body, config)
  .then(res => {
    console.log(res);
     dispatch({
      type: RESET_PASSWORD,
      payload: res.data
    })
  })
  .catch(err => {
    console.log(err.response.status);
  })
}

NewPasswordPage.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { resetPassword } from '../actions/password';

class NewPasswordPage extends Component {
  state = {  
    password: '',
    token: ''
  }

  static propTypes = {
    resetPassword: PropTypes.func.isRequired,
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value })
    console.log(this.state);
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log("OK NEW PASSWORD")

    const { password, token } = this.state;

    this.props.resetPassword(password, token)
  }

  render() { 
    return (  
      <div className="col-md-6 m-auto">
        <div className="card card-body mt-5">
          <h2 className="text-center">New password</h2>
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label>New password</label>
                <input
                  type="password"
                  className="form-control"
                  name="password"
                  onChange={this.handleChange}
                  value={this.state.password}
                />
            </div>
            <div className="form-group">
              <label>Token</label>
                <input
                  type="text"
                  className="form-control"
                  name="token"
                  onChange={this.handleChange}
                  value={this.state.token}
                />
            </div>
            <div className="form-group">
              <button type="submit" className="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  resetPassword: state.password
})
 
export default connect(mapStateToProps, { resetPassword })(NewPasswordPage);

At this time I am trying to solve the problem and just paste the token in input. I don't know how to get the token from url - if you have any idea that would be great.

URL:

http://localhost:3000/password-reset/5e570e6856cbe8a935f06f8f52

Endpoint in App.js:

<Route path='/password-reset/:token' component={NewPasswordPage} />

Answer 1

The issue is due to CORS. The hostname 127.0.0.1:8000 is different than localhost:3000. When the hostnames are different then the a CORS error is thrown by default. This is a browser security feature to prevent malicious attacks from different domains spooging API requests. To fix the error you need to disable CORS. This will allow 27.0.0.1 to communicate with localhost

TO enable CORS on a django server: How can I enable CORS on Django REST Framework

If you are running an express and a node end-point: https://expressjs.com/en/resources/middleware/cors.html

It sounds like you either need to enable CORS on the server or make sure that the correct access control header is set. Within Django somewhere

Access-Control-Allow-Headers: *

Answer 2

Try changing the ip 27.0.0.1:8000 to localhost:8000.

You dont have to set the token in the state as it is not going to change inside the state.

handleSubmit = e => {
 e.preventDefault();
 console.log("OK NEW PASSWORD")

 const { password } = this.state;

 this.props.resetPassword(password, this.props.match.params.token);
}

To receive the path param in you component, you need to connect your component with withRouter HOC from react-router so that you can access the Router props and get the path params from the match props as this.props.match.params.token.

const NewPasswordPage = connect(
 mapStateToProps,
 mapDispatchToProps
)(NewPasswordView);

export default withRouter(NewPasswordPage);