Files
btpxpress-frontend/app/auth/callback/page.tsx

82 lines
2.9 KiB
TypeScript

'use client';
import React, { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { ProgressSpinner } from 'primereact/progressspinner';
const AuthCallbackPage = () => {
const router = useRouter();
const searchParams = useSearchParams();
const [status, setStatus] = useState('Traitement de l'authentification...');
useEffect(() => {
const handleAuthCallback = async () => {
try {
const code = searchParams.get('code');
const state = searchParams.get('state');
const error = searchParams.get('error');
if (error) {
setStatus(`Erreur d'authentification: ${error}`);
setTimeout(() => router.push('/auth/login'), 3000);
return;
}
if (!code) {
setStatus('Code d\'autorisation manquant');
setTimeout(() => router.push('/auth/login'), 3000);
return;
}
setStatus('Échange du code d\'autorisation...');
// Échanger le code contre des tokens
const response = await fetch('/api/auth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ code, state }),
});
if (!response.ok) {
throw new Error('Échec de l\'échange de token');
}
const tokens = await response.json();
setStatus('Authentification réussie, redirection...');
// Stocker les tokens
if (tokens.access_token) {
localStorage.setItem('accessToken', tokens.access_token);
localStorage.setItem('refreshToken', tokens.refresh_token);
localStorage.setItem('idToken', tokens.id_token);
}
// Rediriger vers le dashboard
router.push('/dashboard');
} catch (error) {
console.error('Erreur lors du traitement de l\'authentification:', error);
setStatus('Erreur lors de l\'authentification');
setTimeout(() => router.push('/auth/login'), 3000);
}
};
handleAuthCallback();
}, [searchParams, router]);
return (
<div className="flex flex-column align-items-center justify-content-center min-h-screen">
<div className="card p-4 text-center">
<ProgressSpinner style={{ width: '50px', height: '50px' }} />
<h3 className="mt-3">Authentification en cours</h3>
<p className="text-600">{status}</p>
</div>
</div>
);
};
export default AuthCallbackPage;