I am using `passport` and `passport-local-mongoose` for authentication in my react app . The login and registration works without any problem . But the reset password / change password is not working properly . I have the reset password component as follows

**`ResetPassword.js`**

```
var React = require("react");
var helpers = require("../utils/helpers");

class ResetPassword extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      oldpassword: "",
      newpassword: "",
      confirmpassword: "",
      usertype: "",
    }
    this.handleUserChange = this.handleUserChange.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }

componentDidMount() {
    helpers.getCurrentUser().then(function(response) {
      if (response !== this.state.username) {
        this.setState({ 
            usertype: response.data.userType
        });
      }
    }.bind(this));
}

  handleUserChange(event) {
     this.setState({ [event.target.name]: event.target.value});
  }

  handleLogin(event) {
      // just in case we need it
      // event.preventDefault();
  }

    render() {
      return (
        <div className="container">
            <div className="row" id="loginForm">
                <div className="col m6 offset-m3 s12">
                    <div className="card-panel">
                        <div className="row grey lighten-5">
                            <div className="col s12 center">
                                <h4 className="blue-text text-darken-1"><img id="logo" src="/assets/images/logo.png"/><span className="hide-on-med-and-down">Reset Password</span></h4>
                            </div>
                        </div>
                        <form action="/manager/reset-password" method="POST" onSubmit={this.handleLogin}>
                            <div className="row">
                                <div className="col s12">
                                    <input
                                        placeholder="Old Password"
                                        type="password"
                                        className="validate"
                                        value={this.state.oldpassword}
                                        name="oldpassword"
                                        onChange={this.handleUserChange}
                                        required />
                                </div>
                            </div>
                            <div className="row">
                                <div className="col s12">
                                    <input
                                        placeholder="New Password"
                                        type="password"
                                        className="validate"
                                        value={this.state.newpassword}
                                        name="newpassword"
                                        onChange={this.handleUserChange}
                                        required />
                                </div>
                            </div>
                            <div className="row">
                                <div className="col s12">
                                    <input
                                        placeholder="Confirm New Password"
                                        type="password"
                                        className="validate"
                                        value={this.state.confirmnewpassword}
                                        name="confirmpassword"
                                        onChange={this.handleUserChange}
                                        required />
                                </div>
                            </div>

                             <div className="row">
                                <div className="col s12">
                                    <input
                                        placeholder="userType"
                                        type="hidden"
                                        className="validate"
                                        value={this.state.usertype}
                                        name="usertype"
                                        onChange={this.handleUserChange}
                                        required />
                                </div>
                            </div>
                            <div className="row">
                                <div className="col s12">
                                    <button className="btn waves-effect waves-light btn-large blue accent-3 loginButtons" type="submit" value="Submit" name="action">Submit<i className="material-icons right">send</i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
      );
    }
};

module.exports = ResetPassword;

```

and in **`server.js`** file 

```
  var passport = require("passport");
  var LocalStrategy= require("passport-local");
  var passportLocalMongoose = require("passport-local-mongoose");
  //Passport
  app.use(passport.initialize());
  app.use(passport.session());

//change password (passport-local-mongoose)
  app.post('/manager/reset-password', function(req, res, next){
    passport.changePassword(req.body.oldpassword,req.body.newpassword, function(err) {
            if (err){
                return next(err) 
            }
            else {
              if (req.body.userType === "manager" || req.body.userType === "su") {
                res.redirect("/manager");
              } else {
                res.redirect("/employee");
              }
            }
    }); 
  });

```

When submitting it throws me error :

> 
> TypeError: passport.changePassword is not a function
>  at C:\Users\admin\Documents\react\_lms\server.js:212:14
>  at Layer.handle [as handle\_request] (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\layer.js:95:5)
>  at next (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\route.js:137:13)
>  at Route.dispatch (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\route.js:112:3)
>  at Layer.handle [as handle\_request] (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\layer.js:95:5)
>  at C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:281:22
>  at Function.process\_params (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:335:12)
>  at next (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:275:10)
>  at serveStatic (C:\Users\admin\Documents\react\_lms\node\_modules\serve-static\index.js:75:16)
>  at Layer.handle [as handle\_request] (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\layer.js:95:5)
>  at trim\_prefix (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:317:13)
>  at C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:284:7
>  at Function.process\_params (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:335:12)
>  at next (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:275:10)
>  at jsonParser (C:\Users\admin\Documents\react\_lms\node\_modules\body-parser\lib\types\json.js:101:7)
>  at Layer.handle [as handle\_request] (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\layer.js:95:5)
>  at trim\_prefix (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:317:13)
>  at C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:284:7
>  at Function.process\_params (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:335:12)
>  at next (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\index.js:275:10)
>  at textParser (C:\Users\admin\Documents\react\_lms\node\_modules\body-parser\lib\types\text.js:60:7)
>  at Layer.handle [as handle\_request] (C:\Users\admin\Documents\react\_lms\node\_modules\express\lib\router\layer.js:95:5)
> 
> 
> 

What is the reason ? how to solve it ? 

**`package.json`** 

```
{
  "name": "react-shift-scheduler",
  "version": "1.0.0",
  "description": "Employee management system",
  "main": "server.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "start": "node server",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "author": "HB,NC,AR,CS",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.15.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "dotenv": "^4.0.0",
    "express": "^4.14.0",
    "express-session": "^1.14.2",
    "json-loader": "^0.5.7",
    "loader-utils": "^1.1.0",
    "moment-timezone": "^0.5.21",
    "mongoose": "^4.7.3",
    "morgan": "^1.7.0",
    "nodemailer": "^4.6.8",
    "passport": "^0.4.0",
    "passport-google-auth": "^1.0.1",
    "passport-google-oauth": "^1.0.0",
    "passport-linkedin-oauth2": "^1.4.1",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^4.5.0",
    "path": "^0.12.7",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "react-live-clock": "^2.0.3",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.3.13",
    "babel-loader": "^7.0.0-alpha.3",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "react-hot-loader": "^4.3.6",
    "webpack": "2.1.0-beta.25"
  }
}

```