feat: implement user authentication and dashboard
Adds a complete user authentication system and a protected dashboard. - Implements JWT-based authentication using ElysiaJS. - Integrates Prisma for database access and user management. - Creates a login page and protected routes for the dashboard. - Adds a dashboard layout with pages for API key management. - Includes necessary UI components from Mantine.
This commit is contained in:
25
src/components/ProtectedRoute.tsx
Normal file
25
src/components/ProtectedRoute.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Navigate, Outlet } from 'react-router-dom'
|
||||
import clientRoutes from '@/clientRoutes'
|
||||
import apiFetch from '@/lib/apiFetch'
|
||||
|
||||
export default function ProtectedRoute() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
async function checkSession() {
|
||||
try {
|
||||
// backend otomatis baca cookie JWT dari request
|
||||
const res = await apiFetch.api.user.find.get()
|
||||
setIsAuthenticated(res.status === 200)
|
||||
} catch {
|
||||
setIsAuthenticated(false)
|
||||
}
|
||||
}
|
||||
checkSession()
|
||||
}, [])
|
||||
|
||||
if (isAuthenticated === null) return null // or loading spinner
|
||||
if (!isAuthenticated) return <Navigate to={clientRoutes['/login']} replace />
|
||||
return <Outlet />
|
||||
}
|
||||
Reference in New Issue
Block a user