Protecting Laravel Api with Auth Middleware

Hi,

We are using laravel breeze template for authentication, now we want to make few request to /api in our application.

Now some API will be protected, so we implemented following suggestion Laravel Stateless Rest API

Now when we are making request to /api/v1/get-students we are getting a popup asking to login (javascript popup)

Here is what we have done

created following model

File AuthenticateOnceWithBasicAuth

class AuthenticateOnceWithBasicAuth
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        return Auth::onceBasic() ?: $next($request);
    }
}

API file

routes/api.php

Route::prefix('v1')
    ->middleware(['auth.basic'])
    ->group(function () {
        Route::get('get-students', function () {
            return 'hello';
        })->name('get-api-students');
    });

Getting this when visiting the page protected by auth middleware

this page is making the API request