reactjs – Why I got 422 unprocessable content when I try to reset password?

Hello everyone I’m on resetting password with laravel and reactJs actually when I try to reset password I always get error 422: {password: [“The password confirmation does not match.”]}. But I’m sure the two passwords are the same this is the function in backend:

  public function reset(Request $request)
    {
        $request->validate([
            'token' => 'required',
            'email' => 'required|email',
            'password' => ['required', 'confirmed', RulesPassword::defaults()],
        ]);

        $status = Password::reset(
            $request->only('email', 'password', 'password_confirmation', 'token'),
            function ($user) use ($request) {
                $user->forceFill([
                    'password' => Hash::make($request->password),
                    'remember_token' => Str::random(60),
                ])->save();

                $user->tokens()->delete();

                event(new PasswordReset($user));
            }
        );

        if ($status == Password::PASSWORD_RESET) {
            return response([
                'message'=> 'Password reset successfully'
            ]);
        }

        return response([
            'message'=> __($status)
        ], 500);

    }


}

this is my frontend :

const ResetPasswordBasic = () => {
  const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT
  const [email, setEmail] = useState('');
  const [password, setPass] = useState('');
  const [token, setToken] = useState('');
  const [password_confirmation, setCPass] = useState('');



  const login = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('email', email);
    formData.append('password', password);
    formData.append('token', token);
    formData.append('pasword_confirmation', password_confirmation);


    axios.post(`${API_ENDPOINT}/api/reset-password`, formData).then(res => {

     res.data
    })
  }
  if (!isUserLoggedIn()) {

    return (
      <div className="auth-wrapper auth-basic px-2">
        <div className="auth-inner my-2">
          <Card className="mb-0">
            <CardBody>
              <Link className="brand-logo" to="https://stackoverflow.com/" onClick={e => e.preventDefault()}>
                <svg viewBox='0 0 139 95' version='1.1' height="28">
                  <defs>
                    <linearGradient x1='100%' y1='10.5120544%' x2='50%' y2='89.4879456%' id='linearGradient-1'>
                      <stop stopColor="#000000" offset="0%"></stop>
                      <stop stopColor="#FFFFFF" offset="100%"></stop>
                    </linearGradient>
                    <linearGradient x1='64.0437835%' y1='46.3276743%' x2='37.373316%' y2='100%' id='linearGradient-2'>
                      <stop stopColor="#EEEEEE" stopOpacity='0' offset="0%"></stop>
                      <stop stopColor="#FFFFFF" offset="100%"></stop>
                    </linearGradient>
                  </defs>
                  <g id='Page-1' stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id='Artboard' transform='translate(-400.000000, -178.000000)'>
                      <g id='Group' transform='translate(400.000000, 178.000000)'>
                        <path
                          d='M-5.68434189e-14,2.84217094e-14 L39.1816085,2.84217094e-14 L69.3453773,32.2519224 L101.428699,2.84217094e-14 L138.784583,2.84217094e-14 L138.784199,29.8015838 C137.958931,37.3510206 135.784352,42.5567762 132.260463,45.4188507 C128.736573,48.2809251 112.33867,64.5239941 83.0667527,94.1480575 L56.2750821,94.1480575 L6.71554594,44.4188507 C2.46876683,39.9813776 0.345377275,35.1089553 0.345377275,29.8015838 C0.345377275,24.4942122 0.230251516,14.560351 -5.68434189e-14,2.84217094e-14 Z'
                          id='Path'
                          className="text-primary"
                          style={{ fill: 'currentColor' }}
                        ></path>
                        <path
                          d='M69.3453773,32.2519224 L101.428699,1.42108547e-14 L138.784583,1.42108547e-14 L138.784199,29.8015838 C137.958931,37.3510206 135.784352,42.5567762 132.260463,45.4188507 C128.736573,48.2809251 112.33867,64.5239941 83.0667527,94.1480575 L56.2750821,94.1480575 L32.8435758,70.5039241 L69.3453773,32.2519224 Z'
                          id='Path'
                          fill="url(#linearGradient-1)"
                          opacity='0.2'
                        ></path>
                        <polygon
                          id='Path-2'
                          fill="#000000"
                          opacity='0.049999997'
                          points="69.3922914 32.4202615 32.8435758 70.5039241 54.0490008 16.1851325"
                        ></polygon>
                        <polygon
                          id='Path-2'
                          fill="#000000"
                          opacity='0.099999994'
                          points="69.3922914 32.4202615 32.8435758 70.5039241 58.3683556 20.7402338"
                        ></polygon>
                        <polygon
                          id='Path-3'
                          fill="url(#linearGradient-2)"
                          opacity='0.099999994'
                          points="101.428699 0 83.0667527 94.1480575 130.378721 47.0740288"
                        ></polygon>
                      </g>
                    </g>
                  </g>
                </svg>
                <h2 className="brand-text text-primary ms-1">BMS</h2>
              </Link>
              <CardTitle tag='h4' className="mb-1">
                Reset Password 🔒
              </CardTitle>
              <CardText className="mb-2">Your new password must be different from previously used passwords</CardText>
              <Form className="auth-reset-password-form mt-2" onSubmit={login}>

                <div className="mb-1">
                  <Label className="form-label" for="email">
                    Email
                  </Label>
                  <Input type="email" className="input-group-merge" id='email' onChange={(e) => setEmail(e.target.value)} autoFocus />
                </div>
                
                <div className="mb-1">
                  <Label className="form-label" for="token">
                    Token
                  </Label>
                  <Input type="token" className="input-group-merge" id='token' onChange={(e) => setToken(e.target.value)} autoFocus />
                </div>
                <div className="mb-1">
                  <Label className="form-label" for="password">
                    New Password
                  </Label>
                  <InputPassword className="input-group-merge" id='password' name="password" onChange={(e) => setPass(e.target.value)} autoFocus />
                </div>
                <div className="mb-1">
                  <Label className="form-label" for="password_confirmation">
                    Confirm Password
                  </Label>
                  <InputPassword className="input-group-merge" id='password_confirmation' name="password_confirmation" onChange={(e) => setCPass(e.target.value)} />
                </div>
                <Button color="primary" block>
                  Set New Password
                </Button>
              </Form>
              <p className="text-center mt-2">
                <Link to='/pages/login-basic'>
                  <ChevronLeft className="rotate-rtl me-25" size={14} />
                  <span className="align-middle">Back to login</span>
                </Link>
              </p>
            </CardBody>
          </Card>
        </div>
      </div>
    )

  }
  else {
    return <Redirect to="https://stackoverflow.com/" />
  }
}
export default ResetPasswordBasic

Thanks in advance for your help

Leave a Comment