diff --git a/src/pages/EmailConfirmation.tsx b/src/pages/EmailConfirmation.tsx index e463099..839287d 100644 --- a/src/pages/EmailConfirmation.tsx +++ b/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 - const token_hash = searchParams.get('token_hash'); + console.log('🔐 Iniciando processo de confirmação de email...'); + 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('🔐 Processando confirmação de email...'); + + console.log('📋 Tokens encontrados:', { + accessToken: accessToken ? 'presente' : 'ausente', + refreshToken: refreshToken ? 'presente' : 'ausente', + tokenType, + tokenHash: tokenHash ? 'presente' : 'ausente', + type + }); + + // Processar tokens do hash (formato mais comum) + if (accessToken && refreshToken) { + console.log('✅ Processando tokens do hash fragment...'); - const { data, error } = await supabase.auth.verifyOtp({ - token_hash, - type: type as any, + 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', { - state: { - showSuccessMessage: true, - message: "✅ Email confirmado! Agora você pode fazer login com suas credenciais." - } - }); - }, 3000); + navigate('/dashboard', { replace: true }); + }, 2000); } - } 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 (
- Confirmação de Email +
+ Finance Home Logo + Finance Home +
{status === 'loading' && "Processando confirmação do seu email..."} {status === 'success' && "Email confirmado com sucesso!"} @@ -99,9 +165,14 @@ const EmailConfirmation = () => {

{message}

-

- Você será redirecionado automaticamente em alguns segundos... -

+
+ + +
)}