Fix email confirmation flow

Corrected the email confirmation page to handle the token from the URL hash, authenticate the user, and display success/error messages. Added redirection to the dashboard after successful confirmation.
-edited src/pages/EmailConfirmation.tsx

src/pages/EmailConfirmation.tsx

@@ -1,6 +1,6 @@
 
 import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
@@ -8,7 +8,6 @@ import { supabase } from '@/integrations/supabase/client';
 import { toast } from "sonner";
 
 const EmailConfirmation = () => {
-  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
   const [message, setMessage] = useState('');
@@ -16,66 +15,133 @@ const EmailConfirmation = () => {
   useEffect(() => {
     const handleEmailConfirmation = async () => {
       try {
-        // Pegar os tokens da URL
+        console.log('🔐 Iniciando processo de confirmação de email...');
-        const token_hash = searchParams.get('token_hash');
+        console.log('📍 URL atual:', window.location.href);
+        console.log('🔗 Hash:', window.location.hash);
+        console.log('🔗 Search:', window.location.search);
+
+        // Verificar se há tokens no hash (formato novo do Supabase)
+        const hashParams = new URLSearchParams(window.location.hash.substring(1));
+        const accessToken = hashParams.get('access_token');
+        const refreshToken = hashParams.get('refresh_token');
+        const tokenType = hashParams.get('type');
+
+        // Verificar se há tokens nos query params (formato antigo)
+        const searchParams = new URLSearchParams(window.location.search);
+        const tokenHash = searchParams.get('token_hash');
         const type = searchParams.get('type');
 
-        if (token_hash && type) {
+        console.log('📋 Tokens encontrados:', {
-          console.log('🔐 Processando confirmação de email...');
+          accessToken: accessToken ? 'presente' : 'ausente',
+          refreshToken: refreshToken ? 'presente' : 'ausente',
+          tokenType,
+          tokenHash: tokenHash ? 'presente' : 'ausente',
+          type
+        });
 
-          const { data, error } = await supabase.auth.verifyOtp({
+        // Processar tokens do hash (formato mais comum)
-            token_hash,
+        if (accessToken && refreshToken) {
-            type: type as any,
+          console.log('✅ Processando tokens do hash fragment...');
+          
+          const { data, error } = await supabase.auth.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken
           });
 
           if (error) {
-            console.error('❌ Erro na confirmação:', error);
+            console.error('❌ Erro ao definir sessão:', error);
             setStatus('error');
-            setMessage('Erro ao confirmar email. O link pode ter expirado.');
+            setMessage('Erro ao confirmar email. Tente fazer login novamente.');
             toast.error("Erro na confirmação", {
-              description: "O link de confirmação pode ter expirado. Tente fazer login novamente.",
+              description: "Não foi possível confirmar seu email. Tente fazer login.",
             });
           } else {
-            console.log('✅ Email confirmado com sucesso:', data);
+            console.log('✅ Sessão definida com sucesso:', data);
             setStatus('success');
-            setMessage('Email confirmado com sucesso! Você já pode fazer login.');
+            setMessage('Email confirmado com sucesso! Redirecionando para o dashboard...');
             toast.success("Email confirmado!", {
               description: "Sua conta foi ativada com sucesso. Redirecionando...",
             });
             
-            // Redirecionar para login após 3 segundos
+            // Redirecionar para dashboard após 2 segundos
             setTimeout(() => {
-              navigate('/auth', { 
+              navigate('/dashboard', { replace: true });
-                state: { 
+            }, 2000);
-                  showSuccessMessage: true,
-                  message: "✅ Email confirmado! Agora você pode fazer login com suas credenciais." 
-                } 
-              });
-            }, 3000);
           }
-        } else {
-          setStatus('error');
-          setMessage('Link de confirmação inválido.');
         }
+        // Processar tokens dos query params (formato antigo)
+        else if (tokenHash && type) {
+          console.log('✅ Processando tokens dos query params...');
+          
+          const { data, error } = await supabase.auth.verifyOtp({
+            token_hash: tokenHash,
+            type: type as any,
+          });
+
+          if (error) {
+            console.error('❌ Erro na verificação OTP:', error);
+            setStatus('error');
+            setMessage('Link de confirmação inválido ou expirado.');
+            toast.error("Erro na confirmação", {
+              description: "O link de confirmação pode ter expirado. Tente fazer login novamente.",
+            });
+          } else {
+            console.log('✅ OTP verificado com sucesso:', data);
+            setStatus('success');
+            setMessage('Email confirmado com sucesso! Redirecionando para o dashboard...');
+            toast.success("Email confirmado!", {
+              description: "Sua conta foi ativada com sucesso. Redirecionando...",
+            });
+            
+            // Redirecionar para dashboard após 2 segundos
+            setTimeout(() => {
+              navigate('/dashboard', { replace: true });
+            }, 2000);
+          }
+        }
+        // Nenhum token encontrado
+        else {
+          console.warn('⚠️ Nenhum token válido encontrado na URL');
+          setStatus('error');
+          setMessage('Link de confirmação inválido. Verifique se você clicou no link correto do email.');
+          toast.error("Link inválido", {
+            description: "Este link de confirmação não é válido.",
+          });
+        }
+
       } catch (error) {
-        console.error('❌ Erro geral na confirmação:', error);
+        console.error('💥 Erro geral na confirmação:', error);
         setStatus('error');
-        setMessage('Ocorreu um erro inesperado.');
+        setMessage('Ocorreu um erro inesperado. Tente novamente.');
+        toast.error("Erro inesperado", {
+          description: "Ocorreu um erro ao processar a confirmação.",
+        });
       }
     };
 
     handleEmailConfirmation();
-  }, [searchParams, navigate]);
+  }, [navigate]);
 
   const handleBackToLogin = () => {
     navigate('/auth');
   };
 
+  const handleGoToDashboard = () => {
+    navigate('/dashboard');
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-50 px-4">
       <Card className="w-full max-w-md">
         <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-2xl font-bold">Confirmação de Email</CardTitle>
+          <div className="flex items-center justify-center space-x-2 mb-4">
+            <img 
+              src="/lovable-uploads/7149adf3-440a-491e-83c2-d964a3348cc9.png" 
+              alt="Finance Home Logo" 
+              className="h-8 w-8"
+            />
+            <CardTitle className="text-xl font-bold text-blue-700">Finance Home</CardTitle>
+          </div>
           <CardDescription>
             {status === 'loading' && "Processando confirmação do seu email..."}
             {status === 'success' && "Email confirmado com sucesso!"}
@@ -99,9 +165,14 @@ const EmailConfirmation = () => {
                 <p className="text-center text-green-700 font-medium">
                   {message}
                 </p>
-                <p className="text-center text-sm text-muted-foreground">
+                <div className="flex flex-col gap-2 w-full">
-                  Você será redirecionado automaticamente em alguns segundos...
+                  <Button onClick={handleGoToDashboard} className="w-full bg-blue-600 hover:bg-blue-700">
-                </p>
+                    Ir para Dashboard
+                  </Button>
+                  <Button onClick={handleBackToLogin} variant="outline" className="w-full">
+                    Fazer Login
+                  </Button>
+                </div>
               </>
             )}