axios register request shows unauthorized for null input

Viewed 29

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);
        }
    }
}
0 Answers
Related