import { useEffect, useState } from "react"
import axios from "axios"
const api = axios.create({
baseURL: import.meta.env.VITE_SERVER_URL,
withCredentials: true
})
const useAuth = () => {
const [isAuthenticated, setIsAuthenticated] = useState(null)
useEffect(() => {
const checkAuth = async () => {
try {
await api.get("/api/check-auth")
setIsAuthenticated(true)
} catch {
setIsAuthenticated(false)
}
}
checkAuth()
}, [])
return isAuthenticated
}
export default useAuth
import { Navigate, Outlet } from "react-router-dom"
import useAuth from "./useAuth"
const ProtectedRoutes = () => {
const isAuthenticated = useAuth()
if (isAuthenticated === null) return <p>Loading...</p>
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />
}
export default ProtectedRoutes
import { Navigate, Outlet } from "react-router-dom"
import useAuth from "./useAuth"
const PublicRoutes = () => {
const isAuthenticated = useAuth()
if (isAuthenticated === null) return <p>Loading...</p>
return isAuthenticated ? <Navigate to="/" /> : <Outlet />
}
export default PublicRoutes
export const App = () => {
return (
<div>
<BrowserRouter>
<Routes>
<Route element={<PublicRoutes />}>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/verification-success" element={<VerificationSuccess />} />
<Route path="/verification-error" element={<VerificationError />} />
</Route>
<Route element={<ProtectedRoutes />}>
<Route path="/" element={<Dashboard />} />
</Route>
</Routes>
</BrowserRouter>
</div>
)
}