Iman Sugirman

Fullstack Developer Experience 6 years, using Laravel and ReactJs

Laravel Breeze Api Untuk Nextjs

23 February 2022
Laravel Breeze Api Untuk Nextjs
Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now

Laravel baru-baru ini sudah mengeluarkan First Partynya untuk Implementasi Authentication dengan Sanctum package dari First party Laravel Juga. Berikut adalah Sedikit penjelasan Sanctum :

Laravel Sanctum :

Laravel Sanctum menyediakan sistem otentikasi kelas bulu untuk SPA (aplikasi satu halaman), aplikasi seluler, dan API berbasis token sederhana. Sanctum memungkinkan setiap pengguna aplikasi Anda menghasilkan beberapa token API untuk akun mereka. Token ini dapat diberikan kemampuan / cakupan yang menentukan tindakan mana yang diizinkan untuk dilakukan oleh token.

Laravel Breeze :

Laravel Breeze adalah implementasi minimal dan sederhana dari semua fitur otentikasi Laravel, termasuk login, registrasi, reset kata sandi, verifikasi email, dan konfirmasi kata sandi. Lapisan tampilan default Laravel Breeze terdiri dari template Blade sederhana yang ditata dengan Tailwind CSS.

Laravel Breeze akan kita gunakan sebagai backend Api dan nanti akan kita gunakan Nextjs untuk Front end. Nah mari kita mulai sekarang untuk menginstall dan menjajal Laravel Breeze dan Laravel Sanctum Beraksi

Pertama kita buat Project Laravel terlebih dahulu menggunakan Laravel Installer dan saya biasa menggunakan Valet :

laravel new breezebackend && cd breezebackend

Sekarang kita install laravel breeze

composer require laravel/breeze --dev

Lalu kita publish package breeze untuk Api only :

php artisan breeze:install api // dan masukan juga php artisan migrate

dan nanti akan menghasilkan beberapa file di App/Http/Controllers/Auth.

Oke Sekarang kita sudah membuat Authentication Setup Untuk Api dan sekarang kita buat Nextjs nya.

yarn create next-app breezefrontend cd breezefrontend

Install beberapa package npm :

yarn add axios swr --save

Buat file di folder hooks jika belum ada buat terlebih dahulu foldernya, dan filenya seperti ini :

import useSWR from 'swr'; import axios from '@/lib/axios'; import { useEffect } from 'react'; import { useRouter } from 'next/router'; export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => { const router = useRouter(); const { data: user, error, revalidate, } = useSWR('/api/user', () => axios .get('/api/user') .then((res) => res.data) .catch((error) => { if (error.response.status !== 409) throw error; router.push('/verify-email'); }) ); const csrf = () => axios.get('/sanctum/csrf-cookie'); const register = async ({ setErrors, ...props }) => { await csrf(); setErrors([]); axios .post('/register', props) .then(() => revalidate()) .catch((error) => { if (error.response.status !== 422) throw error; setErrors(Object.values(error.response.data.errors).flat()); }); }; const login = async ({ setErrors, setStatus, ...props }) => { await csrf(); setErrors([]); setStatus(null); axios .post('/login', props) .then(() => revalidate()) .catch((error) => { if (error.response.status !== 422) throw error; setErrors(Object.values(error.response.data.errors).flat()); }); }; const forgotPassword = async ({ setErrors, setStatus, email }) => { await csrf(); setErrors([]); setStatus(null); axios .post('/forgot-password', { email }) .then((response) => setStatus(response.data.status)) .catch((error) => { if (error.response.status !== 422) throw error; setErrors(Object.values(error.response.data.errors).flat()); }); }; const resetPassword = async ({ setErrors, setStatus, ...props }) => { await csrf(); setErrors([]); setStatus(null); axios .post('/reset-password', { token: router.query.token, ...props }) .then((response) => router.push('/login?reset=' + btoa(response.data.status))) .catch((error) => { if (error.response.status != 422) throw error; setErrors(Object.values(error.response.data.errors).flat()); }); }; const resendEmailVerification = ({ setStatus }) => { axios .post('/email/verification-notification') .then((response) => setStatus(response.data.status)); }; const logout = async () => { if (!error) { await axios.post('/logout'); revalidate(); } window.location.pathname = '/login'; }; useEffect(() => { if (middleware === 'guest' && redirectIfAuthenticated && user) router.push(redirectIfAuthenticated); if (middleware === 'auth' && error) logout(); }, [user, error]); return { user, register, login, forgotPassword, resetPassword, resendEmailVerification, logout, }; };

Jika sudah maka penggunaannya nanti di page login contohnya :

import { useAuth } from '@/hooks/auth' ... const { login } = useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard', }) ... // Functionnya seperti ini : login({ email, password, setErrors, setStatus })

Bagian Register juga buat seperti ini :

import { useAuth } from '@/hooks/auth' ... const { register } = useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard', }) ... // Functionnya seperti ini : register({ name, email, password, password_confirmation, setErrors })
Cloud Server Untuk Laravel
Dapatkan Gratis $100 Untuk Deploy Laravel
Deploy Now
Subscribe to our newsletter!
Dapatkan Tutorial terbaru dari saya dikirim ke email anda...