feat: integrate auth

apps/hackathon/src/app/auth/callback/page.tsx

@@ -1,11 +1,11 @@
 import { FC, ReactElement, useEffect, useState, useRef } from 'react';
 import { useNavigate } from 'react-router';
-import { useAuthStore, supabase } from '@imphnen-frontend-service/service';
+import { useGitHubCallback } from '@imphnen-frontend-service/service';
 import { toast } from 'sonner';
 
 const CallbackPage: FC = (): ReactElement => {
   const navigate = useNavigate();
-  const { setSession } = useAuthStore();
+  const { mutateAsync: exchangeGitHubCode } = useGitHubCallback();
   const [isProcessing, setIsProcessing] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const hasRunRef = useRef(false);
@@ -13,134 +13,33 @@ const CallbackPage: FC = (): ReactElement => {
   useEffect(() => {
     const handleCallback = async () => {
       if (hasRunRef.current) {
-        // console.log('[Callback] Already processed, skipping...');
         return;
       }
       hasRunRef.current = true;
+
       try {
-        // console.log('[Callback] Processing OAuth callback...');
-        // console.log('[Callback] Current URL:', globalThis.location.href);
+        // Get the code from URL query params
+        const urlParams = new URLSearchParams(globalThis.location.search);
+        const code = urlParams.get('code');
 
-        // Supabase client is configured with detectSessionInUrl: true
-        // This means Supabase automatically detects and processes OAuth tokens from the URL hash
-        // We just need to wait a moment for it to complete, then check for the session
-
-        // console.log('[Callback] Waiting for Supabase to process OAuth callback...');
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-
-        // Get the session that Supabase automatically created from the URL hash
-        const {
-          data: { session: sessionData },
-          error: sessionError,
-        } = await supabase.auth.getSession();
-
-        if (sessionError) {
-          // console.error('[Callback] Session error:', sessionError);
-          throw new Error(sessionError.message || 'Failed to get session');
+        if (!code) {
+          throw new Error('No authorization code received from GitHub');
         }
 
-        if (!sessionData || !sessionData.user) {
-          throw new Error(
-            'No session found after OAuth callback. Please try logging in again.'
-          );
-        }
+        // Exchange the code for tokens using backend API
+        const result = await exchangeGitHubCode({ code });
 
-        // console.log('[Callback] Supabase session established:', {
-        //   userId: sessionData.user.id,
-        //   email: sessionData.user.email,
-        // });
-
-        // Create/update user in the users table (for foreign key constraints)
-        // console.log('[Callback] Creating/updating user record...');
-        const { data: userData, error: upsertError } = await supabase
-          .from('users')
-          .upsert(
-            {
-              id: sessionData.user.id,
-              email: sessionData.user.email || '',
-              fullname:
-                sessionData.user.user_metadata?.full_name ||
-                sessionData.user.user_metadata?.name ||
-                sessionData.user.email?.split('@')[0] ||
-                '',
-              avatar: sessionData.user.user_metadata?.avatar_url || '',
-              is_active: true,
-              updated_at: new Date().toISOString(),
-            },
-            {
-              onConflict: 'id',
-            }
-          )
-          .select()
-          .single();
-
-        if (upsertError) {
-          // console.warn('[Callback] Failed to create user record:', upsertError);
-          // Don't throw - continue with login even if user record creation fails
-        } else {
-          // console.log('[Callback] User record created/updated successfully');
-        }
-
-        // Store user-friendly data in Zustand for UI purposes
-        // Supabase now manages the actual auth session
-        // Use data from database if available, otherwise use OAuth metadata
-        const userRecord = userData || {
-          id: sessionData.user.id,
-          email: sessionData.user.email || '',
-          fullname:
-            sessionData.user.user_metadata?.full_name ||
-            sessionData.user.user_metadata?.name ||
-            sessionData.user.email?.split('@')[0] ||
-            '',
-          avatar: sessionData.user.user_metadata?.avatar_url || '',
-          phone_number: '',
-          birthdate: '',
-          gender: '',
-          is_active: true,
-        };
-
-        setSession({
-          token: {
-            access_token: sessionData.access_token,
-            refresh_token: sessionData.refresh_token || '',
-          },
-          user: {
-            id: userRecord.id,
-            email: userRecord.email,
-            fullname: userRecord.fullname,
-            phone_number: userRecord.phone_number || '',
-            avatar: userRecord.avatar || '',
-            birthdate: userRecord.birthdate || '',
-            gender: userRecord.gender || '',
-            is_active: userRecord.is_active,
-            location: userRecord.location,
-            bio: userRecord.bio,
-            skills: userRecord.skills,
-            role: {
-              id: '',
-              name: 'user',
-              permissions: [],
-              created_at: '',
-              updated_at: '',
-            },
-          },
-        });
-
-        // console.log('[Callback] Session stored successfully');
         toast.success('Login successful!');
         setIsProcessing(false);
 
         // Check if user has completed onboarding (has location)
-        // Use globalThis.location.replace for hard redirect to prevent history issues
-        if (userRecord.location) {
-          // console.log('[Callback] User has completed onboarding, redirecting to dashboard...');
+        if (result.user.location) {
           globalThis.location.replace('/dashboard');
         } else {
-          // console.log('[Callback] User needs onboarding, redirecting...');
           globalThis.location.replace('/onboarding/user');
         }
       } catch (err) {
-        // console.error('[Callback] Error:', err);
+        console.error('[Callback] Error:', err);
         setError((err as Error).message);
         setIsProcessing(false);
         toast.error('An error occurred during login');
@@ -153,21 +52,21 @@ const CallbackPage: FC = (): ReactElement => {
 
     handleCallback();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Run only once on mount
+  }, []);
 
   if (error) {
     return (
-      <div className="flex justify-center items-center min-h-screen bg-gray-50 px-4">
-        <div className="bg-white w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200">
+      <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 px-4">
+        <div className="bg-white dark:bg-gray-900 w-full max-w-2xl p-8 rounded-2xl shadow-lg border border-red-200 dark:border-red-800">
           <div className="text-center mb-6">
             <div className="text-red-500 text-5xl mb-4">⚠️</div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
               GitHub Login Failed
             </h2>
-            <p className="text-red-600 mb-4 whitespace-pre-line">{error}</p>
+            <p className="text-red-600 dark:text-red-400 mb-4 whitespace-pre-line">{error}</p>
           </div>
 
-          <p className="text-gray-600 text-sm mt-6 text-center">
+          <p className="text-gray-600 dark:text-gray-400 text-sm mt-6 text-center">
             Redirecting to login page in 3 seconds...
           </p>
         </div>