Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat proses register di dalam React.js dengan Rest API yang dibuat di Laravel. Dan di artikel kali ini kita semua akan belajar bagaimana cara membuat proses login di dalam React.js menggunakan Laravel JWT atau Json Web Token.
Konsepnya, ketika kita berhasil melakukan proses otentikasi, maka kita akan mendapatkan sebuah token dan token tersebut akan kita simpan di dalam client / browser menggunakan localStorage.
Langkah 1 - Edit Component / View Login
Disini kita akan melakukan perubahan di dalam component / view yang sudah pernah kita buat sebelumnya. Silahkan buka file src/pages/Login.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook react
import React, { useState } from 'react';
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
//import axios
import axios from 'axios';
function Login() {
//define state
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
//define state validation
const [validation, setValidation] = useState([]);
//define history
const history = useHistory();
//function "loginHanlder"
const loginHandler = async (e) => {
e.preventDefault();
//initialize formData
const formData = new FormData();
//append data to formData
formData.append('email', email);
formData.append('password', password);
//send data to server
await axios.post('http://localhost:8000/api/login', formData)
.then((response) => {
//set token on localStorage
localStorage.setItem('token', response.data.token);
//redirect to dashboard
history.push('/dashboard');
})
.catch((error) => {
//assign error to state "validation"
setValidation(error.response.data);
})
};
return (
<div className="container" style={{ marginTop: "120px" }}>
<div className="row justify-content-center">
<div className="col-md-4">
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<h4 className="fw-bold">HALAMAN LOGIN</h4>
<hr/>
{
validation.message && (
<div className="alert alert-danger">
{validation.message}
</div>
)
}
<form onSubmit={loginHandler}>
<div className="mb-3">
<label className="form-label">ALAMAT EMAIL</label>
<input type="email" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Masukkan Alamat Email"/>
</div>
{
validation.email && (
<div className="alert alert-danger">
{validation.email[0]}
</div>
)
}
<div className="mb-3">
<label className="form-label">PASSWORD</label>
<input type="password" className="form-control" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Masukkan Password"/>
</div>
{
validation.password && (
<div className="alert alert-danger">
{validation.password[0]}
</div>
)
}
<div className="d-grid gap-2">
<button type="submit" className="btn btn-primary">LOGIN</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
export default Login;
Dari perubahan kode di atas, pertama kita import hook useState dari React.js, hook ini akan kita gunakan untuk menyimpan data yang di dapatkan dari form.
//import hook react
import React, { useState } from 'react';
Setelah itu, kita import hook useHistory dari React Router Dom, kita akan gunakan hook ini untuk navigasi ke URL / halaman tertentu.
//import hook useHitory from react router dom
import { useHistory } from 'react-router';
Karena kita akan mengirim data ke dalam server menggunakan Rest API, maka kita butuh Axios. Dan kita juga import di halaman ini.
//import axios
import axios from 'axios';
Kemudian di dalam function component Login, pertama-tama kita membuat definisi sebuah state baru, dimana state ini yang akan digunakan untuk menyimpan data yang di ketik di dalam form.
//define state
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Dan kita juga membuat 1 state lagi, dimana state ini nantinya akan digunakan untuk menyimpan sebuah response error validasi dari Rest API Laravel.
//define state validation
const [validation, setValidation] = useState([]);
Untuk menggunakan hook useHistory kita perlu menginitialize-nya terlebih dahulu ke dalam variable. Tujuannya agar lebih mudah digunakan dan cara pemanggilan dari hook tersebut
//define history
const history = useHistory();
Selanjutnya kita membuat sebuah function baru dengan nama loginHandler, fungsi ini akan di jalankan ketika form di lakukan submit.
//function "loginHanlder"
const loginHandler = async (e) => {
//...
}
Di dalam function di atas, pertama kita melakukan initialize FormData, dengan tujuan untuk menampung data yang akan dikirimkan ke server dengan lebih mudah.
//initialize formData
const formData = new FormData();
Dan untuk memasukkan data ke dalam formData, maka kita perlu melakukan append terlebih dahulu. Kurang lebih seperti berikut ini :
//append data to formData
formData.append('email', email);
formData.append('password', password);
Setelah data berhasil di masukkan di dalam formData, maka selanjutnya kita akan mengirimkan data tersebut ke server menggunakan Axios dengan method POST ke dalam endpoint http://localhost:8000/api/login.
//send data to server
await axios.post('http://localhost:8000/api/login', formData)
Jika proses otentikasi berhasil dilakukan, maka akan masukkan ke dalam promise then, dimana di dalamnya pertama kita akan lakukan set token ke dalam localStorage. Dimana token tersebut di dapatkan dari response ketika berhasil melakukan otentikasi.
//set token on localStorage
localStorage.setItem('token', response.data.token);
Setelah itu, kita arahkan ke dalam halaman / URL /dashboard, menggunakan hook useHistory.
//redirect to dashboard
history.push('/dashboard');
Tapi jika proses login gagal, maka akan masuk ke dalam promise catch dan di dalamnya kita melakukan assign data response error validasi ke dalam state validation.
//assign error to state "validation"
setValidation(error.response.data);
Langkah 2 - Uji Coba Proses Login
Sekarang kita akan lakukan proses uji coba login di dalam React.js. Silahkan buka http://localhost:3000, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Sekarang, silahkan klik LOGIN tanpa mengisikan data apapun di dalam form, maka kita akan mendapatkan sebuah error validasi kurang lebih seperti berikut ini :
Kemudian, silahkan masukkan email dan password yang sudah pernah teman-teman daftarn atau gunakan saat proses register, jika berhasil maka kita akan diarahkan ke dalam halaman dashboard.
Dan kita bisa melihat token JWT kita di dalam web browser. SIlahkan klik kanan pada browser dan pilih inpect element, kemudian pilih Application dan lihat di bagian Local Storage. Kurang lebih seperti berikut ini :
Sampai disini pembahasan bagaimana cara membuat proses otontikasi / login di dalam React.js menggunakan Laravel JWT. Di artikel selanjutnya kita semua akan belajar menampilkan data user yang telah login di dalam halamaan Dashboard.
Terima Kasih