Sistem login di react dengan JWT

Free Courses : Sistem login di react dengan JWT

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.

1. Belajar .htaccess
2. Membuat blog dengan PHP
3. CRUD API di Nuxtjs
4. Livewire untuk fullstack laravel
5. Tutorial codeigniter untuk pemula

You can support us by donate with buy us a coffee. We appreciate your donation to our work for share free udemy courses.