spa-auth | single page application with authentication support | Runtime Evironment library

TLDR; see image below 3 - is that possible and how?

I read about API protection - Sanctum & Passport, but none of these seems what I can accomplish with my app since it's a little specific and simplified in a way.

For example, Sanctum's way of authenticating sounds like something I'd like, but without the /login part (i have a custom /auth part, see below.): https://laravel.com/docs/8.x/sanctum#spa-authenticating.

If the login request is successful, you will be authenticated and subsequent requests to your API routes will automatically be authenticated via the session cookie that the Laravel backend issued to your client.

My app has no login per se - we log-in the user if they have a specified cookie token verified by the 3rd party API (i know token-auth is not the best way to go, but it is quite a specific application/use). It's on /auth, so Sanctum's description above could work, I guess if I knew where to fiddle with it. Our logic:

1. VueJS: a mobile device sends an encrypted cookie token - app reads it in JS, sends it to my Laravel API for verification.
2. Get the token in Laravel API, decrypt, send to 2nd API (not in my control), verifying the token, and sends back an OK or NOT OK response with some data.
3. If the response was OK, the user is "logged-in."
4. The user can navigate the app, and additional API responses occur - how do I verify it's him and not an imposter or some1 accessing the API directly in the browser?

I guess the session could work for that, but it's my 1st time using Laravel, and nothing seemed to work as expected. Also, sessions stored in files or DB are not something I'm looking forward to if required.

For example, I tried setting a simple session parameter when step 3 above happened and sending it back, but the session store was not set up, yet it seemed at that point. Then I could check that session value to make sure he's the same user that was just verified.

For an easier understanding of what I'm trying to accomplish and if it's even feasible:

The main question is, what is the easiest way to have basic API protection/authentication/verification whilst sending the token for authentication to 3rd party API only on 1st request (and if the app is reopened/refreshed of course) - keeping in mind, that no actual users exist on my Laravel API.

Or would it be best to do the token-auth to the 3rd party API on each request?

I have a Laravel website served by Valet on backend.test and a Nuxt SPA on nuxt.backend.test:3005. When I try to authenticate to Sanctum with Nuxt Auth module, I get the CORS error below:

Access to XMLHttpRequest at 'http://backend.test/login' from origin 'http://nuxt.backend.test:3005' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How can I fix it ?

Laravel configuration

config/cors.php:

Trying out Laravel 8 (SPA with Sanctum and VueJS) and strangely I cannot get my Vue SPA to make a successful csrf-cookie request as shown in the documentation(Laravel - SPA Authentication). I have setup my Vue SPA to use base url as /api and I have added 'prefix' => 'api' in my config/sanctum.php. But the request returns a 404 response. If I remove my base url /api from my Vue config and send the csrf-cookie request, I am getting a success (200) response. Am I missing something ?

I have a Laravel powered api locally hosted at http://tenant.api.hydrogen.local and an Angular 9.2 SPA which is being served on http://localhost:8100. I recently installed Laravel Sanctum for authentication and followed instructions for SPA's listed in the docs but the CSRF token is not attached to requests from the SPA and I therefore receive a CSRF token mismatch error.

As instructed I make an initial call to //abc.api.hydrogen.local/sanctum/csrf before subsequently attempting to login in:

I am using oidc-client in angular. following this Tutorial

I am following https://www.scottbrady91.com/Angular/SPA-Authentiction-using-OpenID-Connect-Angular-CLI-and-oidc-client and https://www.scottbrady91.com/Angular/Migrating-oidc-client-js-to-use-the-OpenID-Connect-Authorization-Code-Flow-and-PKCE to implement OIDC in SPA(Angular)

I am using aspboilerplate integrated IdentityServer

I've set up everything as per the above articles and I was able to navigate to external auth provider and was also able to enter the required credentials.

While redirecting to angular I am getting 400 - Bad request. Here are the details

Call back URL :

I have a React SPA in the same Laravel project. The login/signup/logout and all other js views are in the js folder and use axios api calls for all POST/GET requests. I want to use the default Laravel session based web authentication for the embedded SPA, since it's in the same project folder and it will be the only javascript client accessing it. This api does not need to be open to the public, just for this react app, and it's an SPA for the speed and good user experience instead of full page reloads.

I've tried using Passport before, and for over a month, I still can't get it to work as intended. I do not want to deal with tokens, access tokens, refresh tokens, revoking tokens, CSRF, etc. Just the out of the box simple Laravel session based auth that works so easily on web, but want it to work on my react app. The only blade file is the index.blade.php which includes the react app.js

Any idea how we can accomplish this?

UPDATE 1:

After implementing @ceejayoz's suggestion:

You have to add the various Session/Cookie middlewares in app/Http/Kernel.php (stuff like \Illuminate\Session\Middleware\StartSession::class) to the API routes.

I added to $middlewareGroups.api to match the web middleware in app/Http/Kernel.php: