From 935258a54a94f10054c289e5cdc9b66de0f1d0fd Mon Sep 17 00:00:00 2001 From: soufiane Date: Tue, 18 Nov 2025 19:45:35 +0100 Subject: [PATCH] fix: resolve SSR prerender errors for login and profil pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix window.location usage in tirages page by adding SSR check - Fix router.push call during SSR in profil page using useEffect - Extract GoogleLoginButton to separate component to fix OAuth provider context - Add null safety check for user object in profil page - All pages now prerender successfully without errors This fixes the 404 page not found error by ensuring proper SSR/CSR separation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/admin/tirages/page.tsx | 6 ++- app/login/page.tsx | 62 ++--------------------------- app/profil/page.tsx | 14 +++++-- components/GoogleLoginButton.tsx | 67 ++++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 63 deletions(-) create mode 100644 components/GoogleLoginButton.tsx diff --git a/app/admin/tirages/page.tsx b/app/admin/tirages/page.tsx index ffc847d..d943528 100644 --- a/app/admin/tirages/page.tsx +++ b/app/admin/tirages/page.tsx @@ -636,7 +636,11 @@ ${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.not Télécharger le rapport - diff --git a/app/login/page.tsx b/app/login/page.tsx index 379d6d8..04b3bad 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -9,16 +9,15 @@ import Button from "@/components/Button"; import { Card } from "@/components/ui/Card"; import Link from "next/link"; import { ROUTES } from "@/utils/constants"; -import { useGoogleLogin } from "@react-oauth/google"; +import { GoogleLoginButton } from "@/components/GoogleLoginButton"; import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk"; import toast from "react-hot-toast"; export const dynamic = 'force-dynamic'; export default function LoginPage() { - const { login, googleLogin, facebookLogin } = useAuth(); + const { login, facebookLogin } = useAuth(); const [isSubmitting, setIsSubmitting] = useState(false); - const [isGoogleLoading, setIsGoogleLoading] = useState(false); const [isFacebookLoading, setIsFacebookLoading] = useState(false); const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false); @@ -56,34 +55,6 @@ export default function LoginPage() { } }; - const googleLoginHandler = useGoogleLogin({ - onSuccess: async (tokenResponse) => { - setIsGoogleLoading(true); - console.log('🔑 Token Google reçu:', tokenResponse); - try { - await googleLogin(tokenResponse.access_token); - } catch (error) { - console.error("Google login error:", error); - } finally { - setIsGoogleLoading(false); - } - }, - onError: (error) => { - console.error("Google login failed:", error); - setIsGoogleLoading(false); - }, - flow: 'implicit', - scope: 'openid email profile', - }); - - const handleGoogleLogin = () => { - if (!hasGoogleAuth) { - toast.error("La connexion Google n'est pas configurée"); - return; - } - googleLoginHandler(); - }; - const handleFacebookLogin = async () => { if (!isFacebookSDKLoaded) { toast.error("Le SDK Facebook n'est pas encore chargé. Veuillez réessayer dans quelques secondes."); @@ -170,34 +141,7 @@ export default function LoginPage() {
{hasGoogleAuth && ( - + )} {hasFacebookAuth && ( diff --git a/app/profil/page.tsx b/app/profil/page.tsx index 4d5108d..5d1e433 100644 --- a/app/profil/page.tsx +++ b/app/profil/page.tsx @@ -1,5 +1,5 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useAuth } from "@/contexts/AuthContext"; @@ -21,6 +21,7 @@ export default function ProfilePage() { const router = useRouter(); const [isEditing, setIsEditing] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); + const [isReady, setIsReady] = useState(false); const { register, @@ -36,8 +37,15 @@ export default function ProfilePage() { }, }); - if (!isAuthenticated || !user) { - router.push(ROUTES.LOGIN); + useEffect(() => { + if (!isAuthenticated || !user) { + router.push(ROUTES.LOGIN); + } else { + setIsReady(true); + } + }, [isAuthenticated, user, router]); + + if (!isReady || !user) { return null; } diff --git a/components/GoogleLoginButton.tsx b/components/GoogleLoginButton.tsx new file mode 100644 index 0000000..7402448 --- /dev/null +++ b/components/GoogleLoginButton.tsx @@ -0,0 +1,67 @@ +"use client"; + +import { useGoogleLogin } from "@react-oauth/google"; +import Button from "@/components/Button"; +import { useAuth } from "@/contexts/AuthContext"; +import { useState } from "react"; + +interface GoogleLoginButtonProps { + disabled?: boolean; + fullWidth?: boolean; +} + +export function GoogleLoginButton({ disabled, fullWidth }: GoogleLoginButtonProps) { + const { googleLogin } = useAuth(); + const [isLoading, setIsLoading] = useState(false); + + const googleLoginHandler = useGoogleLogin({ + onSuccess: async (tokenResponse) => { + setIsLoading(true); + console.log('🔑 Token Google reçu:', tokenResponse); + try { + await googleLogin(tokenResponse.access_token); + } catch (error) { + console.error("Google login error:", error); + } finally { + setIsLoading(false); + } + }, + onError: (error) => { + console.error("Google login failed:", error); + setIsLoading(false); + }, + flow: 'implicit', + scope: 'openid email profile', + }); + + return ( + + ); +}