OAuth dengan PKCE.

OAuth 2.0 adalah standar untuk memberi akses aplikasi ke data pengguna tanpa membagikan password secara langsung. PKCE (diucapkan “pixy”) adalah ekstensi OAuth yang dirancang khusus untuk aplikasi yang tidak bisa menyimpan rahasia dengan aman, seperti aplikasi single-page atau mobile.

Kenapa PKCE Dibutuhkan

Alur OAuth klasik (“Authorization Code Flow”) mengandalkan client secret yang disimpan aman di server. Masalahnya, aplikasi frontend seperti React yang berjalan di browser tidak punya tempat aman untuk menyimpan rahasia — apapun yang ada di kode JavaScript bisa dilihat siapa saja lewat DevTools. PKCE menghilangkan kebutuhan client secret dengan menggantinya memakai kode verifikasi yang dibuat secara dinamis di setiap sesi login.

Alur Kerja PKCE Secara Garis Besar

1. Aplikasi membuat code verifier — string acak yang hanya diketahui aplikasi itu sendiri.
2. Aplikasi mengubahnya menjadi code challenge lewat hashing (SHA-256).
3. Pengguna diarahkan ke halaman login penyedia OAuth, membawa code challenge tersebut.
4. Setelah login berhasil, penyedia OAuth mengembalikan authorization code ke aplikasi.
5. Aplikasi menukar authorization code tersebut dengan access token, disertai code verifier asli sebagai bukti bahwa permintaan ini berasal dari aplikasi yang sama yang memulai proses login.

Membuat Code Verifier dan Code Challenge

function buatCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return btoa(String.fromCharCode(...array))
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

async function buatCodeChallenge(verifier) {
  const data = new TextEncoder().encode(verifier);
  const hash = await crypto.subtle.digest("SHA-256", data);
  return btoa(String.fromCharCode(...new Uint8Array(hash)))
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

Mengarahkan Pengguna ke Halaman Login

const verifier = buatCodeVerifier();
sessionStorage.setItem("code_verifier", verifier);

const challenge = await buatCodeChallenge(verifier);

const params = new URLSearchParams({
  client_id: "id-aplikasi-kamu",
  redirect_uri: "https://aplikasi-kamu.com/callback",
  response_type: "code",
  code_challenge: challenge,
  code_challenge_method: "S256",
});

window.location.href = `https://penyedia-oauth.com/authorize?${params}`;

Menukar Authorization Code dengan Token

async function tukarKodeDenganToken(code) {
  const verifier = sessionStorage.getItem("code_verifier");

  const respons = await fetch("https://penyedia-oauth.com/token", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: "https://aplikasi-kamu.com/callback",
      client_id: "id-aplikasi-kamu",
      code_verifier: verifier,
    }),
  });

  return respons.json();
}

Kenapa Ini Aman

Meski code_challenge dan authorization code sempat terlihat di URL, penyerang tidak bisa menukarnya menjadi token tanpa code_verifier asli — yang hanya tersimpan sementara di sesi browser pengguna dan tidak pernah dikirim di langkah awal proses login.

Kesimpulan

PKCE menjawab kebutuhan autentikasi OAuth yang aman untuk aplikasi yang tidak bisa menjaga rahasia, dengan mengganti client secret memakai kode verifikasi sekali pakai yang dibuat ulang setiap sesi. Karena itu, PKCE kini menjadi standar yang direkomendasikan untuk hampir semua aplikasi single-page dan mobile yang mengintegrasikan login lewat OAuth.