Advanced · Level 19: Security BasicsAdvanced60 menitBahasa Indonesia

Auth Guards

Membedakan redirect guard dari route, API, dan database authorization agar protected experience tidak memberi rasa aman palsu.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan nilai UX dari client dan server route guard
Membedakan route response protection dari data authorization
Menentukan layer yang menegakkan protected data action
Menyusun QA scenario untuk guard dan access denial

Auth GuardsAuthorizationRoute ProtectionRLSSecurity Boundaries

Isi lesson

6 blok

1.
Guard mengarahkan user, data policy tetap berdiri sendiriBelum selesaiWajib
2.
Empat layer protected course settingsBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Redirect bukan bukti data terlindungiBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Guard mengarahkan user, data policy tetap berdiri sendiri

Wajib

Auth guard frontend dapat membuat experience lebih baik: user signed-out diarahkan ke sign-in, route menunjukkan loading session, atau action tidak tersedia sampai capability diketahui. Server-side route check dapat mencegah protected page response dirender bagi user tanpa identity sesuai contract. Tetapi data yang sudah diberikan ke browser tidak dapat ditarik kembali oleh client guard, dan route redirect tidak melindungi API endpoint atau database row secara otomatis.

Setiap protected data action memerlukan authorization pada layer yang benar: API/service server memeriksa identity and permission, and database RLS/policy dapat menegakkan row access bila architecture menggunakannya. Guard adalah defense untuk navigation and UX, bukan pengganti validation server. QA yang baik mencoba signed-out route, signed-in user tanpa permission, direct navigation, refresh, dan protected mutation pada local/staging aman, lalu memeriksa UI recovery serta server response tanpa mencoba bypass.

Bagian ini memengaruhi progres lesson.

Empat layer protected course settings

Wajib

const courseSettingsBoundary = {
  clientGuard: "reduce confusion and direct to sign-in",
  serverRouteCheck: "protect route response before rendering when architecture supports it",
  apiAuthorization: "verify identity and permission for every protected action",
  databasePolicy: "enforce row access when RLS or equivalent policy is used",
};

Layer berbeda menurut project, tetapi satu layer tidak menghapus kebutuhan layer lain. Client guard membantu navigation, server route check membantu response page, API authorization melindungi action, dan database policy melindungi row access bila digunakan.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify course auth guard boundary

Pisahkan client guard, server route check, API authorization, dan database policy pada protected settings.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa yang harus tetap dilakukan API saat client guard sudah mengarahkan user signed-out ke sign-in?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Redirect bukan bukti data terlindungi

Jangan mengklaim feature secure hanya karena route redirect bekerja. Pastikan action dan data policy diuji pada boundary server/database sesuai architecture. Jika user melihat data sebelum redirect atau mendapat 403 sesudah page load, catat timing, route, action, status, environment, dan UI state. Escalate ke owner auth/data tanpa credential workaround.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Client guard membantu navigation dan clarity; server route check dapat menjaga page response.
API/service authorization dan database policy tetap melindungi protected data/action.
Satu guard tidak menggantikan enforcement lain.
QA mencakup signed-out, no-permission, direct navigation, refresh, dan protected mutation.
Berikutnya, Uji Kompetensi menyatukan env, token, cookie, Permission UI, dan guard boundary.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Guard mengarahkan user, data policy tetap berdiri sendiri.

Memuat progres Review module