Sanctum or Passport for a Vue app

“Sanctum or Passport?” has a one-line answer, and most Vue apps never need the second half of it. Here is Laravel’s own rule, then the full Passport setup with an Inertia consent screen for the day a third party really does need OAuth.

Laravel’s own split is the one to use. If the app must speak OAuth 2, use Passport. If you are authenticating a single-page app, a mobile app, or issuing API tokens, use Sanctum. Sanctum does not support OAuth 2. The Passport docs state that directly.

The Vue starter kit’s login is a session. Your own Vue SPA on another origin is also a session cookie, which is Sanctum for a Vue SPA. A bearer token in that article is for a phone or a script you own. Passport is the next step only when some other product redirects a user to you, gets a code, and exchanges it for a token. The stack choice is Laravel and Vue in 2026.

Install Passport#

php artisan install:api --passport

That publishes and runs the OAuth migrations and creates the encryption keys. Then User implements Passport’s contract and uses Passport’s trait. Keep HasFactory and Notifiable. Remove Sanctum’s HasApiTokens import if the model already has it. The two traits share a name and must not both be applied.

use Laravel\Passport\Contracts\OAuthenticatable;
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable implements OAuthenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
}

config/auth.php must send API requests through Passport:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],

php artisan vendor:publish --tag=passport-config

The consent screen#

Passport 13 does not ship a Blade consent page. Register one in AppServiceProvider::boot. The docs pass the whole request into Inertia. The form only needs three scalars, plus the CSRF token, so pass those:

use Inertia\Inertia;
use Laravel\Passport\Passport;

Passport::authorizationView(function (array $parameters) {
    return Inertia::render('auth/OAuth/Authorize', [
        'state' => $parameters['request']->string('state')->toString(),
        'clientId' => (string) $parameters['client']->getKey(),
        'clientName' => $parameters['client']->name,
        'authToken' => $parameters['authToken'],
        'scopes' => collect($parameters['scopes'])->map(fn ($scope) => [
            'id' => $scope->id,
            'description' => $scope->description,
        ])->values(),
        'csrf' => csrf_token(),
    ]);
});

/oauth/authorize is already registered. Approve is a POST to the named route passport.authorizations.approve. Deny is a DELETE to passport.authorizations.deny. Both expect state, client_id, and auth_token. A browser form cannot send DELETE, so the deny form posts with _method set to DELETE.

<script setup lang="ts">
defineProps<{
  state: string;
  clientId: string;
  clientName: string;
  authToken: string;
  scopes: { id: string; description: string }[];
  csrf: string;
}>();
</script>

<template>
  <h1>Allow {{ clientName }}?</h1>
  <ul>
    <li v-for="scope in scopes" :key="scope.id">{{ scope.description }}</li>
  </ul>

  <form method="post" action="/oauth/authorize">
    <input type="hidden" name="_token" :value="csrf" />
    <input type="hidden" name="state" :value="state" />
    <input type="hidden" name="client_id" :value="clientId" />
    <input type="hidden" name="auth_token" :value="authToken" />
    <button type="submit">Allow</button>
  </form>

  <form method="post" action="/oauth/authorize">
    <input type="hidden" name="_method" value="DELETE" />
    <input type="hidden" name="_token" :value="csrf" />
    <input type="hidden" name="state" :value="state" />
    <input type="hidden" name="client_id" :value="clientId" />
    <input type="hidden" name="auth_token" :value="authToken" />
    <button type="submit">Deny</button>
  </form>
</template>

Save it as Authorize.vue inside pages/auth/OAuth, next to the kit’s other auth pages. Do not read document while the script is setting up. The page can be server-rendered, and the form is a normal POST so Passport can redirect back to the other app.

The other app asks for a token#

Create the client with php artisan passport:client. When it asks for the redirect URI, a comma-separated list is accepted. For a client owned by one of your users, the docs call createAuthorizationCodeGrantClient on ClientRepository. Show $client->plainSecret once. $user->oauthApps() lists that user’s clients.

The consuming app, not your Vue bundle, redirects the browser to /oauth/authorize with client_id, redirect_uri, response_type=code, scope, and a state you stored in that app’s session (Str::random(40)). prompt may be none, consent, or login. After the user allows access, the callback checks state, then exchanges the code from the server:

$response = Http::asForm()->post('https://passport-app.test/oauth/token', [
    'grant_type' => 'authorization_code',
    'client_id' => 'your-client-id',
    'client_secret' => 'your-client-secret',
    'redirect_uri' => 'https://third-party-app.com/callback',
    'code' => $request->code,
]);

A public client that cannot keep a secret uses php artisan passport:client --public and the PKCE grant in the same docs. Do not use the implicit grant for a new SPA. The grant list, scopes, and refresh flow stay in the Passport docs rather than copied here.

Protect your API with auth:api. Callers send Authorization: Bearer and the access token. That header is for the third party. Your own Inertia pages keep using the session.

Recap#

• Sanctum covers SPAs, mobile apps and personal tokens; Passport is for OAuth 2 clients.
• One HasApiTokens trait on User: Passport’s, once you install it.
• The consent screen is an Inertia page posting to Passport’s routes.
• Secrets on servers; PKCE for public clients; auth:api for third-party calls.

FAQ#

Next steps#

• Sanctum for a Vue SPA
• Laravel Fortify with Vue
• Breeze, Jetstream, and the Vue starter kit

Sources#

• Laravel 13: Passport
• Laravel 13: Sanctum
• OAuth 2.0 for Browser-Based Apps (IETF draft)