44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
'use client'
|
|
import { useEffect } from 'react'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
interface RequireAuthProps {
|
|
children: React.ReactNode
|
|
redirectTo?: string
|
|
}
|
|
|
|
export function RequireAuth({ children, redirectTo = '/auth' }: RequireAuthProps) {
|
|
const { user, loading, checkAuth } = useAuth()
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
// Trigger auth check when component mounts
|
|
checkAuth()
|
|
}, [checkAuth])
|
|
|
|
useEffect(() => {
|
|
// Redirect if not authenticated after loading
|
|
if (!loading && !user) {
|
|
// Store the current path as the return URL
|
|
const currentPath = window.location.pathname + window.location.search
|
|
const returnUrl = encodeURIComponent(currentPath)
|
|
router.push(`${redirectTo}?returnUrl=${returnUrl}`)
|
|
}
|
|
}, [user, loading, router, redirectTo])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!user) {
|
|
return null
|
|
}
|
|
|
|
return <>{children}</>
|
|
}
|