FluentStack

Auth Error States

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

Auth Error States

Menerjemahkan kegagalan login, konfirmasi email, session, dan akses menjadi pesan serta tindakan yang jelas untuk user.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan error kredensial, email belum dikonfirmasi, session berakhir, dan akses ditolak
  • Menulis pesan error yang membantu tanpa membocorkan detail provider
  • Menghubungkan setiap error dengan tindakan pemulihan yang tepat
  • Menampilkan perubahan error sebagai informasi penting bagi assistive technology
Next.jsAuthenticationError StatesUXAccessibility

Isi lesson

6 blok
  1. 1.
    Pesan auth harus menjelaskan keadaan dan tindakan berikutnyaBelum selesaiWajib
  2. 2.
    Peta pesan auth yang spesifikBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Tentukan tindakan, bukan hanya kalimat errorBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Pesan auth harus menjelaskan keadaan dan tindakan berikutnya

Wajib

Auth error bukan satu keadaan umum. Email atau password yang tidak cocok membutuhkan kesempatan mencoba lagi. Email yang belum dikonfirmasi membutuhkan arahan membuka inbox atau mengirim ulang email. Session yang berakhir membutuhkan link Masuk. Akses yang ditolak membutuhkan penjelasan bahwa route atau data tersebut tidak tersedia untuk akun saat ini.

Hindari meneruskan raw error dari provider ke halaman. Pesan teknis dapat membingungkan user dan kadang membocorkan detail yang tidak diperlukan. Simpan detail yang aman untuk developer melalui logging server-side, lalu tampilkan copy yang spesifik dan tenang di UI. Error yang muncul setelah submit juga harus dapat dikenali tanpa mengandalkan warna merah saja.

Bagian ini memengaruhi progres lesson.

Peta pesan auth yang spesifik

Wajib
tsx
type AuthErrorCode =
  | "invalid_credentials"
  | "email_unconfirmed"
  | "session_expired"
  | "forbidden";

const authErrorMessage: Record<AuthErrorCode, string> = {
  invalid_credentials: "Email atau password belum sesuai. Coba periksa kembali.",
  email_unconfirmed: "Buka inbox untuk mengonfirmasi email sebelum masuk.",
  session_expired: "Sesi kamu berakhir. Masuk kembali untuk melanjutkan.",
  forbidden: "Akun ini belum memiliki akses ke halaman tersebut.",
};

export default function AuthErrorMessage({
  code,
}: {
  code: AuthErrorCode;
}) {
  return <p role="alert">{authErrorMessage[code]}</p>;
}

Error code internal dipetakan ke pesan yang user dapat tindak lanjuti. Invalid credentials tidak perlu menyebut apakah email tertentu terdaftar. Session expired memberi jalan untuk masuk lagi, sedangkan forbidden tidak mengarahkan user mencoba login berulang kali. role alert memberi tahu teknologi bantu bahwa pesan penting baru muncul.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Write helpful auth error state map

Lengkapi peta error auth dengan pesan yang spesifik untuk kredensial, email, session, dan akses.

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

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Pesan mana yang paling tepat untuk session yang sudah tidak berlaku?

Progres lesson naik setelah jawaban benar.

Tips

Wajib

Tentukan tindakan, bukan hanya kalimat error

Setiap error perlu pemulihan yang sepadan. Invalid credentials dapat mempertahankan email yang sudah diisi dan fokus kembali ke field relevan. Email unconfirmed dapat menawarkan kirim ulang email. Session expired dapat membuka login. Forbidden dapat memberi link kembali ke dashboard. Jangan memberi tombol Coba lagi pada kondisi yang tidak akan berubah tanpa tindakan user lain.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Auth error perlu dibedakan berdasarkan penyebab dan tindakan pemulihannya.
  • Pesan user-facing tidak perlu membeberkan raw error provider.
  • role alert membantu error submit diketahui tanpa bergantung pada warna.
  • Error state yang baik mengarahkan user ke tindakan berikutnya yang realistis.
  • Berikutnya, kamu akan menguji kesiapan auth-aware UI pada Uji Kompetensi module.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Pesan auth harus menjelaskan keadaan dan tindakan berikutnya.

Memuat progresReview module