Laravel sanctum error {"message":"Unauthenticated."}

Question

Iam trying to use sanctum package to set authentication part or it in my laravel project.

Here is my Login code on LoginController

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsUser;
use Auth;
use IlluminateSupportFacadesValidator;
// use Response;

class LoginController extends Controller
{
    //
    public function login(Request $request){
        $validator = Validator::make($request->all(), [
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);

        if($validator->fails()){
            return response()->json(['status_code'=>400, 'message'=>'Bad request']);
        }

        $credentials = request(['email', 'password']);

        if(!Auth::attempt($credentials)){
            return response()->json(['status_code'=>500, 'message'=>'Unauthorized']);
        }

        $user = User::where('email', $request->email)->first();
        $tokenResults = $user->createToken('authToken')->plainTextToken;
        return response()->json(['status_code'=>200, 'token'=>$tokenResults]);
    }

    public function logout(Request $request){
        $request->user()->currentAccessToken()->delete();
        return response()->json(['status_code'=>200, 'message'=>'Token deleted successfully']);
    }
}

My vlogin form on login.vue is like this:

<template>
     <div class="flex flex-wrap w-full justify-center items-center pt-56">
        <div class="flex flex-wrap max-w-xl">
            <div class="p-2 text-2xl text-gray-800 font-semibold"><h1>Login to your account</h1></div>
            <div class="p-2 w-full">
                <label for="email">Your e-mail</label>
                <input class="w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2" placeholder="Email" type="email" v-model="form.email">
            </div>
            <div class="p-2 w-full">
                <label for="password">Password</label>
                <input class="w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2" placeholder="Password" type="password" v-model="form.password" name="password">
            </div>
            <div class="p-2 w-full mt-4">
                <button @click.prevent="loginUser" type="submit" class="flex text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Login</button>
            </div>
        </div> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            form:{
                email: '',
                password: ''
            },
            errors: []
        }
    },
    methods:{
         loginUser(){
             axios.post('/api/login', this.form).then(() =>{
                 this.$router.push({ name: "Dashboard"}); 
             }).catch((error) =>{
         this.errors = error.response.data.errors;
            })
         }
    }
}
</script>

And my route on api.php is like this:

Route::post('login', [LoginController::class, 'login']);

Am getting this error on the network response tab so who can help me to know what I have done wrong.

{"message":"Unauthenticated."}

question from:https://stackoverflow.com/questions/65867316/laravel-sanctum-error-messageunauthenticated

Answer 1

You're missing name="email" in your email input field:

<input class="w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2" placeholder="Email" type="email" v-model="form.email" name="email">