Syrine123's avatar

Why I got error 422 unprocessable Content When I try to reset password

Hello everyone, I'm on reactJs project with laravel, I want to reset password but I always get 422 error. the server side is working well because I tested it by postman and everything is fine but when I try to consume the api with reactJs I got error422 this my server side code:

    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 code :



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 (
    
                <h2 className='brand-text text-primary ms-1'>BMS</h2>
         
              <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='/' />
  }
}
export default ResetPasswordBasic

thanks in advance for your help

0 likes
8 replies
Sinnbeck's avatar

Use the network tab in your browser to inspect the request. Does it look correct? And what is the content of the response?

Syrine123's avatar

@Sinnbeck In the payload I got : email: syrinebh1996@gmail.com password: habib004#* token: 28df9b9a5be8e7fef1f2cbc9d550f615d20d2d5b1a9e8e7ea4ee97f78e07ae51 pasword_confirmation: habib004#* But I always got password confirmation does not match

Sinnbeck's avatar

@Syrine123 Are you able to post a screenshot so we can inspect it? You can upload to imgur

Niush's avatar
Niush
Best Answer
Level 50

You misspelled pasword_confirmation in frontend. Fix it with double s then it should work.

Syrine123's avatar

@Niush OOh I didn't pay attention thank u very much it works...BIG THANKS

Please or to participate in this conversation.