feat: google auth v2 (#5)

* added http callback handlers

* implement login request backend

* implement callback session authorization logic

* new login flow using backend auth

* implement login request expiry

* proxy requests for google callback via nextjs backend

* remove convex http actions and use http api to invoke convex functions instead

* clean up dead code

* refactor fragmented google auth endpoints

* consolidate callbacks from connect flow and bugfixes

1. ensure connect flow succeeds when linking google to current account with the same email
2. fixed connect flow opening in same window rather than new window

* improve separation between connect flows and login flows

* improve conventions and grouping of auth apis and tables, fixed google auth config testing

* update biome to only be used for files it supports

* code cleanup

* make callback url a server page instead of api to improve ux for errors

Author: conradkoh

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "biomejs.biome",
   "editor.codeActionsOnSave": {
     "source.organizeImports.biome": "explicit",
     "quickfix.biome": "explicit"
@@ -11,16 +10,16 @@
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[typescriptreact]": {
+  "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[javascriptreact]": {
+  "[jsonc]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[json]": {
+  "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
-  "[jsonc]": {
+  "[javascriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
   "[html]": {

apps/webapp/src/app/api/auth/google/callback/page.tsx

@@ -0,0 +1,187 @@
+// 1. Imports (external first, then internal)
+import { api } from '@workspace/backend/convex/_generated/api';
+import { fetchAction } from 'convex/nextjs';
+import { Suspense } from 'react';
+import { CallbackErrorCard } from '@/components/CallbackErrorCard';
+import { CallbackSuccessCard } from '@/components/CallbackSuccessCard';
+
+// 2. Public interfaces and types
+export interface GoogleOAuthCallbackPageProps {
+  searchParams: Promise<{
+    code?: string;
+    state?: string;
+    error?: string;
+    error_description?: string;
+  }>;
+}
+
+export interface CallbackResult {
+  success: boolean;
+  flowType?: 'login' | 'connect';
+  error?: string;
+  userName?: string;
+}
+
+// 3. Internal interfaces and types (prefixed with _)
+// None needed for this file
+
+// 4. Main exported functions/components
+/**
+ * Unified Google OAuth callback page that processes the OAuth response server-side
+ * and displays appropriate UI based on success or failure. This replaces the API route
+ * approach for better user experience with proper error handling and UI.
+ */
+export default async function GoogleOAuthCallbackPage({
+  searchParams,
+}: GoogleOAuthCallbackPageProps) {
+  const params = await searchParams;
+
+  // Handle OAuth errors from Google directly
+  if (params.error) {
+    console.error('OAuth error from Google:', params.error, params.error_description);
+
+    const userFriendlyError = _getUserFriendlyError(params.error, params.error_description);
+
+    return <CallbackErrorCard error={userFriendlyError} flowType="login" />;
+  }
+
+  // Validate required parameters
+  if (!params.code || !params.state) {
+    console.error('Missing OAuth parameters:', { code: !!params.code, state: !!params.state });
+
+    return (
+      <CallbackErrorCard
+        error="Missing required OAuth parameters. Please start the authentication process again."
+        flowType="login"
+      />
+    );
+  }
+
+  // Process the OAuth callback server-side
+  let callbackResult: CallbackResult;
+
+  try {
+    const result = await fetchAction(api.auth.google.handleGoogleCallback, {
+      code: params.code,
+      state: params.state,
+    });
+
+    if (result.success) {
+      // Log successful authentication for monitoring
+      console.info('OAuth callback successful', {
+        flowType: result.flowType,
+        timestamp: Date.now(),
+      });
+
+      callbackResult = {
+        success: true,
+        flowType: result.flowType,
+        // Note: We don't have userName from the callback result currently
+        // This could be enhanced in the future if needed
+      };
+    } else {
+      // Handle Convex action failure
+      console.error('OAuth callback failed:', result.error);
+
+      callbackResult = {
+        success: false,
+        flowType: result.flowType,
+        error: result.error,
+      };
+    }
+  } catch (error) {
+    // Handle internal server error
+    console.error('Internal server error during OAuth callback:', error);
+
+    callbackResult = {
+      success: false,
+      error:
+        error instanceof Error ? error.message : 'Unknown error occurred during authentication',
+    };
+  }
+
+  // Return appropriate UI based on result
+  if (callbackResult.success) {
+    return (
+      <Suspense fallback={<_LoadingState />}>
+        <CallbackSuccessCard
+          flowType={callbackResult.flowType}
+          userName={callbackResult.userName}
+          autoCloseDelay={3}
+        />
+      </Suspense>
+    );
+  }
+
+  // Handle failure case
+  return (
+    <CallbackErrorCard
+      error={callbackResult.error || 'Authentication failed'}
+      flowType={callbackResult.flowType || 'login'}
+    />
+  );
+}
+
+// 5. Internal helper functions (at bottom)
+/**
+ * Creates user-friendly error messages from OAuth error codes and descriptions.
+ */
+function _getUserFriendlyError(errorCode: string, errorDescription?: string): string {
+  const lowerError = errorCode.toLowerCase();
+  const lowerDescription = errorDescription?.toLowerCase() || '';
+
+  if (lowerError.includes('access_denied')) {
+    return 'You cancelled the authentication process.';
+  }
+
+  if (lowerError.includes('expired')) {
+    return 'The authentication request has expired. Please try again.';
+  }
+
+  if (lowerError.includes('invalid') || lowerDescription.includes('invalid')) {
+    return 'The authentication request is invalid. Please start the process again.';
+  }
+
+  if (lowerError.includes('network') || lowerDescription.includes('network')) {
+    return 'Network error occurred. Please check your connection and try again.';
+  }
+
+  if (lowerError.includes('already_connected') || lowerDescription.includes('already connected')) {
+    return 'This Google account is already connected to your profile.';
+  }
+
+  if (
+    lowerError.includes('email_already_exists') ||
+    lowerDescription.includes('email already exists')
+  ) {
+    return 'An account with this email already exists. Please try signing in instead.';
+  }
+
+  if (lowerError.includes('feature_disabled')) {
+    return 'Google authentication is currently unavailable. Please try again later.';
+  }
+
+  // Default message
+  return 'Authentication was cancelled or failed. Please try again.';
+}
+
+/**
+ * Displays a loading state while processing the OAuth callback.
+ */
+function _LoadingState() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-4">
+      <div className="w-full max-w-md space-y-6 text-center">
+        <div className="space-y-4">
+          <div className="mx-auto h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-semibold text-gray-900">Processing...</h1>
+            <p className="text-gray-600">Completing your authentication...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/webapp/src/app/api/auth/google/test/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+// Public interfaces and types
+export interface TestResponse {
+  message: string;
+}
+
+/**
+ * Test endpoint for Google authentication configuration.
+ * Returns a simple success message to verify the route is working.
+ */
+export async function GET(): Promise<NextResponse<TestResponse>> {
+  return NextResponse.json({ message: 'Google auth test route is working!' });
+}

apps/webapp/src/app/api/auth/test/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+// Public interfaces and types
+export interface AuthTestResponse {
+  message: string;
+}
+
+/**
+ * Test endpoint for authentication system.
+ * Returns a simple success message to verify the auth route is working.
+ */
+export async function GET(): Promise<NextResponse<AuthTestResponse>> {
+  return NextResponse.json({ message: 'Auth test route is working!' });
+}

apps/webapp/src/app/api/test/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+// Public interfaces and types
+export interface TestResponse {
+  message: string;
+}
+
+/**
+ * General test endpoint for API routes.
+ * Returns a simple success message to verify the route is working.
+ */
+export async function GET(): Promise<NextResponse<TestResponse>> {
+  return NextResponse.json({ message: 'Test route is working!' });
+}

apps/webapp/src/app/app/admin/google-auth/page.tsx

@@ -46,14 +46,17 @@ export default function GoogleAuthConfigPage() {
   const [showClientSecret, setShowClientSecret] = useState(false);
 
   // Convex queries and mutations
-  const configData = useSessionQuery(api.system.thirdPartyAuthConfig.getGoogleAuthConfig);
-  const updateConfig = useSessionMutation(api.system.thirdPartyAuthConfig.updateGoogleAuthConfig);
-  const toggleEnabled = useSessionMutation(api.system.thirdPartyAuthConfig.toggleGoogleAuthEnabled);
-  const testConfig = useSessionAction(api.system.thirdPartyAuthConfig.testGoogleAuthConfig);
-  const resetConfig = useSessionMutation(api.system.thirdPartyAuthConfig.resetGoogleAuthConfig);
-
-  // Computed values
-  const redirectUris = useMemo(() => _getRedirectUris(), []);
+  const configData = useSessionQuery(api.system.auth.google.getConfig);
+  const updateConfig = useSessionMutation(api.system.auth.google.updateConfig);
+  const toggleEnabled = useSessionMutation(api.system.auth.google.toggleEnabled);
+  const testConfig = useSessionAction(api.system.auth.google.testConfig);
+  const resetConfig = useSessionMutation(api.system.auth.google.resetConfig);
+
+  // Computed values - generate redirect URIs on frontend
+  const redirectUris = useMemo(() => {
+    if (typeof window === 'undefined') return [];
+    return [`${window.location.origin}/api/auth/google/callback`];
+  }, []);
   const isConfigLoading = configData === undefined;
   const isPageLoading = appInfoLoading || isConfigLoading;
   const isFullyConfigured = isConfigured && enabled;
@@ -596,37 +599,14 @@ export default function GoogleAuthConfigPage() {
   );
 }
 
-/**
- * Generates redirect URIs based on current domain for OAuth configuration.
- */
-function _getRedirectUris(): string[] {
-  if (typeof window === 'undefined') return [];
-
-  const { protocol, host } = window.location;
-  const baseUrl = `${protocol}//${host}`;
-
-  return [
-    `${baseUrl}/login/google/callback`,
-    `${baseUrl}/app/profile/connect/google/callback`,
-    // Add localhost for development if not already localhost
-    ...(host.includes('localhost')
-      ? []
-      : [
-          'http://localhost:3000/login/google/callback',
-          'http://localhost:3000/app/profile/connect/google/callback',
-        ]),
-  ];
-}
-
 /**
  * Copies text to clipboard and shows success/error toast notification.
  */
 async function _copyToClipboard(text: string): Promise<void> {
   try {
     await navigator.clipboard.writeText(text);
     toast.success('Copied to clipboard!');
-  } catch (error) {
-    console.error('Failed to copy to clipboard:', error);
+  } catch (_error) {
     toast.error('Failed to copy to clipboard');
   }
 }
@@ -758,8 +738,7 @@ async function _handleToggleEnabled(
     await toggleEnabled({ enabled: newEnabled });
     setEnabled(newEnabled);
     toast.success(`Google Auth ${newEnabled ? 'enabled' : 'disabled'} successfully`);
-  } catch (error) {
-    console.error('Failed to toggle Google Auth:', error);
+  } catch (_error) {
     toast.error('Failed to toggle Google Auth. Please try again.');
   }
 }
@@ -831,8 +810,7 @@ async function _handleSave(params: _SaveConfigParams): Promise<void> {
 
     toast.success('Google Auth configuration saved successfully');
     setIsConfigured(true);
-  } catch (error) {
-    console.error('Failed to save configuration:', error);
+  } catch (_error) {
     toast.error('Failed to save configuration. Please try again.');
   } finally {
     setIsFormLoading(false);
@@ -874,12 +852,8 @@ async function _handleTest(
       toast.success(`✅ Configuration is valid: ${result.message}`);
     } else {
       toast.error(`❌ Configuration failed: ${result.message}`);
-      if (result.details?.issues) {
-        console.log('Configuration issues:', result.details.issues);
-      }
     }
-  } catch (error) {
-    console.error('Failed to test configuration:', error);
+  } catch (_error) {
     toast.error('Failed to test configuration. Please try again.');
   }
 }
@@ -910,8 +884,7 @@ async function _handleReset(
     setClientId('');
     setClientSecret('');
     setIsConfigured(false);
-  } catch (error) {
-    console.error('Failed to reset configuration:', error);
+  } catch (_error) {
     toast.error('Failed to reset configuration. Please try again.');
   }
 }