Why my laravel Passport Auth not working in browser?

Question

I have a new laravel application with Passport authentication. my code for login works perfectly in my insomnia application.

Login:

public function login(Request $request)
{
   if(Auth::attempt(['username' => request('username'), 'password' => request('password')]))
   { 
      $user = Auth::user(); 
      $success['token'] =  $user->createToken('AppName')-> accessToken; 
      return response()->json(['authstat'=>'Authorized','user'=>Auth::user()->id,'access_token'=>$success]); 
   } 
   else
   { 
      return response()->json(['authstat'=>'Unauthorized']); 
   } 
}

Insomnia Test

http://api-auth.test/api/auth/login

//json request 
{
    "username":"wen",
    "password":"12345678"
}

but when I tried it in my browser, it always return Unauthorized even I pass the correct username and password. here is my ajax request from the front-end.

<script type="text/javascript">
        
    $("#loginfrm").on("submit", function(e){
        event.preventDefault();
        var username = $("#username").val();
        var password = $("#password").val();
        
        $.ajax({
            type: "POST",
            url: "http://api-auth.test/api/auth/login",
            contentType: "application/json",
            Accept: "application/json",
            dataType: 'json',
            data:{
                "_token": "{{ csrf_token() }}",
                "username": username,
                "password": password
            },
            complete: function (data) {
                console.log(data.responseJSON["authstat"]);
            }
        });
    });
      
</script>

Any suggestions? Thanks.

Answer 1

Your Login method is expecting request('username') input but your $.ajax is sending email instead.