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

Mulai Nonton Daftar Video

Detail Kelas

  • 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.