People searching “Sanctum API token Vue” store a bearer token in the Inertia app. Sanctum’s own guidance, written up in the Sanctum guide, is that your own SPA uses the session cookie. A token is for a client that cannot use that cookie.
TL;DR
- A first-party Vue SPA uses the session cookie.
- createToken is for a mobile client or another product.
- Do not put the token in
localStorageon the Vue starter kit, and do not sendAuthorization: Bearerfrom an Inertia form.
The fix#
The user model uses Sanctum’s trait, not Passport’s. The Passport comparison is why those two traits do not stack.
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens;
}Issue a token from a route the mobile client calls after it has authenticated. Return the plain text once:
$token = $request->user()->createToken('phone')->plainTextToken;
return response()->json(['token' => $token]);The Inertia pages keep using auth and the session. They never read this JSON.
What to avoid#
Gotcha
Do not put the token in localStorage on the Vue starter kit, and do not send Authorization: Bearer from an Inertia form. You would be maintaining two logins for one browser.
FAQ#
How do I issue a Sanctum token without breaking the SPA?
A first-party Vue SPA uses the session cookie. createToken is for a mobile client or another product.
What goes wrong with Sanctum API token Vue?
Many developers store a bearer token in the Inertia app. Do not put the token in localStorage on the Vue starter kit, and do not send Authorization: Bearer from an Inertia form.
