Build a Professional API with Laravel Sanctum

Modern web applications often separate the frontend and backend into independent systems. React, Vue, and mobile apps communicate with Laravel through APIs.

This architecture creates one major challenge: authentication.

Laravel Sanctum provides a lightweight and secure solution for API authentication using Bearer Tokens.

Why Use Sanctum Instead of Passport?

Laravel Passport is powerful but often too complex for most applications.

Sanctum focuses on simple token-based authentication for SPAs and mobile apps.

Step 1: Install Sanctum

composer require laravel/sanctum

Step 2: Publish and Migrate

php artisan vendor:publish --provider="Laravel\\Sanctum\\SanctumServiceProvider"

php artisan migrate

This creates the personal_access_tokens table.

Step 3: Configure CORS

Frontend applications usually run on different domains, so CORS must be configured correctly.

'allowed_origins' => [
    'http://localhost:3000',
],

Step 4: Update the User Model

use Laravel\\Sanctum\\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
}

Step 5: Create Login Route

Route::post('/login', function (Request $request) {

    $user = User::where('email', $request->email)->first();

    if (!$user || !Hash::check($request->password, $user->password)) {
        return response()->json([
            'message' => 'Invalid credentials'
        ], 401);
    }

    $token = $user->createToken('spa-token')->plainTextToken;

    return response()->json([
        'user' => $user,
        'token' => $token,
    ]);
});

Protect API Routes

Route::middleware('auth:sanctum')->group(function () {

    Route::get('/user', function (Request $request) {
        return $request->user();
    });

});

Frontend Authentication Example

const response = await fetch('/api/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        email,
        password
    })
});

const data = await response.json();

localStorage.setItem('api_token', data.token);

Using Bearer Tokens

const token = localStorage.getItem('api_token');

fetch('/api/user', {
    headers: {
        Authorization: `Bearer ${token}`
    }
});

Conclusion

Laravel Sanctum offers a clean, secure, and lightweight solution for API authentication in modern Laravel applications.

It is the ideal choice for SPAs, React apps, Vue applications, and mobile APIs.