Add SSO login options to desktop app (#4954)

# Description of Changes
Add SSO login options to desktop app

frontend/src/desktop/components/SetupWizard/LoginForm.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
-import { Stack, TextInput, PasswordInput, Button, Text } from '@mantine/core';
+import { Stack, TextInput, PasswordInput, Button, Text, Divider, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { authService } from '@app/services/authService';
+import { STIRLING_SAAS_URL } from '@app/constants/connection';
+import { buildOAuthCallbackHtml } from '@app/utils/oauthCallbackHtml';
+import { BASE_PATH } from '@app/constants/app';
 
 interface LoginFormProps {
   serverUrl: string;
@@ -14,6 +18,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false,
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [validationError, setValidationError] = useState<string | null>(null);
+  const [oauthLoading, setOauthLoading] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -33,6 +38,51 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false,
     await onLogin(username.trim(), password);
   };
 
+  const handleOAuthLogin = async (provider: 'google' | 'github') => {
+    // Prevent concurrent OAuth attempts
+    if (oauthLoading || loading) {
+      return;
+    }
+
+    try {
+      setOauthLoading(true);
+      setValidationError(null);
+
+      // For SaaS, use configured SaaS URL; for self-hosted, derive from serverUrl
+      const authServerUrl = isSaaS
+        ? STIRLING_SAAS_URL
+        : serverUrl; // Self-hosted might have its own auth
+
+      // Build callback page HTML with translations and dark mode support
+      const successHtml = buildOAuthCallbackHtml({
+        title: t('oauth.success.title', 'Authentication Successful'),
+        message: t('oauth.success.message', 'You can close this window and return to Stirling PDF.'),
+        isError: false,
+      });
+
+      const errorHtml = buildOAuthCallbackHtml({
+        title: t('oauth.error.title', 'Authentication Failed'),
+        message: t('oauth.error.message', 'Authentication was not successful. You can close this window and try again.'),
+        isError: true,
+        errorPlaceholder: true, // {error} will be replaced by Rust
+      });
+
+      const userInfo = await authService.loginWithOAuth(provider, authServerUrl, successHtml, errorHtml);
+
+      // Call the onLogin callback to complete setup (username/password not needed for OAuth)
+      await onLogin(userInfo.username, '');
+    } catch (error) {
+      console.error('OAuth login failed:', error);
+
+      const errorMessage = error instanceof Error
+        ? error.message
+        : t('setup.login.error.oauthFailed', 'OAuth login failed. Please try again.');
+
+      setValidationError(errorMessage);
+      setOauthLoading(false);
+    }
+  };
+
   return (
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
@@ -40,6 +90,47 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false,
           {t('setup.login.connectingTo', 'Connecting to:')} <strong>{isSaaS ? 'stirling.com' : serverUrl}</strong>
         </Text>
 
+        {/* OAuth Login Buttons - Only show for SaaS */}
+        {isSaaS && (
+          <>
+            <Stack gap="xs">
+              <Group grow>
+                <Button
+                  variant="default"
+                  leftSection={<img src={`${BASE_PATH}/Login/google.svg`} alt="Google" width={18} height={18} />}
+                  onClick={() => handleOAuthLogin('google')}
+                  disabled={loading || oauthLoading}
+                  styles={{
+                    root: { height: '42px' },
+                  }}
+                >
+                  {t('setup.login.signInWith', 'Sign in with')} Google
+                </Button>
+
+                <Button
+                  variant="default"
+                  leftSection={<img src={`${BASE_PATH}/Login/github.svg`} alt="GitHub" width={18} height={18} />}
+                  onClick={() => handleOAuthLogin('github')}
+                  disabled={loading || oauthLoading}
+                  styles={{
+                    root: { height: '42px' },
+                  }}
+                >
+                  {t('setup.login.signInWith', 'Sign in with')} GitHub
+                </Button>
+              </Group>
+
+              {oauthLoading && (
+                <Text size="sm" c="dimmed" ta="center">
+                  {t('setup.login.oauthPending', 'Opening browser for authentication...')}
+                </Text>
+              )}
+            </Stack>
+
+            <Divider label={t('setup.login.orContinueWith', 'Or continue with email')} labelPosition="center" />
+          </>
+        )}
+
         <TextInput
           label={t('setup.login.username.label', 'Username')}
           placeholder={t('setup.login.username.placeholder', 'Enter your username')}

frontend/src/desktop/components/SetupWizard/SetupWizard.css

@@ -5,7 +5,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+  background: linear-gradient(135deg,
+    light-dark(#f5f5f5, #1a1a1a) 0%,
+    light-dark(#e8e8e8, #0d0d0d) 100%
+  );
   padding: 2rem;
 }
 
@@ -15,6 +18,6 @@
 }
 
 .setup-card {
-  background-color: white;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  box-shadow: 0 20px 60px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.4));
 }

frontend/src/desktop/components/SetupWizard/index.tsx

@@ -53,7 +53,13 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete }) => {
       setLoading(true);
       setError(null);
 
-      await authService.login(serverConfig.url, username, password);
+      // Only attempt password login if a password is provided
+      // If password is empty, assume OAuth login already completed
+      const isAlreadyAuthenticated = await authService.isAuthenticated();
+      if (!isAlreadyAuthenticated && password) {
+        await authService.login(serverConfig.url, username, password);
+      }
+
       await connectionModeService.switchToSaaS(serverConfig.url);
       await tauriBackendService.startBackend();
       onComplete();