Laravel Breeze Api Untuk Nextjs

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 })