Creating an external accessible API that's also accessible through the application itself...

I'm running into something that either I am unsure as to how Laravel handles its middleware/authentication -- or I am missing something :-).

I have installed Laravel Passport and in my api.php routes file I have

Route::resource('form.entries', 'API\FormEntryController')->only(['store', 'index', 'destroy'])->middleware('auth:api');
Route::resource('forms', 'API\FormController')->only(['index', 'store'])->middleware('auth:api');
Route::resource('form', 'API\FormController')->only(['show', 'destroy'])->middleware('auth:api');

so that should cover the specified methods to the specified endpoints (form.entries forms and form).

I have updated my API middleware to always return JSON, by adding the following middleware

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ApiJson {
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     *
     * @return mixed
     */
    public function handle( Request $request, Closure $next ) {
        $request->headers->set("Accept", "application/json");

        return $next( $request );
    }
}

in my app/http/middleware directory and updating in my kernel

 protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            \App\Http\Middleware\ApiJson::class,
            'bindings',
            \Barryvdh\Cors\HandleCors::class,

        ],
    ];

I am using react as the frontend of the laravel app, literally within the laravel app literally by running php artisan preset react and when, in that app I make a request to

const response = await fetch('http://my.tst/api/forms');
    formsData = response.json();

it returns

{"message":"Unauthenticated."}

I want to be able to access the routes from within the application, what am I doing wrong?

I tried to change the middleware to auth and api like so:

Route::resource('form.entries', 'API\FormEntryController')->only(['store', 'index', 'destroy'])->middleware('web', 'auth');
Route::resource('forms', 'API\FormController')->only(['index', 'store'])->middleware('web', 'auth');
Route::resource('form', 'API\FormController')->only(['show', 'destroy'])->middleware('web', 'auth');

because the passport documentation talks about routes it created as The JSON API is guarded by the web and auth middlewares; therefore, it may only be called from your own application. It is not able to be called from an external source.

I then tried adding ...

\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class

to my api middleware group to no success

My ultimate goals would be:

1. Get the API route to work for the react app within my Laravel application

nice to have 2. get the same API routes to work externally with folks who have permission via o-auth

...

the most interesting thing of all is that the route /oauth/client appears to work, and like I said before it's behind web and auth middleware, which leads me to believe it's an issue with the /api middleware(s)