Fix auth issues: sign out working, store signup form data, OAuth users onboarding

FRRONTEEEND/App.tsx

@@ -16,9 +16,17 @@ import { User, LogOut, Loader2 } from 'lucide-react';
 // Inner app component that uses auth context
 const AppContent: React.FC = () => {
   const [view, setView] = useState<'landing' | 'chat' | 'auth'>('landing');
-  const { user, isAuthenticated, loading, signOut, isConfigured } = useAuth();
+  const { user, isAuthenticated, loading, signOut, isConfigured, needsOnboarding } = useAuth();
   const [showUserMenu, setShowUserMenu] = useState(false);
 
+  // If user is authenticated but needs onboarding, show auth page
+  React.useEffect(() => {
+    if (isAuthenticated && needsOnboarding && view !== 'auth') {
+      console.log('User needs onboarding, showing form...');
+      setView('auth');
+    }
+  }, [isAuthenticated, needsOnboarding, view]);
+
   // Handle launch console - redirect to auth if not logged in
   const handleLaunchConsole = () => {
     if (isAuthenticated) {
@@ -91,8 +99,13 @@ const AppContent: React.FC = () => {
                   </div>
                   <button
                     onClick={async () => {
-                      await signOut();
-                      setShowUserMenu(false);
+                      try {
+                        await signOut();
+                        setShowUserMenu(false);
+                        setView('landing');
+                      } catch (error) {
+                        console.error('Sign out failed:', error);
+                      }
                     }}
                     className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-400 hover:bg-white/5 transition-colors"
                   >

FRRONTEEEND/components/AuthPage.tsx

@@ -26,6 +26,8 @@ import {
 import { cn } from "../lib/utils";
 import { useAuth } from "../lib/AuthContext";
 import { Logo } from "./Logo";
+import { saveUserProfile } from "../lib/supabase";
+import { supabase } from "../lib/supabase";
 
 const steps = [
   { id: "personal", title: "Personal Info" },
@@ -63,7 +65,7 @@ interface AuthPageProps {
 }
 
 export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
-  const { signIn, signUp, signInWithGoogle, signInWithGithub, isConfigured } = useAuth();
+  const { signIn, signUp, signInWithGoogle, signInWithGithub, isConfigured, user } = useAuth();
   const [mode, setMode] = useState<'signin' | 'signup'>('signin');
   const [currentStep, setCurrentStep] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -84,6 +86,18 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
     industry: "",
   });
 
+  // If user is already authenticated (OAuth), pre-fill email and switch to signup mode for onboarding
+  React.useEffect(() => {
+    if (user && user.email) {
+      setFormData(prev => ({
+        ...prev,
+        email: user.email || '',
+        name: user.user_metadata?.full_name || user.user_metadata?.name || ''
+      }));
+      setMode('signup');
+    }
+  }, [user]);
+
   const updateFormData = (field: keyof FormData, value: string) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
     setError(null);
@@ -139,22 +153,66 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
     setIsSubmitting(true);
     setError(null);
 
-    if (formData.password !== formData.confirmPassword) {
-      setError("Passwords don't match");
-      setIsSubmitting(false);
-      return;
-    }
-
+    // Check if user is already authenticated (OAuth flow)
+    const isOAuthUser = !!user;
+    
     try {
-      const { error } = await signUp(formData.email, formData.password);
-      if (error) {
-        setError(error.message);
+      let userId: string;
+      
+      if (isOAuthUser) {
+        // User already authenticated via OAuth, just save profile
+        userId = user.id;
       } else {
-        setSuccess('Account created! Check your email to confirm your account.');
-        setTimeout(() => {
-          onSuccess?.();
-        }, 2000);
+        // Email/password signup
+        if (formData.password !== formData.confirmPassword) {
+          setError("Passwords don't match");
+          setIsSubmitting(false);
+          return;
+        }
+
+        const { error } = await signUp(formData.email, formData.password);
+        if (error) {
+          setError(error.message);
+          setIsSubmitting(false);
+          return;
+        }
+        
+        // Wait for Supabase to create the auth user
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        // Get the user ID from auth session
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session?.user) {
+          setError('Failed to get user session. Please sign in to continue.');
+          setIsSubmitting(false);
+          return;
+        }
+        userId = session.user.id;
       }
+      
+      // Save user profile data to database
+      const profileData = {
+        user_id: userId,
+        name: formData.name,
+        email: formData.email,
+        primary_goal: formData.primaryGoal,
+        target_outcome: formData.targetOutcome,
+        data_types: formData.dataTypes,
+        profession: formData.profession,
+        experience: formData.experience,
+        industry: formData.industry,
+        onboarding_completed: true
+      };
+      
+      const savedProfile = await saveUserProfile(profileData);
+      if (!savedProfile) {
+        console.warn('Failed to save profile data, but auth succeeded');
+      }
+      
+      setSuccess(isOAuthUser ? 'Profile completed! Redirecting...' : 'Account created successfully! Redirecting...');
+      setTimeout(() => {
+        onSuccess?.();
+      }, 1500);
     } catch (err: any) {
       if (err.message?.includes('Failed to fetch')) {
         setError('Unable to connect to authentication server. Please try again later.');
@@ -192,8 +250,15 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
   };
 
   const isStepValid = () => {
+    // For OAuth users (already authenticated), skip password validation
+    const isOAuthUser = !!user;
+    
     switch (currentStep) {
       case 0:
+        if (isOAuthUser) {
+          // OAuth users don't need password fields
+          return formData.name.trim() !== "" && formData.email.trim() !== "";
+        }
         return formData.name.trim() !== "" && formData.email.trim() !== "" && 
                formData.password.length >= 6 && formData.password === formData.confirmPassword;
       case 1:
@@ -481,57 +546,66 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
                             />
                           </div>
                         </motion.div>
-                        <motion.div variants={fadeInUp} className="space-y-2">
-                          <Label htmlFor="signup-password" className="text-white/70">Password</Label>
-                          <div className="relative">
-                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
-                            <Input
-                              id="signup-password"
-                              type={showPassword ? "text" : "password"}
-                              placeholder="••••••••"
-                              value={formData.password}
-                              onChange={(e) => updateFormData("password", e.target.value)}
-                              className="pl-10 pr-10 bg-white/5 border-white/10 text-white placeholder:text-white/30 focus:border-indigo-500/50"
-                            />
-                            <button
-                              type="button"
-                              onClick={() => setShowPassword(!showPassword)}
-                              className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/50"
-                            >
-                              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                            </button>
-                          </div>
-                          <p className="text-xs text-white/40">Minimum 6 characters</p>
-                        </motion.div>
-                        <motion.div variants={fadeInUp} className="space-y-2">
-                          <Label htmlFor="confirm-password" className="text-white/70">Confirm Password</Label>
-                          <div className="relative">
-                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
-                            <Input
-                              id="confirm-password"
-                              type={showPassword ? "text" : "password"}
-                              placeholder="••••••••"
-                              value={formData.confirmPassword}
-                              onChange={(e) => updateFormData("confirmPassword", e.target.value)}
-                              className={cn(
-                                "pl-10 bg-white/5 border-white/10 text-white placeholder:text-white/30 focus:border-indigo-500/50",
-                                formData.confirmPassword && formData.password !== formData.confirmPassword && "border-red-500/50"
+                        
+                        {/* Only show password fields for email/password signup (not OAuth) */}
+                        {!user && (
+                          <>
+                            <motion.div variants={fadeInUp} className="space-y-2">
+                              <Label htmlFor="signup-password" className="text-white/70">Password</Label>
+                              <div className="relative">
+                                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
+                                <Input
+                                  id="signup-password"
+                                  type={showPassword ? "text" : "password"}
+                                  placeholder="••••••••"
+                                  value={formData.password}
+                                  onChange={(e) => updateFormData("password", e.target.value)}
+                                  className="pl-10 pr-10 bg-white/5 border-white/10 text-white placeholder:text-white/30 focus:border-indigo-500/50"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => setShowPassword(!showPassword)}
+                                  className="absolute right-3 top-1/2 -translate-y-1/2 text-white/30 hover:text-white/50"
+                                >
+                                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                                </button>
+                              </div>
+                              <p className="text-xs text-white/40">Minimum 6 characters</p>
+                            </motion.div>
+                            <motion.div variants={fadeInUp} className="space-y-2">
+                              <Label htmlFor="confirm-password" className="text-white/70">Confirm Password</Label>
+                              <div className="relative">
+                                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
+                                <Input
+                                  id="confirm-password"
+                                  type={showPassword ? "text" : "password"}
+                                  placeholder="••••••••"
+                                  value={formData.confirmPassword}
+                                  onChange={(e) => updateFormData("confirmPassword", e.target.value)}
+                                  className={cn(
+                                    "pl-10 bg-white/5 border-white/10 text-white placeholder:text-white/30 focus:border-indigo-500/50",
+                                    formData.confirmPassword && formData.password !== formData.confirmPassword && "border-red-500/50"
+                                  )}
+                                />
+                              </div>
+                              {formData.confirmPassword && formData.password !== formData.confirmPassword && (
+                                <p className="text-xs text-red-400">Passwords don't match</p>
                               )}
-                            />
-                          </div>
-                          {formData.confirmPassword && formData.password !== formData.confirmPassword && (
-                            <p className="text-xs text-red-400">Passwords don't match</p>
-                          )}
-                        </motion.div>
+                            </motion.div>
+                          </>
+                        )}
 
-                        <div className="relative my-4">
-                          <div className="absolute inset-0 flex items-center">
-                            <div className="w-full border-t border-white/10"></div>
-                          </div>
-                          <div className="relative flex justify-center text-sm">
-                            <span className="px-4 bg-[#0a0a0a] text-white/40">or sign up with</span>
-                          </div>
-                        </div>
+                        {/* Only show OAuth buttons for non-authenticated users */}
+                        {!user && (
+                          <>
+                            <div className="relative my-4">
+                              <div className="absolute inset-0 flex items-center">
+                                <div className="w-full border-t border-white/10"></div>
+                              </div>
+                              <div className="relative flex justify-center text-sm">
+                                <span className="px-4 bg-[#0a0a0a] text-white/40">or sign up with</span>
+                              </div>
+                            </div>
 
                         <div className="flex gap-3">
                           <Button
@@ -560,6 +634,8 @@ export const AuthPage: React.FC<AuthPageProps> = ({ onSuccess, onSkip }) => {
                             GitHub
                           </Button>
                         </div>
+                          </>
+                        )}
                       </CardContent>
                     </>
                   )}

FRRONTEEEND/lib/AuthContext.tsx

@@ -1,12 +1,13 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { User, Session, AuthChangeEvent } from '@supabase/supabase-js';
-import { supabase, startUserSession, endUserSession, isSupabaseConfigured } from './supabase';
+import { supabase, startUserSession, endUserSession, isSupabaseConfigured, getUserProfile } from './supabase';
 
 interface AuthContextType {
   user: User | null;
   session: Session | null;
   dbSessionId: string | null;
   loading: boolean;
+  needsOnboarding: boolean;
   signIn: (email: string, password: string) => Promise<{ error: any }>;
   signUp: (email: string, password: string) => Promise<{ error: any }>;
   signInWithGoogle: () => Promise<{ error: any }>;
@@ -23,6 +24,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [session, setSession] = useState<Session | null>(null);
   const [dbSessionId, setDbSessionId] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [needsOnboarding, setNeedsOnboarding] = useState(false);
   const configured = isSupabaseConfigured();
 
   useEffect(() => {
@@ -44,6 +46,11 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
           if (dbSession) {
             setDbSessionId(dbSession.id);
           }
+        
+        // Check if user needs onboarding
+        getUserProfile(session.user.id).then((profile) => {
+          setNeedsOnboarding(!profile || !profile.onboarding_completed);
+        });
         });
       }
     }).catch((err) => {
@@ -64,12 +71,17 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
           if (dbSession) {
             setDbSessionId(dbSession.id);
           }
+          
+          // Check if user needs onboarding
+          const profile = await getUserProfile(session.user.id);
+          setNeedsOnboarding(!profile || !profile.onboarding_completed);
         } else if (event === 'SIGNED_OUT') {
           // End tracking session
           if (dbSessionId) {
             await endUserSession(dbSessionId);
             setDbSessionId(null);
           }
+          setNeedsOnboarding(false);
         }
       }
     );
@@ -115,11 +127,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   };
 
   const signOut = async () => {
-    if (dbSessionId) {
-      await endUserSession(dbSessionId);
-      setDbSessionId(null);
+    try {
+      if (dbSessionId) {
+        await endUserSession(dbSessionId);
+        setDbSessionId(null);
+      }
+      const { error } = await supabase.auth.signOut();
+      if (error) {
+        console.error('Sign out error:', error);
+        throw error;
+      }
+    } catch (error) {
+      console.error('Sign out failed:', error);
+      throw error;
     }
-    await supabase.auth.signOut();
   };
 
   return (
@@ -129,6 +150,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         session,
         dbSessionId,
         loading,
+        needsOnboarding,
         signIn,
         signUp,
         signInWithGoogle,

FRRONTEEEND/lib/supabase.ts

@@ -206,3 +206,70 @@ export const getUniqueUsersCount = async (days: number = 7) => {
     return 0;
   }
 };
+
+// User profile management
+export interface UserProfile {
+  id?: string;
+  user_id: string;
+  name: string;
+  email: string;
+  primary_goal?: string;
+  target_outcome?: string;
+  data_types?: string[];
+  profession?: string;
+  experience?: string;
+  industry?: string;
+  onboarding_completed: boolean;
+  created_at?: string;
+  updated_at?: string;
+}
+
+// Create or update user profile (for signup form data)
+export const saveUserProfile = async (profile: Omit<UserProfile, 'id' | 'created_at' | 'updated_at'>) => {
+  try {
+    const { data, error } = await supabase
+      .from('user_profiles')
+      .upsert([{
+        ...profile,
+        updated_at: new Date().toISOString()
+      }], {
+        onConflict: 'user_id'
+      })
+      .select()
+      .single();
+    
+    if (error) {
+      console.error('Failed to save user profile:', error);
+      return null;
+    }
+    return data;
+  } catch (err) {
+    console.error('Profile save error:', err);
+    return null;
+  }
+};
+
+// Check if user has completed onboarding
+export const getUserProfile = async (userId: string) => {
+  try {
+    const { data, error } = await supabase
+      .from('user_profiles')
+      .select('*')
+      .eq('user_id', userId)
+      .single();
+    
+    if (error) {
+      // User not found is not an error (first time user)
+      if (error.code === 'PGRST116') {
+        return null;
+      }
+      console.error('Failed to get user profile:', error);
+      return null;
+    }
+    return data as UserProfile;
+  } catch (err) {
+    console.error('Profile fetch error:', err);
+    return null;
+  }
+};
+

supabase_schema.sql

@@ -0,0 +1,80 @@
+-- User Profiles Table
+-- Stores onboarding form data for each user
+CREATE TABLE IF NOT EXISTS user_profiles (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  email TEXT NOT NULL,
+  primary_goal TEXT,
+  target_outcome TEXT,
+  data_types TEXT[],
+  profession TEXT,
+  experience TEXT,
+  industry TEXT,
+  onboarding_completed BOOLEAN DEFAULT FALSE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  UNIQUE(user_id)
+);
+
+-- Index for faster lookups
+CREATE INDEX IF NOT EXISTS idx_user_profiles_user_id ON user_profiles(user_id);
+
+-- RLS (Row Level Security) Policies
+ALTER TABLE user_profiles ENABLE ROW LEVEL SECURITY;
+
+-- Allow users to read their own profile
+CREATE POLICY "Users can read own profile" ON user_profiles
+  FOR SELECT USING (auth.uid() = user_id);
+
+-- Allow users to insert their own profile
+CREATE POLICY "Users can insert own profile" ON user_profiles
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+-- Allow users to update their own profile
+CREATE POLICY "Users can update own profile" ON user_profiles
+  FOR UPDATE USING (auth.uid() = user_id);
+
+-- Usage Analytics Table (if not exists)
+CREATE TABLE IF NOT EXISTS usage_analytics (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  user_email TEXT,
+  session_id TEXT NOT NULL,
+  query TEXT NOT NULL,
+  agent_used TEXT,
+  tools_executed TEXT[],
+  tokens_used INTEGER,
+  duration_ms INTEGER,
+  success BOOLEAN NOT NULL,
+  error_message TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_usage_analytics_user_id ON usage_analytics(user_id);
+CREATE INDEX IF NOT EXISTS idx_usage_analytics_created_at ON usage_analytics(created_at);
+
+-- User Sessions Table (if not exists)
+CREATE TABLE IF NOT EXISTS user_sessions (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  user_email TEXT,
+  started_at TIMESTAMP WITH TIME ZONE NOT NULL,
+  ended_at TIMESTAMP WITH TIME ZONE,
+  queries_count INTEGER DEFAULT 0,
+  browser_info TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_sessions_user_id ON user_sessions(user_id);
+CREATE INDEX IF NOT EXISTS idx_user_sessions_started_at ON user_sessions(started_at);
+
+-- RPC function for incrementing queries count
+CREATE OR REPLACE FUNCTION increment_session_queries(session_id UUID)
+RETURNS VOID AS $$
+BEGIN
+  UPDATE user_sessions 
+  SET queries_count = queries_count + 1 
+  WHERE id = session_id;
+END;
+$$ LANGUAGE plpgsql;