fix: various login issues (#28)

MSevey · web-flow · commit ac548b61d54c · 2025-11-12T16:14:33.000-05:00
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -142,8 +142,10 @@ npm run build            # Build for production
 - Role-based access control
 
 **User Flows**:
-1. **New User**: Email → Magic link → Create company → Select app → Redirect
-2. **Invited User**: Invitation link → Magic link → Auto-join company → Select app → Redirect
+1. **New User**: Email → Magic link → Select app → Redirect
+2. **Invited User**: Invitation link → Magic link → Select app → Redirect
+
+> **Note**: Company onboarding has been removed. Users go directly to app selection after authentication.
 
 **Authentication**:
 - Magic links expire in 15 minutes
@@ -323,12 +325,13 @@ Both apps include `lovable-tagger` plugin for development mode, supporting AI-as
 
 The Platform app (`apps/platform`) is the central authentication hub for the entire Arda ecosystem:
 
-1. **Entry Point**: Users always start at Platform (port 3002)
+1. **Entry Point**: Users always start at Platform (port 5173)
 2. **Magic Link Auth**: Passwordless email-based authentication
-3. **Company Setup**: Create/join company as originator or investor
-4. **App Selection**: Choose Credit App or IDR based on needs
-5. **Token Handoff**: Platform passes JWT token to selected app
-6. **Cross-App Auth**: Token is valid across all Arda applications
+3. **App Selection**: Choose Credit App or IDR immediately after login
+4. **Token Handoff**: Platform passes JWT token to selected app
+5. **Cross-App Auth**: Token is valid across all Arda applications
+
+> **Simplified Flow**: Company setup has been removed from the onboarding process. Users can access applications immediately after authentication without creating or joining a company.
 
 ### Integration Pattern
 ```typescript
diff --git a/src/auth/DashboardPage.tsx b/src/auth/DashboardPage.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Loader2 } from "lucide-react";
+import { Loader2, LogOut } from "lucide-react";
 import { authAPI } from "../shared/lib/api";
 import { User, CompanyMembership } from "../shared/types";
 import { CompanySelector } from "../shared/components/company/CompanySelector";
 import { WorkspaceTabs } from "../shared/components/layout/WorkspaceTabs";
 import { AppGrid } from "../shared/components/dashboard/AppGrid";
+import { Button } from "../shared/components/ui/button";
+import { toast } from "sonner";
 
 export function DashboardPage() {
   console.log('========================================');
@@ -58,7 +60,7 @@ export function DashboardPage() {
           timestamp: new Date().toISOString(),
         });
 
-        // Get full user data with companies
+        // Get full user data with companies (optional now)
         // Try to get user ID from various possible fields
         const userId = userResponse.data.id || userResponse.data.user_id || userResponse.data.userId || userResponse.data._id;
         console.log("[Dashboard] Attempting to extract user ID", {
@@ -110,46 +112,37 @@ export function DashboardPage() {
                 })) || [],
             };
 
-            // Check if user has companies
-            if (!transformedUser.companies || transformedUser.companies.length === 0) {
-              console.log("[Dashboard] User has no companies, redirecting to onboarding", {
-                timestamp: new Date().toISOString(),
-              });
-              navigate("/onboarding");
-              return;
-            }
-
             setUser(transformedUser);
 
-            // Set initial selected company (first one or from localStorage)
-            const savedCompanyId = localStorage.getItem("selectedCompanyId");
-            let initialCompany = transformedUser.companies[0];
+            // Set initial selected company if available (first one or from localStorage)
+            if (transformedUser.companies && transformedUser.companies.length > 0) {
+              const savedCompanyId = localStorage.getItem("selectedCompanyId");
+              let initialCompany = transformedUser.companies[0];
 
-            if (savedCompanyId) {
-              const savedCompany = transformedUser.companies.find((c) => c.companyId === savedCompanyId);
-              if (savedCompany) {
-                initialCompany = savedCompany;
+              if (savedCompanyId) {
+                const savedCompany = transformedUser.companies.find((c) => c.companyId === savedCompanyId);
+                if (savedCompany) {
+                  initialCompany = savedCompany;
+                }
               }
-            }
 
-            setSelectedCompany(initialCompany);
+              setSelectedCompany(initialCompany);
+            }
           } else {
-            console.warn("[Dashboard] Failed to get full user data, redirecting to onboarding", {
+            console.warn("[Dashboard] Failed to get full user data, using basic auth data", {
               attemptedUserId: userId,
               error: fullUserResponse.error,
               timestamp: new Date().toISOString(),
             });
-            navigate("/onboarding");
-            return;
+            setUser(userResponse.data);
           }
         } else {
-          console.warn("[Dashboard] User ID not available, redirecting to onboarding", {
+          console.warn("[Dashboard] User ID not available, using basic auth data", {
             attemptedUserId: userId,
             availableFields: Object.keys(userResponse.data),
             timestamp: new Date().toISOString(),
           });
-          navigate("/onboarding");
-          return;
+          setUser(userResponse.data);
         }
       } catch (error) {
         console.error("[Dashboard] Dashboard initialization error", {
@@ -178,6 +171,36 @@ export function DashboardPage() {
     localStorage.setItem("selectedCompanyId", company.companyId);
   };
 
+  const handleLogout = async () => {
+    try {
+      console.log("[Dashboard] Logging out user");
+      
+      // Call logout API to invalidate session on backend
+      await authAPI.logout({});
+      
+      // Clear all auth data from localStorage
+      localStorage.removeItem("arda_auth_token");
+      localStorage.removeItem("arda_credit_auth");
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_data");
+      localStorage.removeItem("selectedCompanyId");
+      
+      toast.success("Logged out successfully");
+      
+      // Redirect to login page
+      navigate("/login");
+    } catch (error) {
+      console.error("[Dashboard] Logout error:", error);
+      // Still clear local storage and redirect even if API call fails
+      localStorage.removeItem("arda_auth_token");
+      localStorage.removeItem("arda_credit_auth");
+      localStorage.removeItem("token");
+      localStorage.removeItem("user_data");
+      localStorage.removeItem("selectedCompanyId");
+      navigate("/login");
+    }
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
@@ -189,27 +212,40 @@ export function DashboardPage() {
     );
   }
 
-  if (!user || !selectedCompany) {
+  if (!user) {
     return null;
   }
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
       <div className="container max-w-6xl mx-auto p-4 py-8 space-y-6">
-        {/* Header with Company Selector */}
+        {/* Header with Company Selector (if companies exist) */}
         <div className="flex flex-col space-y-4">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-3xl font-bold tracking-tight">Welcome back</h1>
+              <h1 className="text-3xl font-bold tracking-tight">Welcome{user.companies && user.companies.length > 0 ? ' back' : ' to Arda Platform'}</h1>
               <p className="text-muted-foreground">
                 Hello, <strong>{user.email}</strong>
               </p>
             </div>
-            <CompanySelector companies={user.companies} selectedCompany={selectedCompany} onCompanyChange={handleCompanyChange} />
+            <div className="flex items-center gap-4">
+              {user.companies && user.companies.length > 0 && selectedCompany && (
+                <CompanySelector companies={user.companies} selectedCompany={selectedCompany} onCompanyChange={handleCompanyChange} />
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleLogout}
+                className="flex items-center gap-2"
+              >
+                <LogOut className="h-4 w-4" />
+                Logout
+              </Button>
+            </div>
           </div>
 
-          {/* Workspace Tabs */}
-          <WorkspaceTabs selectedCompany={selectedCompany} user={user} />
+          {/* Workspace Tabs (only if company is selected) */}
+          {selectedCompany && <WorkspaceTabs selectedCompany={selectedCompany} user={user} />}
         </div>
 
         {/* App Grid */}
diff --git a/src/auth/VerifyPage.tsx b/src/auth/VerifyPage.tsx
@@ -46,7 +46,7 @@ export function VerifyPage() {
       }
 
       try {
-        const response = await authAPI.verifyMagicLink(token, state);
+        const response = await authAPI.verifyMagicLink({ token, state });
         console.log('[VerifyPage] Verify response received:', {
           success: response.success,
           hasData: !!response.data,
diff --git a/src/shared/components/auth/MagicLinkForm.tsx b/src/shared/components/auth/MagicLinkForm.tsx
@@ -7,7 +7,7 @@ import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
 import { Alert, AlertDescription } from '../ui/alert';
-import { authAPI } from '../../lib/api';
+import { authAPI, userApi } from '../../lib/api';
 import { toast } from 'sonner';
 
 const magicLinkSchema = z.object({
@@ -35,9 +35,37 @@ export function MagicLinkForm({ invitationCode }: MagicLinkFormProps) {
   const onSubmit = async (data: MagicLinkFormData) => {
     setIsLoading(true);
     try {
-      console.log('Sending magic link request:', { email: data.email, invitationCode });
+      // Step 1: Register the user first if we have an invitation code
+      if (invitationCode) {
+        console.log('Registering new user:', { email: data.email, invitationCode });
+        
+        try {
+          const registerResponse = await userApi.register({
+            email: data.email,
+            invite_code: invitationCode,
+          });
+
+          console.log('User registered successfully:', registerResponse);
+          toast.success('Account created!', {
+            description: `Welcome! Sending magic link to ${data.email}`,
+          });
+        } catch (registerError: any) {
+          // If user already exists, that's okay - proceed to magic link
+          if (registerError.message?.includes('already exists') || registerError.status === 409) {
+            console.log('User already exists, proceeding to magic link');
+          } else {
+            // For other errors, show error and stop
+            console.error('Registration error:', registerError);
+            toast.error('Failed to create account', {
+              description: registerError.message || 'Please try again',
+            });
+            return;
+          }
+        }
+      }
       
-      // Make actual API call
+      // Step 2: Send magic link (whether new user or existing)
+      console.log('Sending magic link request:', { email: data.email, invitationCode });
       const response = await authAPI.requestMagicLink({
         email: data.email,
         invite_code: invitationCode || undefined,
diff --git a/src/shared/components/dashboard/AppGrid.tsx b/src/shared/components/dashboard/AppGrid.tsx
@@ -6,7 +6,7 @@ import { CompanyMembership } from "../../types";
 import { getAppURL, getAuthToken } from "../../lib/utils";
 
 interface AppGridProps {
-  selectedCompany: CompanyMembership;
+  selectedCompany?: CompanyMembership | null;
 }
 
 export function AppGrid({ selectedCompany }: AppGridProps) {
@@ -40,12 +40,14 @@ export function AppGrid({ selectedCompany }: AppGridProps) {
     const appUrl = getAppURL(appId);
     const token = getAuthToken();
 
-    // Pass authentication token and company context to the app
+    // Pass authentication token and company context (if available) to the app
     const params = new URLSearchParams();
     if (token) {
       params.append("token", token);
     }
-    params.append("companyId", selectedCompany.companyId);
+    if (selectedCompany?.companyId) {
+      params.append("companyId", selectedCompany.companyId);
+    }
 
     const separator = appUrl.includes("?") ? "&" : "?";
     window.location.href = `${appUrl}${separator}${params.toString()}`;
@@ -56,7 +58,11 @@ export function AppGrid({ selectedCompany }: AppGridProps) {
       <div className="text-center space-y-2">
         <h2 className="text-2xl font-bold">Available Applications</h2>
         <p className="text-muted-foreground">
-          Choose an application to access with <strong>{selectedCompany.company.name}</strong>
+          {selectedCompany ? (
+            <>Choose an application to access with <strong>{selectedCompany.company.name}</strong></>
+          ) : (
+            <>Choose an application to get started</>
+          )}
         </p>
       </div>
 
@@ -75,7 +81,7 @@ export function AppGrid({ selectedCompany }: AppGridProps) {
                   </CardTitle>
                   <CardDescription>{app.description}</CardDescription>
                 </div>
-                {selectedCompany.company.type === app.primaryForType && (
+                {selectedCompany?.company.type === app.primaryForType && (
                   <Badge variant="secondary" className="text-xs">
                     Recommended
                   </Badge>
@@ -104,7 +110,7 @@ export function AppGrid({ selectedCompany }: AppGridProps) {
               </Button>
             </CardContent>
 
-            {selectedCompany.company.type === "originator" && app.primaryForType === "originator" && (
+            {selectedCompany?.company.type === "originator" && app.primaryForType === "originator" && (
               <div className="absolute top-2 right-2">
                 <Badge className="text-xs">{selectedCompany.company.type}</Badge>
               </div>
diff --git a/src/shared/config/runtime.ts b/src/shared/config/runtime.ts
@@ -23,11 +23,14 @@ declare global {
 export const getConfig = (): RuntimeConfig => {
   // Check if we're in production (served over HTTPS) - use relative paths to avoid mixed content
   const isProduction = typeof window !== 'undefined' && window.location.protocol === 'https:';
+  const isDevelopment = import.meta.env?.DEV || import.meta.env?.MODE === 'development';
   
   console.log('🔧 Runtime Config:', {
     isProduction,
+    isDevelopment,
     hasWindowEnv: typeof window !== 'undefined' && !!window.__ENV__,
-    protocol: typeof window !== 'undefined' ? window.location.protocol : 'unknown'
+    protocol: typeof window !== 'undefined' ? window.location.protocol : 'unknown',
+    mode: import.meta.env?.MODE
   });
   
   if (isProduction) {
@@ -39,21 +42,33 @@ export const getConfig = (): RuntimeConfig => {
     };
   }
   
-  // In development or when window.__ENV__ exists but not HTTPS
+  // In development mode, use empty SERVER_URL to leverage Vite proxy
+  // Vite dev server proxies /api/* to the backend server
+  if (isDevelopment) {
+    console.log('🔨 Development mode - using Vite proxy for API requests');
+    console.log('📡 All /api/* requests will be proxied by Vite to the backend');
+    return {
+      SERVER_URL: '', // Empty = use Vite proxy at /api/*
+      CREDIT_APP_URL: import.meta.env.VITE_CREDIT_APP_URL || 'http://localhost:3000',
+      IDR_URL: import.meta.env.VITE_IDR_URL || 'http://localhost:3001',
+    };
+  }
+  
+  // Staging/preview mode with window.__ENV__
   if (typeof window !== 'undefined' && window.__ENV__) {
-    console.log('🛠️  Using window.__ENV__ configuration for development/staging');
+    console.log('🛠️  Using window.__ENV__ configuration for staging/preview');
     return {
-      SERVER_URL: window.__ENV__.VITE_SERVER_URL || 'http://localhost:8080',
+      SERVER_URL: window.__ENV__.VITE_SERVER_URL || '',
       CREDIT_APP_URL: window.__ENV__.VITE_CREDIT_APP_URL || 'http://localhost:3000',
       IDR_URL: window.__ENV__.VITE_IDR_URL || 'http://localhost:3001',
     };
   }
 
-  // Development fallback - no path prefixes for local dev with pnpm dev
-  console.log('🔨 Using import.meta.env fallback for local development');
+  // Fallback for edge cases
+  console.log('⚠️  Fallback configuration');
   return {
-    SERVER_URL: import.meta.env.VITE_SERVER_URL || 'http://localhost:8080',
-    CREDIT_APP_URL: import.meta.env.VITE_CREDIT_APP_URL || 'http://localhost:3000',
-    IDR_URL: import.meta.env.VITE_IDR_URL || 'http://localhost:3001',
+    SERVER_URL: '',
+    CREDIT_APP_URL: 'http://localhost:3000',
+    IDR_URL: 'http://localhost:3001',
   };
 };
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export function VerifyPage() {`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`try {`
`49`		`- const response = await authAPI.verifyMagicLink(token, state);`
	`49`	`+ const response = await authAPI.verifyMagicLink({ token, state });`
`50`	`50`	`console.log('[VerifyPage] Verify response received:', {`
`51`	`51`	`success: response.success,`
`52`	`52`	`hasData: !!response.data,`