Use the network tab in your browser to inspect the request. Does it look correct? And what is the content of the response?
Jun 27, 2022
8
Level 1
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
Level 50
You misspelled pasword_confirmation in frontend. Fix it with double s then it should work.
Please or to participate in this conversation.