Sistem login di react dengan JWT

Kamu sudah cukup jauh belajar reactnya? sudah normal, kalau aplikasi yang ingin kamu buat mengandung sistem authentikasi. Di kelas ini kita lihat cara login dan logout untuk sistem API authentikasi yang menggunakan Json Web Token (JWT) dengan memanfaatkan react context

Update kelas terakhir : 5 tahun yang lalu

cover sistem-login-di-react-dengan-jwt.jpg

persiapan auth jwt di react

Persiapan untuk melakukan authentikasi dengan jwt(json web token) di reactjs. Kamu bisa menonton pembuatan API dari sisi servernya disini JSON Web Token pada NodeJS

persiapan react untuk jwt

Setelah dari sisi server, sekarang kita siapan untuk bagian frontend react untuk mengkonsumsi API yang menggunakan jwt. Ada axios untuk mengkonsumsi API dan react-router-dom untuk mensimulasikan halaman profile nantinya

Component untuk login

Kita mulai dari bagian form loginnya. Menyediakan dua input dan satu tombol sederhana yang nantinya akan berkomunikasi dengan server

membuat context provider untuk auth

Untuk mengatur state dari sistem authentikasi di react ini, kita akan menggunakan react context API. Di bagian ini kita mulai dari pembuatan Providernya

metode login dan logout

Tidak lupa untuk menyiapkan dua metode utama yaitu login dan logout pada providernya agar bisa dishare di berbagai komponen

consumer context di dalam higher order component

Selanjutnya consumer provider akan kita bungkus di dalam higher order component react agar tidak perlu mengulangi semua state dan metodenya di komponen yang akan menggunakan

menggunakan HOC dan context di component

Kita lihat bagaimana cara menggunakan HOC alias higher order component dan context provider yang sudah kita buat sebelumnya di component react

halaman profile saat berhasil login

Sediakan halaman profile dimana user akan diredirect ke bagian ini saat sudah berhasil login menggunakan sistem JWT (json web token)

halaman hanya bisa diakses setelah login

Memanfaatkan react-router-dom, kita bisa membuat halaman yang dilindungi / terproteksi, dimana hanya user yang sudha login saja yang bisa mengkases halamannya

akses endpoint dengan token

Setelah belajar menerima tokennya di react, sekarang sebaliknya kita lihat cara mengirim token untuk mengakses endpoint tertentu yang dilindungi JWT dari sisi server memanfaatkan konfigrai header axios

logout react auth

Untuk logout akan lebih sederhana di bagian react ini, kita hanya perlu menghapus data di localstoragenya

closing react auth jwt

Kita sudah membahas cara login dan logout di reactjs menggunakan json web token (JWT), sekarang coba bikin sistem signup (register) yang hanya memerlukan CRUD biasa.