Halo teman-teman semaunya, pada artikel sebelumnya kita sudah belajar bagaiamana cara membuat proses register di dalam Next.js menggunakan API yang ada di Laravel.
Dan sekarang kita akan lanjutkan belajar bagaimana cara membuat proses login di Next.js dengan JWT yang ada di Laravel.
Langkah 1 - Install Library Js Cookie
Karena JWT berbasis token, maka kita akan menggunakan library tambahan untuk menyimpan token hasil generate JWT di dalam client / browser.
Sebenarnya kita bisa saja menggunakan Cookie Javascript tanpa perlu bantuan library, tapi kode-nya akan terlalu panjang. Oleh sebab itu kita akan memanfaatkan library yang bernama Js Cookie yang fungsinya untuk mempermudah dalam mengelola data cookies di browser.
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Next.js-nya.
npm install js-cookie@3.0.1
Silahkan tunggu proses installasinya sampai selesai dan pastikan teman-teman terhubung dengan internet, karena paketnya akan diunduh secara online.
Langkah 2 - Membuat Proses Login
Sekarang kita akan lanjutkan membuat proses login di Next.js. Silahkan teman-teman buat file baru dengan nama login.js di dalam folder pages, kemudian masukkan kode berikut ini di dalamnya.
//layout
import Layout from "../layouts/default";
//import hook react
import { useState, useEffect } from 'react';
//import Head
import Head from 'next/head';
//import router
import Router from 'next/router';
//import axios
import axios from "axios";
//import js cookie
import Cookies from 'js-cookie';
function Login() {
//define state
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
//define state validation
const [validation, setValidation] = useState([]);
//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(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/login`, formData)
.then((response) => {
//set token on cookies
Cookies.set('token', response.data.token);
//redirect to dashboard
Router.push('/dashboard');
})
.catch((error) => {
//assign error to state "validation"
setValidation(error.response.data);
})
};
//hook useEffect
useEffect(() => {
//check token
if(Cookies.get('token')) {
//redirect page dashboard
Router.push('/dashboard');
}
}, []);
return(
<Layout>
<Head>
<title>Login Account - SantriKoding.com</title>
</Head>
<div className="container" style={{ marginTop: '80px' }}>
<div className="row justify-content-center">
<div className="col-md-5">
<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>
</Layout>
)
}
export default Login
Dari perubahan kode di atas, pertama kita import layout terlebih dahulu.
//layout
import Layout from "../layouts/default";
Kemudian kita import hook useState dan useEffect dari React.js.
//import hook react
import { useState, useEffect } from 'react';
Dan kita juga import Head dari Next.js.
//import Head
import Head from 'next/head';
Karena setelah berhasil register kita akan melakukan navigasi ke route login, maka kita akan import Router dari Next.js.
//import router
import Router from 'next/router';
Kemudian kita import Axios, karena akan kita gunakan untuk mengirim data ke server.
//import axios
import axios from "axios";
Setelah itu, kita import Js Cookie, karena kita akan gunakan untuk menyimpan token di dalam cookies browser.
//import js cookie
import Cookies from 'js-cookie';
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([]);
Setelah itu, kita buat method baru dengan nama loginHandler. Dimana method tersebut akan dijalankan ketika form disubmit.
<form onSubmit={loginHandler}>
//...
</form>
//function "loginHanlder"
const loginHandler = async (e) => {
//...
}
Di dalam method di atas, pertama kita inisialisasi formData dan juga melakukan appends data yang diinputkan dari form ke dalam formData.
//initialize formData
const formData = new FormData();
//append data to formData
formData.append('email', email);
formData.append('password', password);
Dan kita kirimkan data di atas ke server menggunakan Axios dengan method POST untuk proses login.
//send data to server
await axios.post(`${process.env.NEXT_PUBLIC_API_BACKEND}/api/login`, formData)
Jika proses login berhasil dilakukan. Pertama kita akan set token ke cookies browser menggunakan Js Cookie.
//set token on cookies
Cookies.set('token', response.data.token);
Setelah itu, kita redirect atau arahkan ke halaman dashboard.
//redirect to dashboard
Router.push('/dashboard');
Tapi, jika proses login gagal dilakukan, maka kita akan lakukan assign error response validasi ke dalam state validation.
//assign error to state "validation"
setValidation(error.response.data);
Kemudian kita memanggil hook useEffect. Hook ini akan pertama kali dijalankan kerika halaman diakses. Dan pada hook ini akan kita gunakan untuk pengecekan kondisi,
Jika di dalam browser sudah ada cookies dengan nama token, maka kita akan redirect secara paksa ke dalam halaman dashbaord. Artinya sesi login masih ada.
//hook useEffect
useEffect(() => {
//check token
if(Cookies.get('token')) {
//redirect page dashboard
Router.push('/dashboard');
}
}, []);
Langkah 3 - Uji Coba Proses Login
INFORMASI : pastikan project Laravel-nya sudah dijalankan!.
Silahkan teman-teman klik button LOGIN yang ada pada havbar dan jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Silahkan klik button LOGIN tanpa mengisi data apapun dan jika berhasil kita akan mendapatkan error validasi dari Laravel.
Dan sekarang silahkan masukkan data yang tidak ada di dalam database, maka kita akan mendapatkan pesan seperti berikut ini.
Terakhir, silahkan masukkan email dan password yang sebelumnya teman-teman lakukan register dan jika berhasil, maka akan mendapatkan hasil seperti berikut ini.
Di atas, sebenernya kita sudah berhasil melakukan proses login dan error di atas muncul karena kita belum memiliki halaman atau route /dashboard.
Untuk memastikan token JWT ada di dalam browser, teman-teman bisa lihat pada tab Application > Cookies.
Sampai disini pembahasan bagaimana cara membuat proses login di dalam Next.js dengan API dari Laravel JWT. Pada artikel selanjutnya kita akan belajar bagaiamana cara menampilkan user yang sedang login di dalam halaman dashboard.
Terima Kasih