Setelah berhasil menampilkan halaman login, sekarang kita akan lanjutkan untuk membuat proses
login di dalam React.js. Jadi kita akan memanfaatkan Rest API yang sudah dibuat di dalam
Laravel untuk proses otentikasi dan setelah proses otentikasi berhasil, maka kita akan menyimpan
token dari hasil otentikasi ke dalam cookies.
Token dari proses otentikasi tersebut yang nanti akan kita gunakan untuk mengakses
endpoint-endpoint Rest API yang membutuhkan authorization.
Langkah 1 - Edit View/Component Login
Karena sebelumnya kita sudah pernah memberikan sample kode di dalam
view/component Login, maka sekarang kita akan merubah semua kode yang ada
di dalamnya.
Silahkan buka file src/pages/admin/Login.jsx, kemudian ubah semua kode-nya menjadi
seperti berikut ini :
import React, { useState } from "react";
import Api from "../../api";
import toast from "react-hot-toast";
import Cookies from "js-cookie";
import { useNavigate } from "react-router-dom";
function Login() {
document.title = "Login - Administrator Travel GIS";
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isLoading, setLoading] = useState(false);
const [validation, setValidation] = useState({});
const loginHandler = async (e) => {
e.preventDefault();
setLoading(true);
await Api.post("/api/admin/login", {
email: email,
password: password,
})
.then((response) => {
setLoading(false);
toast.success("Login Successfully.", {
duration: 4000,
position: "top-right",
style: {
borderRadius: '10px',
background: '#333',
color: '#fff',
},
});
Cookies.set("token", response.data.token);
navigate("/admin/dashboard");
})
.catch((error) => {
setLoading(false);
setValidation(error.response.data);
});
};
if (Cookies.get("token")) {
return navigate("/admin/dashboard");
}
return (
<React.Fragment>
<div className="container">
<div className="row justify-content-center">
<div className="col-md-4 mt-150">
<div className="text-center mb-4">
<h4><i className="fa fa-map-marked-alt"></i> <strong>TRAVEL GIS</strong></h4>
</div>
<div className="card border-0 rounded shadow-sm">
<div className="card-body">
<div className="text-center">
<h6 className="fw-bold">LOGIN ADMIN</h6>
<hr />
</div>
{validation.message && (
<div className="alert alert-danger">
{validation.message}
</div>
)}
<form onSubmit={loginHandler}>
<label className="mb-1">EMAIL ADDRESS</label>
<div className="input-group mb-3">
<span className="input-group-text"><i className="fa fa-envelope"></i></span>
<input type="text" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email Address" />
</div>
{validation.email && (
<div className="alert alert-danger">
{validation.email[0]}
</div>
)}
<label className="mb-1">PASSWORD</label>
<div className="input-group mb-3">
<span className="input-group-text"><i className="fa fa-lock"></i></span>
<input type="password" className="form-control" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
</div>
{validation.password && (
<div className="alert alert-danger">
{validation.password[0]}
</div>
)}
<button className="btn btn-success shadow-sm rounded-sm px-4 w-100" type="submit" disabled={isLoading}> {isLoading ? "LOADING..." : "LOGIN"} </button>
</form>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
)
}
export default Login;
Dari perubahan kode di atas, pertama kita import hook useState dari React.
Hook tersebut akan kita gunakan untuk mendefinisikan sebuah state di dalam component.
import React, { useState } from "react";
Setelah itu, kita juga import baseURL api yang sudah pernah kita buat sebelumnya.
import Api from "../../api";
Karena kita akan menampilkan sebuah notifikasi saat proses otentikasi berhasil, maka kita akan melakukan
import React Hot Toast.
import toast from "react-hot-toast";
Dan saat proses otentikasi berhasil, maka kita akan menyimpan token-nya di dalam
cookies dan disini kita akan menggunakan package Js Cookies.
import Cookies from "js-cookie";
Setelah itu kita juga import hook dari React Router DOM, yaitu
useNavigate.
import { useNavigate } from "react-router-dom";
Di dalam function component Login, pertama-tama kita mendefinisikan
title untuk halaman.
document.title = "Login - Administrator Travel GIS";
Kemudian kita membuat variable dengan nama navigate yang mana isinya adalah
hook useNavigate dari React Router DOM. Tujuannya adalah mempermudah
kita dalam memanggil hook tersebut nantinya.
const navigate = useNavigate();
Setelah itu kita buat 2 state baru, yaitu email dan password. Kedua
state tersebut akan kita gunakan untuk menyimpan data yang diinputkan di dalam form.
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Kemudian dibawah-nya kita buat 2 state lagi, yaitu isLoading dan
validation.
const [isLoading, setLoading] = useState(false);
const [validation, setValidation] = useState({});
Untuk state isLoading akan kita gunakan untuk menampilkan loading di dalam
button saat di klik dan by default kita berikan value
false.
Sedangkan state validation akan kita gunakan untuk menyimpan response
validasi yang di dapatkan dari Rest API dan untuk default value-nya adalah
object kosong.
Setelah itu, kita buat function yang bernama loginHandler, dimana fungsi tersebut
akan dijalankan ketika form disubmit.
const loginHandler = async (e) => {
}
Saat fungsi loginHandler dieksekusi, pertama kita akan melakukan event
preventDefault, tujuannya untuk menonaktifkan kebiasan dari sebuah form submit,
yaitu reload halaman.
e.preventDefault();
Setelah itu, kita set state isloading menjadi true.
setLoading(true);
Kemudian kita melakukan fetching ke dalam Rest API dengan method POST di
dalam endpoint /api/admin/login dengan mengirimkan 2 data, yaitu
email dan password.
await Api.post("/api/admin/login", {
email: email,
password: password,
})
Jika proses otentikasi berhasil dilakukan di dalam backend, maka akan masuk di dalam
promise then. Dan di dalamya pertama kita akan mengupdate state
isLoading menjadi false.
setLoading(false);
Selanjutnya, kita akan menampilkan notifikasi menggunakan React Hot Toast, yang berisi
informasi proses otentikasi berhasil dilakukan.
toast.success("Login Successfully.", {
duration: 4000,
position: "top-right",
style: {
borderRadius: '10px',
background: '#333',
color: '#fff',
},
});
Kemudian kita akan set cookies dengan key token dan isinya adalah
token dari hasil response Rest API.
Cookies.set("token", response.data.token);
Dan setelah itu kita arahkan ke dalam URL /admin/dashboard atau halaman
dashboard menggunakan navigate.
navigate("/admin/dashboard");
Tapi, jika proses otentikasi gagal dilakukan, maka pertama-tama kita juga akan mengubah isi dari
state isLoading menjadi false.
setLoading(false);
Dan melakukan assign response validasi dari Rest API ke dalam state
validation.
setValidation(error.response.data);
Dan di bawah function loginHandler, kita membuat kondisi untuk mengecek apakah
terdapat token di dalam cookies atau tidak. Kondisi ini digunakan ketika kita sudah
melakukan proses otentikasi dan berhasil, kemudian kita coba akses halaman login kembali, maka
akan kita paksa arahkan ke dalam URL /admin/dashboard.
if(Cookies.get("token")) {
return navigate("/admin/dashboard");
}
kemudian di dalam JSX, untuk form action kita arahkan ke dalam function
loginHandler yang sudah kita buat di atas.
<form onSubmit={loginHandler}>
//...
</form>
Untuk input kita berikan event onChange yang isinya melakukan
assign value ke dalam sebuah state. Contohnya seperti berikut ini :
<input type="text" className="form-control" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email Address" />
Di atas, di dalam event onChange kita membuat function dengan parameter
e (event) yang isinya melakukan assign ke dalam state
email menggunakan setEmail dengan value dari inputan itu sendiri,
yaitu e.target.value.
Dan untuk menampilkan validasi, kita membuat kondisi di dalam JSX. Kurang lebih seperti berikut ini :
{validation.email && (
<div className="alert alert-danger">
{validation.email[0]}
</div>
)}
Di atas, jika state validation.email memiliki value, maka akan melakukan
render sintaks HTML di dalamnya.
Langkah 2 - Uji Coba Proses Login
Sekarang kita akan lakukan uji coba proses login, silahkan buka http://localhost:5173/admin/login dan
jika berhasil maka kita akan mendapatkan tampilan seperti berikut ini :
Sekarang silahkan klik button LOGIN tanpa mengisi data apapun, maka kita akan
mendapatkan hasil validasi kurang lebih seperti berikut ini :
kemudian kita coba masukkan data user yang belum ada di dalam database, maka kita akan
mendapatkan error yang berbeda lagi. Kurang lebih seperti berikut ini :
Terakhir, kita akan mencoba untuk memasukkan data user yang ada di dalam database. Dan
jika berhasil maka kurang lebih seperti berikut ini :
Di atas, kita berhasil melakukan proses otentikasi, dimana kita telah mendapatkan notifikasi
Login Successfully. Kemudian kita bisa melakukan check terhadapat token
yang di dapatkan.
Silahkan klik kanan pada browser dan pilih Inspect > Application
> Cookies. Kurang lebih seperti berikut ini :
Dan di atas masih menampilkan halaman blank, karena kita memang belum membuat route untuk
halaman dashboard.
