feat: enhance login and registration pages with session handling

- Added `useEffect` to redirect authenticated users to the home page in both `LoginPage` and `RegisterPage`.
- Integrated `useSession` from `next-auth/react` to manage session state and loading indicators.
- Implemented loading state display while checking session status, improving user experience during authentication.
- Prevented form display for authenticated users, streamlining the login and registration process.
This commit is contained in:
Julien Froidefond
2025-09-30 23:37:37 +02:00
parent 8519ec094f
commit 4885871657
2 changed files with 54 additions and 3 deletions

View File

@@ -1,7 +1,7 @@
'use client' 'use client'
import { useState } from 'react' import { useState, useEffect } from 'react'
import { signIn, getSession } from 'next-auth/react' import { signIn, getSession, useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import Link from 'next/link' import Link from 'next/link'
import { Button } from '@/components/ui/Button' import { Button } from '@/components/ui/Button'
@@ -15,6 +15,14 @@ export default function LoginPage() {
const [error, setError] = useState('') const [error, setError] = useState('')
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const router = useRouter() const router = useRouter()
const { data: session, status } = useSession()
// Redirection si l'utilisateur est déjà connecté
useEffect(() => {
if (status === 'authenticated' && session) {
router.push('/')
}
}, [status, session, router])
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
@@ -44,6 +52,23 @@ export default function LoginPage() {
} }
} }
// Afficher un loader pendant la vérification de session
if (status === 'loading') {
return (
<div className="min-h-screen relative overflow-hidden">
<TowerBackground />
<div className="relative z-10 min-h-screen flex items-center justify-center">
<div className="text-[var(--foreground)]">Chargement...</div>
</div>
</div>
)
}
// Ne pas afficher le formulaire si l'utilisateur est connecté
if (status === 'authenticated') {
return null
}
return ( return (
<div className="min-h-screen relative overflow-hidden"> <div className="min-h-screen relative overflow-hidden">
<TowerBackground /> <TowerBackground />

View File

@@ -1,7 +1,8 @@
'use client' 'use client'
import { useState } from 'react' import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { Button } from '@/components/ui/Button' import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input' import { Input } from '@/components/ui/Input'
import Link from 'next/link' import Link from 'next/link'
@@ -18,6 +19,14 @@ export default function RegisterPage() {
const [error, setError] = useState('') const [error, setError] = useState('')
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const router = useRouter() const router = useRouter()
const { data: session, status } = useSession()
// Redirection si l'utilisateur est déjà connecté
useEffect(() => {
if (status === 'authenticated' && session) {
router.push('/')
}
}, [status, session, router])
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
@@ -67,6 +76,23 @@ export default function RegisterPage() {
} }
} }
// Afficher un loader pendant la vérification de session
if (status === 'loading') {
return (
<div className="min-h-screen relative overflow-hidden">
<TowerBackground />
<div className="relative z-10 min-h-screen flex items-center justify-center">
<div className="text-[var(--foreground)]">Chargement...</div>
</div>
</div>
)
}
// Ne pas afficher le formulaire si l'utilisateur est connecté
if (status === 'authenticated') {
return null
}
return ( return (
<div className="min-h-screen relative overflow-hidden"> <div className="min-h-screen relative overflow-hidden">
<TowerBackground /> <TowerBackground />