when I request for registration from react to laravel api , if there is no validation error then the registration works successfully but if validation error occurs then it shows 401 unauthorized error . Here is error details
But validation error shown in network tab.
Here register.js
import React, { useState } from "react";
import axios from 'axios';
import '../../css/login2.css'
import '../../css/login3.css'
function Register() {
const [register, setRegister] = useState({
email: '',
password: '',
confirmPassword: '',
error_list: []
});
const handleInput = (e) => {
e.persist();
setRegister({
...register,
[e.target.name]: e.target.value
})
}
const submit = (e) => {
e.preventDefault();
const data = {
email: register.email,
password: register.password,
confirmPassword: register.confirmPassword
}
axios.get("sanctum/csrf-cookie").then(response => {
axios.post("api/register").then(res => {
if(res.data.status === 'success') {
console.log(res.data);
}
else{
setRegister({
...register,
error_list: res.data.validation_errors
})
console.log(res.data);
}
},
(error) => {
console.log(error);
})
});
}
return (
<section className="section-register d-flex justify-content-center align-items-center">
<div className="box" style={{ width: "20rem", }}>
<h3 className="text-center font-weight-bold mb-4">Register</h3>
<form onSubmit={submit}>
<div className="form-group">
<input type="email" onChange={handleInput} className="form-control" placeholder="Email Address"
name="email" />
<span className="text-danger">{register.error_list.email}</span>
</div>
<div className="form-group">
<input type="password" onChange={handleInput} className="form-control"
placeholder="Password" name="password" />
<span className="text-danger">{register.error_list.password}</span>
</div>
<div className="form-group">
<input type="password" onChange={handleInput} className="form-control"
placeholder="Confirm Password" name="confirmPassword" />
<span className="text-danger">{register.error_list.confirmPassword}</span>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary btn-block btn-rounded">Continue</button>
</div>
</form>
<div className="or mt-4 mb-4">
<span className="">OR</span>
</div>
<div className="text-center">
<a href="/login" className="btn btn-outline-primary btn-rounded clever"
style={{ textDecoration: "none !important", }}>Login</a>
</div>
</div>
</section>
);
}
export default Register;
Here validation file
<?php
namespace App\Http\Controllers\API;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class AuthController extends Controller
{
public function register(Request $request)
{
$validator = Validator::make($request->all(), [
'email' => 'required|email|unique:users',
'password' => 'required',
'confirmPassword' => 'required|same:password',
]);
if ($validator->fails()) {
return response()->json(['validation_errors' => $validator->errors()], 401);
} else {
$user = new User();
$user->email = $request->email;
$user->password = bcrypt($request->password);
$user->save();
$token = $user->createToken($user->email . '_token')->plainTextToken;
return response()->json([
'status' => 'success',
'token' => $token,
'user' => $user,
'message' => 'User Registered Successfully',
], 200);
}
}
}