Autentikasi

Enaknya di React Router, dia udah nyediain session storage yang bisa lo pake buat bikin sistem autentikasi. Jadi, lo nggak perlu ribet-ribet mikirin solusi sendiri. Ini cukup kalo lo pengen kontrol penuh atas sistem autentikasi lo.

Lo bisa pake createSessionStorage dari React Router buat bikin session storage. Contohnya:

Session di atas lo bisa pake buat nyimpen data user yang lagi login, misalnya userId (dalam contoh ini) atau data flash (pesan sekali tampil) buat ngasih feedback ke user setelah mereka melakukan aksi tertentu.

Kalo lo liat lagi, di atas ada tiga fungsi yang di-export:

• getSession: buat ambil session dari cookie.
• commitSession: buat simpen session ke cookie.
• destroySession: buat hapus session dari cookie.

Sistem session di React Router ini nggak di-spread lewat middleware, jadi lo harus panggil fungsi getSession setiap kali lo butuh akses session di dalam route module lo.

Sebagai contoh, bikin halaman login:

Penjelasannya gini:

• Di loader, kita ngecek apakah user udah login dengan ngecek apakah session punya userId:
  • Kalo udah, kita redirect ke halaman utama.
  • Kalo belum, kita ambil data flash error dari session dan return ke component buat ditampilin.
• Ketika user submit form, action bakal dipanggil dan ini yang terjadi:
  • Di sini, kita ambil session dari cookie dan ngecek apakah username dan password yang dimasukin valid.
  • Kalo valid, simpen userId ke session dan redirect ke halaman utama.
  • Kalo nggak valid, set flash message error ke session dan redirect kembali ke halaman login.

Hal yang perlu diinget, ketika lo nge-set sesuatu di session, lo harus nge-commit session tersebut dengan commitSession(session) supaya perubahan yang lo buat ke session bisa disimpen ke cookie.

Dan kalo lo mau ngehapus session, lo bisa pake destroySession(session):

Cara ini cukup buat bikin sistem autentikasi yang simpel. Kalo lo butuh solusi yang lebih kompleks, lo bisa pake library kayak better-auth atau OpenAUTH.