Vue3 + Ionic + Sanctum mobile authenthication gives back 419

Question

I am trying to perform a simple token authentication on my Vue3 Ionic mobile app. I have two separate repositories - one the API in Laravel 10 backend and the other one is the Vue3 Ionic app, and I am using Sanctum for my Laravel 10 API auth.

This is my API auth endpoint:

public function createToken(CreateToken $request): JsonResponse
    {

        Log::info('LOGIN MOBILE REQUEST', [
            'request' => $request->all(),
            'token' =>  $request->user
                ->createToken($request->deviceName)
                ->plainTextToken
        ]);
        return response()->json([
            'token' => $request->user
                ->createToken($request->deviceName)
                ->plainTextToken
        ]);
    }

The problem is that when I am hitting my auth endpoint on mobile app very strangely I am getting 419 back which is CSRF thing which is for session based auth. I don't understand how and why I am getting 419 from mobile app. When I am testing on mobile phone I am simply launching it via Android studio on my phone. I am also using Expose for my API and the URL from Expose goes into mobile app config. All the API calls work just fine it's just I cannot make Laravel understand this has nothing to do with CSRF.

To make it a bit stranger - when I test the same login funcitonality on the desktop I get my token no problem even though apart from installing and initual setup I didn't do any extra configuration of anything.

Does anyone know what could it be?

Answer 1

I know what it was. In case someone else has the same issue. Out of habbit I followed the documentation and enabled \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, in the app/Http/Kernel.php as my app will also need web auth as well.

So that will have to be dealt with some conditional middleware where I will apply it based on the platform I guess.