FluentStack

Uji Kompetensi Authentication and Session-Aware UI

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 11: Production Next.jsAdvanced70 menitBahasa Indonesia

Uji Kompetensi Authentication and Session-Aware UI

Memeriksa kesiapan merancang auth-aware UI, akses route, dan error state sebelum menghubungkan app ke Supabase atau backend.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Menjelaskan perbedaan authentication, session, dan authorization
  • Menyusun form serta navigation yang berubah sesuai session
  • Memetakan route public dan protected dengan redirect yang tepat
  • Memilih error copy dan environment variable policy yang aman
Next.jsAuthenticationSessionsRoute ProtectionReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: UI dan route sudah siap memahami identitas userBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Baca dokumentasi auth dengan tujuan yang sempitBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: UI dan route sudah siap memahami identitas user

Wajib

Pada module ini kamu belum membangun auth provider atau database sendiri. Kamu sudah membangun keputusan yang harus benar sebelum integrasi: form menjelaskan state, navigation berubah menurut session, route memiliki akses yang dipetakan, redirect awal tidak dianggap sebagai keamanan satu-satunya, dan error membantu user bertindak.

Gunakan Uji Kompetensi ini sebagai checkpoint readiness. Jika kamu masih ragu membedakan session dan authorization, kembali ke lesson terkait sebelum meneruskan ke integrasi Supabase atau backend. Integrasi berikutnya akan lebih aman ketika UI dan route behavior sudah jelas.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Authentication and Session-Aware UI

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 7

Target lulus: 70

Urutan penjelasan mana yang paling tepat untuk authentication, session management, dan authorization?

Coding practice

WajibDibuka di workspace khusus

Build auth-aware route checkpoint

Susun feature map auth untuk login, register, dashboard, navigation, error UI, dan session secret server-only.

Tujuan awal: Fokus di tab TSX.

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

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis catatan implementasi 100-160 kata untuk Local Next.js App kamu. Jelaskan route mana yang public, route mana yang protected, apa yang dilihat navigation saat user signed out/signed in, dan satu auth error yang perlu ditangani. Tulis untuk rekan developer yang akan melanjutkan integrasi auth.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/80 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca dokumentasi auth dengan tujuan yang sempit

Gunakan tiga sumber resmi ini untuk menyiapkan Local Next.js App sebelum menghubungkan auth provider. Fokus pada alur dan boundary, bukan pada semua pilihan provider atau enterprise auth.

Next.js Docs

How to implement authentication in Next.js

Fokus baca

  • bedakan authentication, session management, dan authorization
  • alur form, session, logout, serta redirect
  • mengapa pemeriksaan data tidak cukup hanya lewat redirect route

Abaikan dulu

  • membangun custom auth cryptography sendiri
  • multi-role authorization dan enterprise SSO
Buka dokumentasi

Supabase Docs

Creating a Supabase client for SSR

Fokus baca

  • mengapa SSR client memakai cookies
  • pemisahan browser client dan server client
  • kapan identity perlu diverifikasi untuk halaman dan data

Abaikan dulu

  • realtime subscription dan advanced caching
  • provider OAuth dan account linking
Buka dokumentasi

Next.js Docs

Environment Variables

Fokus baca

  • nilai non-NEXT_PUBLIC_ tetap di server
  • NEXT_PUBLIC_ akan tersedia di bundle browser
  • .env.local tidak di-commit

Abaikan dulu

  • strategi environment multi-region dan deployment pipeline
Buka dokumentasi

Aksi setelah membaca

Tambahkan auth route map ke README Local Next.js App: tulis public route, protected route, redirect awal, dan nama variable yang harus tetap server-only. Jangan menyalin value secret ke README.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Kamu siap melanjutkan jika dapat membedakan identity, session, dan authorization.
  • Auth-aware UI menunjukkan state signed out, signed in, submitting, dan error secara jelas.
  • Route protection dimulai dari route map dan redirect, lalu dilengkapi authorization server-side dekat data atau action.
  • NEXT_PUBLIC_ bukan tempat untuk secret dan .env.local tidak di-commit.
  • Berikutnya, kamu akan menghubungkan Next.js app ke Supabase atau backend dengan client boundary dan data user yang lebih nyata.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: UI dan route sudah siap memahami identitas user.

Memuat progresReview module