Axios catch response in react when calling Laravel API

Question

Hi I'm working with a Laravel API for the backend and making a Login with Redux in React. Well I call the API and I want the laravel API to pass a precise error of what is happening for example the user doesn't exist. The problem is when I want to acces the mesage in the catch part of the call made with axios

Laravel Login part

public function login(Request $request){
        
        $loginData = $request->validate([
            'name' => 'required',
            'password' => 'required'
        ]);

        if (!auth()->attempt($loginData)) {
            return response(["message" => "I want to acces this message in the catch part of Axios"], 401);
        }

        $accessToken = auth()->user()->createToken('authToken')->accessToken;

        return response(['user' => auth()->user(), 'access_token' => $accessToken]);

    }

React call with axios

Axios({
                method: 'post',
                url: '/login',
                data: {
                  name: name,
                  password: password,
                }
            }).then(function (response) {
                dispatch(authSuccess(response.data.access_token, response.data.user.id));
            })
            .catch(function (response) {
                console.log(response)
            });

Response I get in the web console

xhr.js:177 POST http://127.0.0.1:8000/api/login 401 (Unauthorized)

and I want to get the message i pass in the Laravel API ("I want to acces this message in the catch part of Axios")

Answer 1

in your controller try to return response like this

public function login(Request $request){
        
        $loginData = $request->validate([
            'name' => 'required',
            'password' => 'required'
        ]);

        if (!auth()->attempt($loginData)) {
            return response()->json([
                'status' => 'error',
                'message'    => 'I want to acces this message in the catch part of Axios',
            ], 401);
        }

        $accessToken = auth()->user()->createToken('authToken')->accessToken;

        return response(['user' => auth()->user(), 'access_token' => $accessToken]);

    }

In axios catch the error

.catch((error) => {
                // console.log(error.response.data.status);
                console.log(error.response.data.message);
                
            })

Answer 2

You can use error object received from server here, this is a sample code to get further process error object :

 Axios({
          method: 'post',
           url: '/login',
          data: {
             name: name,
             password: password,
                }
            }).then(function (response) {
                dispatch(authSuccess(response.data.access_token, response.data.user.id));
            })
             .catch(err => { 
        if (err.response) { 
          // client received an error response (5xx, 4xx)
        } else if (err.request) { 
          // client never received a response, or request never left 
        } else { 
          // anything else 
        } 
      })