JWT (Json Web Token)
JSON Web Token, atau biasa disingkat JWT, itu seperti kartu digital. Bayangkan aja dulu ibaratnya ketika kamu mau masuk ruangan, nahhh JWT ini dijadikan kartu akses untuk bisa membuka pintu ruangan itu. Di kartu itu, ada informasi tentang siapa kamu, hak akses kamu apa saja dan lain lain. Disarankan jangan menyimpan password di dalam JWT ini hehehe…

JWT ini punya tiga bagian: Header, Payload, dan Signature. Buka halaman situs web JWT yang ditunjukkan di bawah ini.

JWT.IO - JSON Web Tokens Introduction

Learn about JSON Web Tokens, what are they, how they work, when and why you should use them.

jwt.io

LARAVEL
Laravel ini sebuah kerangka kerja untuk pengembang aplikasi web berbasis PHP, dalam dalam bahasa inggris “Framework”. Jadi, jika kamu berencana untuk membangun aplikasi web dengan PHP, menggunakan Laravel bisa menjadi pilihan yang baik untuk memudahkan dan mempercepat proses pengembangannya.

Untuk itu, JWT sangat cocok digunakan dalam aplikasi Laravel yang membutuhkan sistem autentikasi yang aman dan efisien.

Dalam chapter ini, kita akan langsung aja membahas bagaimana penerapan JWT pada Laravel 10.

1. Install Composer: Sebelum kita bisa menginstal Laravel, kita harus memastikan bahwa Composer sudah terinstal di sistem kita. Jika belum, kamu bisa mengunduh dan menginstal Composer dari website resminya di https://getcomposer.org/download/. Ikuti instruksi yang ada di sana

2. Buat Project Laravel Baru: Buka terminal atau CMD, lalu jalankan perintah tersebut

composer create-project laravel/laravel jwt-laravel

3. Cek Instalasi Laravel: Untuk memastikan laravel sudah terbuat project baru dengan benar, kamu bisa coba jalankan built-in server Laravel. Masuk ke directory project kamu ( cd jwt-laravel ), lalu jalankan perintah tersebut di CMD atau terminal

php artisan serve

Perintah ini akan menjalankan server di . Buka alamat tersebut di web browser kamu, dan jika kamu melihat halaman Laravel, berarti instalasi Laravel sudah berhasil.

4. Buat Database: Pertama, buatlah sebuah database pada sistem database yang kamu gunakan. Untuk MySQL, kamu bisa menggunakan perintah CREATE DATABASE belajar-jwt; .Tapi kami merekomendasikan tool seperti PHPMyAdmin XAMPP kamu bisa ikut cara ini.

5. Konfigurasi Environment Laravel: Laravel menggunakan file untuk mengatur konfigurasi environment, termasuk konfigurasi database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar_jwt
DB_USERNAME=root
DB_PASSWORD=

Gantilah nilai dari setiap baris tersebut sesuai dengan konfigurasi database kamu:

DB_CONNECTION: Jenis sistem database yang kamu gunakan ( mysql, pgsql , sqlite , atau sqlsrv). Pada tutorial kali ini kita akan set

DB_HOST : Host dari sistem database. Jika sistem database berjalan di komputer yang sama dengan Laravel, biasanya bisa menggunakan 127.0.0.1 atau localhost.

DB_PORT : Port yang digunakan oleh sistem database. Untuk MySQL biasanya adalah 3306 , untuk PostgreSQL biasanya adalah 5432.

DB_DATABASE : Nama database yang baru saja kamu buat.
DB_USERNAME : Nama user untuk mengakses sistem database.
DB_PASSWORD : Password dari user mysql, jika tidak ada kosongkan saja.

Tentu jangan lupa create table di database, disini kita akan menggunakan file migration yang telah dibuat / disediakan oleh laravel yang secara default. Kita bisa cek di file App/Models/User.php.

Lakukan perintah ini untuk create table:

php artisan migrate

Kita telah mempersiapkan semua yg kita butuhkan, kini saatnya mengintegrasikan JWT ke aplikasi kita.
Okeee, time to code😂, saatnya kita ngoding di mulai heheheee

6. Instalasi Library Tymon JWT Auth Library
Jalakan perintah berikut di terminal atau CMD untuk menginstall library jwt:

composer require tymon/jwt-auth

Setelah itu, kamu perlu mempublikasikan konfigurasi JWT dengan menjalankan perintah berikut:

php artisan vendor:publish \
--provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

Kita dapat membuka dan memodifikasi file config/jwt.php sesuai kebutuhan. Misalnya, kita dapat mengubah durasi hidup token, algoritma enkripsi, dll.

Selanjutnya, kamu perlu meng-generate secret key untuk JWT dengan menjalankan perintah:

php artisan jwt:secret

Perintah ini akan meng-update file .env kamu dan menambahkan baris JWT_SECRET=your_random_secret_key

7. Konfigurasi Tymon JWT Auth

Update file config/auth.php seperti di bawah:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    // tambahkan kode di bawah ini
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
        'hash' => false,
    ], 
],

Penjelasan code diatas maksudnya, kita mengubah driver untuk guard api menjadi jwt. Ini berarti bahwa Laravel akan menggunakan JWT untuk autentukasi pengguna menggunakan api. Selanjutnya kita perlu mengubah sedikit pada bagian defaults:

'defaults' => [
    'guard' => 'api', // 'web' diubah jadi 'api'
    'passwords' => 'users',
],

Update Model User

Buka model User app/Models/User.php dan tambahkan trait Tymon\JWTAuth\Contracts\JWTSubject serta implementasikan dua method yg diperlukan yaitu getJWTIdentifer dan getJWTCustomClaims.

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
// panggil namespace
use Tymon\JWTAuth\Contracts\JWTSubject;
// implements JWTSubject
class User extends Authenticatable implements JWTSubject
{
    // ... method-method yang sudah ada ...
    // Tambahkan kode ini
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }
    // Tambahkan kode ini
    public function getJWTCustomClaims()
    {
return []; }
}

7. Membuat Middleware JwtMiddleware

Middleware itu sangat penting untuk mengendalikan akses ke route. Middleware ini akan memeriksa apakah token JWT disertakan dalam request dan apakah response error.

Berikut langkah — langkahnya:

• Pertama, buat file middleware baru. Kamu dapat menggunakan perintah artisan make:middleware untuk melakukannya. Ini akan membuat file baru di app\Http\Middleware\JwtMiddleware.php

php artisan make:middleware JwtMiddleware

• Buka file tersebut dan sesuaikan seperti ini

<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;
// panggil namespace yang dibutuhkan
use Tymon\JWTAuth\Facades\JWTAuth;
use Tymon\JWTAuth\Exceptions\TokenInvalidException;
use Tymon\JWTAuth\Exceptions\TokenExpiredException;
class JwtMiddleware
{
    public function handle(Request $request, Closure $next): Response
    {
        try {
            $user = JWTAuth::parseToken()->authenticate();
        } catch (\Exception $e) {
            if ($e instanceof TokenInvalidException){
                return response()
                        ->json(['status' => 'Token is Invalid']);
            } else if ($e instanceof TokenExpiredException){
                return response()
                        ->json(['status' => 'Token is Expired']);
            }
            return response()
            ->json(['status' => 'Authorization Token not found']);
}
        return $next($request);
    }
}

• Terakhir daftar middleware baru di app/Http/Kernel.php. Kita bisa menggunakan middleware ini dengan nama alias jwt.verify saat mendefinisikan route

 protected $middlewareAliases = [
    //... kode middleware lainnya ...//
    'jwt.verify' => \App\Http\Middleware\JwtMiddleware::class,
];

8. Membuat JWT Authentication Controller

Sekarang kita akan membuat sebuah controller dengan nama AuthController. Buka terminal atau CMD dan jalankan perintah ini.

php artisan make:controller AuthController

Perintah ini membuat file baru di folder app/Http/Controllers dengan nama AuthController.php.

Buka file tersebut tersebut dan buat beberapa

• registrasi: Untuk mendaftarkan user baru.
• login: Untuk melakukan proses login dan menghasilkan JWT.
• refreshToken: Untuk merefresh token JWT.
• getLogin: Untuk mendapatkan data user yang sedang login.
• createNewToken: Helper untuk mengatur response token.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
// tambahkan ini
use App\Models\User; // memanggil model
use Illuminate\Support\Facades\Auth; // memanggil class Auth
use Illuminate\Support\Facades\Hash; // memanggil class Hash untuk enkrip
use Illuminate\Support\Facades\Validator; // memanggil class validator
class AuthController extends Controller
{
    protected function createNewToken($token)
    {
      return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth()->factory()->getTTL() * 60,
            'user' => auth()->user()
       ]);
    }

    public function register(Request $request)
    {
      // validasi request
     $validator = Validator::make($request->all(), [
        'name' => 'required|string|between:2,100',
        'email' => 'required|string|email|max:100|unique:users',
        'password' => 'required|string|confirmed|min:6',
      ]);
      // jika ada validasi yang error kita akan berikan pesan error
      if($validator->fails()){
        return response()->json($validator->errors()->toJson(), 400);
      }
      // mengambil array data request yang sudah validated
      $validatedData = $validator->validated();

      // enkrip password dengan hash
      $validatedData['password'] = Hash::make($request['password']);

      // Insert user ke table users
      $user = User::create($validatedData);
 
      // create token
      $token = Auth::attempt($request->only(['email', 'password']));
      return $this->createNewToken($token);
    }

    public function login(Request $request) 
    {
      
      $credentials = $request->only(['email', 'password']);
      if (!$token = Auth::attempt($credentials)) {
          return response()->json(['message' => 'Wrong credentials'], 401);
      }
      return $this->createNewToken($token);
    }

    public function refreshToken()
    {
        $token = auth()->refreshToken();
        return $this->createNewToken($token);
    }

    public function getLogin()
    {
       return response()->json(auth()->user());
    }
   
}

Selanjutnya kita akan menambahkan route untuk method registrasi terlebih dahulu, silahkan tambahkan baris code ini di file routes/api.php.

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
// memanggil namespace AuthController
use App\Http\Controllers\AuthController;

// ini url api registrasi 
Route::post('/registrasi', [AuthController::class, 'register']);

Setelah itu, pengguna dapat mendaftar ke aplikasi kita dengan mengirim POST request ke endpoint /api/registrasi dengan body berisi name , email , dan password .

Sebenarnya ini juga bisa menggunakan Postman, tapi untuk saat ini memakai curl aja dulu, cara memanggilnya menggunakan curl, jalankan ini di terminal atau CMD.

curl --request POST \
  --url http://localhost:8000/api/register \
  --header 'Content-Type: application/json' \
  --data '{
    "name": "Arya",
    "email": "arya@example.com",
    "password": "123",
    "password_confirmation": "passwordku"
}'

Berikut response yang akan didapatkan.

{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
  "token_type": "bearer",
  "expires_in": 3600,
  "user": {
    "id": 1,
    "name": "Arya",
    "email": "arya@example.com",
    "created_at": "2023-07-31T10:52:01.000000Z",
    "updated_at": "2023-07-31T10:52:01.000000Z"
} }

Kode access_token adalah token JWT yang dapat digunakan untuk mengakses endpoint lain yang memerlukan autentikasi. Properti user berisi detail pengguna yang baru saja mendaftar.

Next, kita sudah memiliki method login yang bisa digunakan pengguna untuk login mendapatkan token JWT.

Langkah selanjutnya tambahkan baris code berikut di routes/api.php

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

Dalam pengujian code ini, pengguna bisa login dengan mengirim POST request ke /api/login dengan body berisi email dan password.

curl --request POST \
 --url http://localhost:8000/api/login \
 --header 'Content-Type: application/json' \
 --data '{
 "email": "arya@example.com",
 "password": "123"
 }'

Dan ini contoh response yang akan didapatkan:

{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
  "token_type": "bearer",
  "expires_in": 3600,
  "user": {
    "id": 1,
    "name": "User Baru",
    "email": "userbaru@example.com",
    "created_at": "2023-07-31T10:52:01.000000Z",
    "updated_at": "2023-07-31T10:52:01.000000Z"
} }

Nextt, untuk method refreshToken yang kita buat di AuthController itu berfungsi untuk memperbarui token JWT yang telah dikirim oleh user. How it works cukup sederhana sebenarnya.

Di dalam method refreshToken, kita memanggil method refreshToken dari object auth(). Fungsi ini akan mengambil token yang ada di header Authorization request yang sedang diproses, kemudian memeriksa apakah token tersebut valid dan belum kadaluarsa. Jika semua pengecekan berhasil, fungsi ini akan memperbarui dan menghasilkan token baru. Token baru ini lalu kita simpan dalam variabel $token.

Kita perlu membuat sebuah route di routes/api.php yang memanggil fungsi ini:

Route::post('/refresh-token', [AuthController::class, 'refreshToken'])
->middleware('jwt.verify');

Berikut adalah contoh menggunakan cURL:

curl --location --request POST 'http://localhost:8000/api/refresh-token' \
--header 'Authorization: Bearer YOUR_JWT_TOKEN'

Jika request berhasil, response yg diterima akan seperti ini:

{
    "access_token": "NEW_JWT_TOKEN",
    "token_type": "bearer",
    "expires_in": 3600
}

Di method getLogin, kita mengambil user yang sedang login menggunakan fungsi auth()->user() dan mengembalikannya sebagai response JSON.

Selanjutnya, kita perlu menambahkan route baru dalam file routes/api.php yang memanfaatkan middleware jwt.auth :

Route::get('/get-login', [AuthController::class, 'getLogin'])->middleware('jwt.auth');

Sekarang kita bisa mencoba fungsi ini dengan curl di terminal:

curl -X GET -H "Authorization: Bearer YOUR_JWT_TOKEN" \
http://localhost:8000/api/get-login

Jika semua berjalan dengan benaar, kamu akan mendapatkan response berikut:

{
    "id": 1,
    "name": "User Name",
    "email": "user@example.com",
    "created_at": "2023-07-31T10:32:14.000000Z",
    "updated_at": "2023-07-31T10:32:14.000000Z"
}

Response ini menunjukkan data pengguna yang telah diautentikasi.

Untuk lebih lengkap tentang Tymon JWT Library bisa kesini.

We are done with the CREATE JWT LARAVEL

Thank you 🚀🚀🚀🚀