DEV Community

Muhammad Dhiyaul Atha
Muhammad Dhiyaul Atha

Posted on

Laravel API Authentication dengan Sanctum

#laravel #api #authentication #webdev

"Pernah nggak, API kamu bisa diakses siapa saja tanpa login? Atau frontend sudah jadi, tapi bingung gimana cara login ke backend Laravel? Di sinilah Laravel Sanctum jadi solusi autentikasi API yang simpel dan powerful."

Kenapa Perlu Autentikasi API?

  • Melindungi data dari akses sembarangan
  • Wajib untuk aplikasi SPA, mobile, dan public API
  • User harus login untuk akses data pribadi

Cara Kerja Sanctum (Token Based Auth)

Laravel Sanctum menggunakan token-based authentication. Artinya, setelah login, user akan mendapatkan token yang harus dikirim di setiap request API melalui header Authorization. Ini membuat API lebih aman dan mudah diintegrasikan dengan frontend atau mobile app.

Studi Kasus: API Artikel dengan Login

Di artikel ini, kita akan membuat API Artikel yang hanya bisa diakses user yang sudah login menggunakan Laravel Sanctum.

Step 1: Install Sanctum 

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Command ini akan menambahkan tabel personal_access_tokens yang digunakan untuk menyimpan token API user.

Tambahkan middleware Sanctum di app/Http/Kernel.php pada group api:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],
Enter fullscreen mode Exit fullscreen mode

Step 2: Setup Model User

Pastikan model User pakai trait HasApiTokens:

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
    // ...
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Membuat Endpoint Auth (Login, Register, Logout)

Buat controller misal AuthController:

php artisan make:controller Api/AuthController
Enter fullscreen mode Exit fullscreen mode

Contoh fungsi register, login, dan logout:

public function register(Request $request) {
    $validated = $request->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:6',
    ]);
    $user = User::create([
        'name' => $validated['name'],
        'email' => $validated['email'],
        'password' => bcrypt($validated['password']),
    ]);
    $token = $user->createToken('api-token')->plainTextToken;
    return response()->json(['user' => $user, 'token' => $token], 201);
}


public function login(Request $request) {
    $credentials = $request->only('email', 'password');
    if (!auth()->attempt($credentials)) {
        return response()->json(['message' => 'Unauthorized'], 401);
    }
    $user = auth()->user();
    $user->tokens()->delete(); // hapus token lama, 1 user = 1 token aktif
    $token = $user->createToken('api-token')->plainTextToken;
    return response()->json(['user' => $user, 'token' => $token]);
}


public function logout(Request $request) {
    $request->user()->currentAccessToken()->delete();
    // Logout akan menghapus token aktif sehingga request berikutnya akan ditolak.
    return response()->json(['message' => 'Logged out']);
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Route API Auth & Proteksi Artikel

Edit routes/api.php:

Route::post('register', [AuthController::class, 'register']);
Route::post('login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function() {
    Route::post('logout', [AuthController::class, 'logout']);
    Route::apiResource('articles', ArticleController::class);
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Testing API Auth dengan Postman

Register 

POST /api/register
Content-Type: application/json
{
  "name": "Atha",
  "email": "atha@mail.com",
  "password": "password123"
}
Enter fullscreen mode Exit fullscreen mode

Login 

POST /api/login
Content-Type: application/json
{
  "email": "atha@mail.com",
  "password": "password123"
}
Enter fullscreen mode Exit fullscreen mode

Response:

{
  "user": { "id": 1, "name": "Atha", ... },
  "token": "1|longapitoken..."
}
Enter fullscreen mode Exit fullscreen mode

Akses Artikel (dengan token)

Tambahkan header:

Authorization: Bearer 1|longapitoken...
Enter fullscreen mode Exit fullscreen mode 
GET /api/articles
Enter fullscreen mode Exit fullscreen mode

Error Handling & Status Code

  • 201 Created: Register sukses
  • 200 OK: Login sukses, data diambil
  • 401 Unauthorized: Token salah/expired
  • 422 Unprocessable Entity: Validasi gagal

Common Mistake Pemula

  • Lupa publish/migrate Sanctum
  • Lupa tambahkan middleware auth:sanctum
  • Token tidak dikirim di header
  • Lupa set Accept: application/json
  • Salah endpoint (POST login, bukan GET)
  • Salah group route (harus di dalam middleware)

Next Step

  • Refresh token
  • Role/permission
  • API Resource
  • Testing dengan Thunder Client

🚀 Yuk Diskusi & Share!

Kalau kamu stuck di step tertentu, tulis di komentar ya! Share juga pengalaman kamu pakai Sanctum, atau request topik lanjutan (refresh token, role, dsb).

Referensi:

Top comments (0)