Autenticação com Google OAuth

// 📁 sign-in-form.tsx (baseado no arquivo fornecido)
export function SignInForm() {
  const router = useRouter();
  const getProfile = useAuthStore((state) => state.getProfile);
  const [oauthWindow, setOauthWindow] = useState<Window | null>(null);

  // 🎯 Handler para abrir popup OAuth
  const handleGoogleSignIn = () => {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

    // 📐 Dimensões e posicionamento do popup
    const width = 500;
    const height = 600;
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2;

    // 🪟 Abre popup direcionando para endpoint OAuth do backend
    const popup = window.open(
      `${apiUrl}/auth/google`,  // 🎯 Endpoint que inicia OAuth
      'google-oauth',             // 🏷️ Nome da janela
      `width=${width},height=${height},left=${left},top=${top},popup=yes`
    );

    if (popup) {
      setOauthWindow(popup);
    } else {
      toast.error('Erro ao abrir janela de autenticação');
    }
  };

  return (
    // ... resto do formulário
    <Button
      type="button"
      variant="outline"
      className="w-full"
      onClick={handleGoogleSignIn}
      disabled={isLoading}
    >
      <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
        {/* 🎨 Ícone oficial do Google */}
        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
      </svg>
      Entrar com Google
    </Button>
  );
}

// 🎨 Melhorias adicionais para experiência do usuário

const handleGoogleSignIn = () => {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

  // 🎯 Validação se popup blocker está ativo
  const popup = window.open(
    `${apiUrl}/auth/google`,
    'google-oauth',
    'width=500,height=600,left=300,top=200,popup=yes,scrollbars=yes'
  );

  if (!popup) {
    // 🚨 Popup foi bloqueado
    toast.error('Popup bloqueado! Por favor, permita popups para este site.');
    return;
  }

  // 💫 Foco no popup para melhor UX
  popup.focus();
  
  // 🔄 Monitoring: detecta se usuário fechou popup manualmente
  const checkClosed = setInterval(() => {
    if (popup.closed) {
      clearInterval(checkClosed);
      // 🛑 Usuário cancelou OAuth
      console.log('OAuth cancelado pelo usuário');
      setOauthWindow(null);
    }
  }, 1000);

  setOauthWindow(popup);
};

// 📁 sign-in-form.tsx (baseado no arquivo fornecido)
export function SignInForm() {
  const router = useRouter();
  const getProfile = useAuthStore((state) => state.getProfile);
  const [oauthWindow, setOauthWindow] = useState<Window | null>(null);

  useEffect(() => {
    // 🎧 Listener para receber mensagens do popup OAuth
    const handleMessage = async (event: MessageEvent) => {
      // 🛡️ CRÍTICO: Verifica a origem da mensagem
      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
      if (event.origin !== apiUrl) {
        console.warn('Mensagem de origem não confiável:', event.origin);
        return;
      }

      // 🔍 Verifica se é uma mensagem de autenticação
      if (event.data?.type === 'auth-complete') {
        const { success, error } = event.data.data;

        if (success) {
          // ✅ OAuth completado com sucesso
          try {
            // 👤 Os cookies já foram definidos pelo backend com httpOnly
            // Apenas fazemos a requisição para buscar o perfil atualizado
            await getProfile();
            toast.success('Login realizado com sucesso!');
            router.push('/dashboard');
          } catch {
            toast.error('Erro ao completar login');
          }
        } else {
          // ❌ Erro no OAuth
          toast.error(error || 'Erro ao fazer login com Google');
        }

        // 🚪 Fecha o popup se ainda estiver aberto
        if (oauthWindow && !oauthWindow.closed) {
          oauthWindow.close();
        }
        setOauthWindow(null);
      }
    };

    // 📡 Registra o listener
    window.addEventListener('message', handleMessage);

    // 🧹 Cleanup: remove listener quando componente desmonta
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, [oauthWindow, router, getProfile]); // 🔄 Deps necessárias

  // ... resto do componente
}

// 🏗️ Interface TypeScript para mensagens OAuth
interface OAuthMessage {
  type: 'auth-complete';
  data: {
    success: boolean;
    error?: string;
    user?: {
      id: string;
      name: string;
      email: string;
      avatar?: string;
    };
  };
}

// 🎯 Handler tipado
const handleMessage = async (event: MessageEvent<OAuthMessage>) => {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
  
  if (event.origin !== apiUrl) return;

  if (event.data?.type === 'auth-complete') {
    const { success, error, user } = event.data.data;
    
    if (success) {
      console.log('✅ Login bem-sucedido:', user?.name);
      await getProfile(); // Atualiza store
      router.push('/dashboard');
    } else {
      console.error('❌ Erro OAuth:', error);
      toast.error(error || 'Falha na autenticação');
    }
    
    // Limpa popup
    if (oauthWindow && !oauthWindow.closed) {
      oauthWindow.close();
    }
    setOauthWindow(null);
  }
};

// 📁 src/http/routes/auth-google.ts
import { Elysia } from 'elysia'
import { env } from '../../env'

export const authGoogle = new Elysia()
  .get('/auth/google', async ({ set }) => {
    // 🔧 Configuração dos parâmetros OAuth
    const googleAuthUrl = 'https://accounts.google.com/o/oauth2/v2/auth'
    
    // 🎯 Parâmetros necessários para OAuth Google
    const params = new URLSearchParams({
      client_id: env.GOOGLE_CLIENT_ID,
      redirect_uri: env.GOOGLE_CALLBACK_URL,
      response_type: 'code',
      scope: 'openid email profile', // 🔍 Dados que solicitamos
      access_type: 'offline',
      prompt: 'consent'
    })

    // 🌍 Redireciona para Google OAuth
    set.redirect = `${googleAuthUrl}?${params.toString()}`
  })

// 📁 src/http/routes/auth-google-callback.ts
import { Elysia } from 'elysia'
import { db } from '../../db'
import { users } from '../../db/schema'
import { eq } from 'drizzle-orm'
import { jwt } from '@elysiajs/jwt'
import { env } from '../../env'

export const authGoogleCallback = new Elysia()
  .use(jwt({ name: 'jwt', secret: env.JWT_SECRET }))
  .get('/auth/google/callback', async ({ query, set, jwt, setCookie }) => {
    try {
      const { code, error } = query

      if (error || !code) {
        return generateErrorResponse(error || 'Código não fornecido')
      }

      // 🔄 1. Trocar code por access token
      const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          client_id: env.GOOGLE_CLIENT_ID,
          client_secret: env.GOOGLE_CLIENT_SECRET,
          code: code as string,
          grant_type: 'authorization_code',
          redirect_uri: env.GOOGLE_CALLBACK_URL,
        }),
      })

      const tokenData = await tokenResponse.json()

      // 👤 2. Buscar dados do usuário
      const userResponse = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
        headers: { Authorization: `Bearer ${tokenData.access_token}` },
      })

      const googleUser = await userResponse.json()

      // 🔍 3. Buscar ou criar usuário
      let user = await db.query.users.findFirst({
        where: eq(users.email, googleUser.email),
      })

      if (!user) {
        const [newUser] = await db.insert(users).values({
          email: googleUser.email,
          name: googleUser.name,
          role: 'customer',
          avatar: googleUser.picture,
          googleId: googleUser.id,
        }).returning()
        user = newUser
      }

      // 🔐 4. Gerar JWT e definir cookie
      const token = await jwt.sign({
        sub: user.id,
        email: user.email,
        role: user.role,
      })

      setCookie('auth-token', token, {
        httpOnly: true,
        secure: env.NODE_ENV === 'production',
        sameSite: env.NODE_ENV === 'production' ? 'none' : 'lax',
        maxAge: 60 * 60 * 24 * 7, // 7 dias
        path: '/',
      })

      // ✅ 5. Retornar HTML com postMessage
      return generateSuccessResponse(user)

    } catch (error) {
      console.error('Erro OAuth:', error)
      return generateErrorResponse('Erro interno')
    }
  })