Membuat Fungsi Login Logout

yang perlu diketahui

1. axios instance
2. axios interceptor
3. custom hooks
4. local storage / cookies

How To Login

1. buat Axios instance

const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASEURL,
  headers: {
    'Content-Type': 'application/json',
  },
})

2. Teruskan axios instace tersebut via context, misal menggunakan context yang sudah tersedia oleh alurkerja yaitu AuthContext

<AuthContext.Provider value={axiosInstance}>
    <RouterProvider router={router} />
</AuthContext.Provider>

3. buat login page
4. buat fungsi submit nya untuk ngehit API (pastikan ketika success response API memberikan token)
5. simpan token via local storage / cookies (disini contohnya menggunakan local storage + React Query namun lebih direcommendasikan menggunakan cookies daripada local storage)

const { mutate: login } = useMutation({
  mutationFn: (payload: Inputs) => {
    // axiosInstance diambil dari AuthContext `const axiosInstance = useContext(AuthContext)`
    return axiosInstance.post('/auth/v1/login', { username: payload.username, password: payload.password })
  },
  onSuccess: (res) => {
    const token = res.data.token
    localStorage.setItem('token', token)

   // dan fungsi2 lainnya
  },

})

6. buat customHooks contoh namanya useAuth kenapa harus buat custom hooks? untuk mempermudah mengkases token di komponen manapun

import { useEffect, useState } from 'react'

export const useAuth = () => {
  const [token, setToken] = useState<string | null>(localStorage.getItem('token'))
  const [initialize, setInitilize] = useState(false)

  const logout = () => {
    setToken(null)
    localStorage.removeItem('token')
  }

  useEffect(() => {
    function getToken() {
      setInitilize(false)

      if (localStorage.getItem('token')) {
        setToken(localStorage.getItem('token'))
      } else {
        setToken(null)
      }
    }

    setInitilize(true)

    window.addEventListener('storage', getToken)

    return () => {
      window.removeEventListener('storage', getToken)
    }
  }, [token])

  return { token, setToken, initialize, logout }
}

7. buat komponen AdminLayout dan gunakan untuk membungkus semua halaman yang perlu authentikasi nya

export const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />,
  },

  {
    path: '/',
    element: <AdminLayout />,

    children: [
      { index: true, element: <Home /> },
    ],
  },
])

8. pada komponen AdminLayout gunakan axios interceptor untuk melempar user ke halaman login jika API memberikan response 401 yaitu unauthorized

const { token, initialize, logout } = useAuth()

 useEffect(() => {
    if (token) {
      axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`

      axiosInstance.interceptors.response.use(
        (response) => {
          // Any status code that lie within the range of 2xx cause this function to trigger

          return response
        },
        (error) => {
          // Any status codes that falls outside the range of 2xx cause this function to trigger
          if (error.response.status === 401) {
            navigate('/login')
          }
          return Promise.reject(error)
        }
      )

    } else {
      axiosInstance.defaults.headers.common['Authorization'] = null

      navigate('/login')
    }
  }, [token])

How To Logout

1. buat button logout
2. gunakan custom hooks yang dibuat ketika membuat fungsi login sebelumnya useAuth
3. panggil logout yang mana fungsinya itu ngeclear token dari local storage, dan ngeclear token dari local state, useEffect di AdminLayout akan mendetek perubahan state token dan akan melempar user ke halaman login