feat(oauth): add csas connection, allow oauth from react

7project/frontend/src/App.tsx

@@ -3,21 +3,54 @@ import './App.css';
 import LoginRegisterPage from './pages/LoginRegisterPage';
 import Dashboard from './pages/Dashboard';
 import { logout } from './api';
+import { BACKEND_URL } from './config';
 
 function App() {
   const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));
+  const [processingCallback, setProcessingCallback] = useState<boolean>(false);
 
   useEffect(() => {
-    // Handle OAuth callback: /oauth-callback?access_token=...&token_type=...
-    if (window.location.pathname === '/oauth-callback') {
-      const params = new URLSearchParams(window.location.search);
-      const token = params.get('access_token');
-      if (token) {
-        localStorage.setItem('token', token);
-        setHasToken(true);
+    const path = window.location.pathname;
+
+    // Minimal handling for provider callbacks: /auth|/oauth/:provider/callback?code=...&state=...
+    const parts = path.split('/').filter(Boolean);
+    const isCallback = parts.length === 3 && (parts[0] === 'auth') && parts[2] === 'callback';
+
+    if (isCallback) {
+      // Guard against double invocation in React 18 StrictMode/dev
+      const w = window as any;
+      if (w.__oauthCallbackHandled) {
+        return;
       }
-      // Clean URL and redirect to home
-      window.history.replaceState({}, '', '/');
+      w.__oauthCallbackHandled = true;
+
+      setProcessingCallback(true);
+
+      const provider = parts[1];
+      const qs = window.location.search || '';
+      const base = BACKEND_URL.replace(/\/$/, '');
+      const url = `${base}/auth/${encodeURIComponent(provider)}/callback${qs}`;
+      (async () => {
+        try {
+          const token = localStorage.getItem('token');
+          const res = await fetch(url, {
+            method: 'GET',
+            credentials: 'include',
+            headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+          });
+          let data: any = null;
+          try {
+            data = await res.json();
+          } catch {}
+          if (provider !== 'csas' && res.ok && data?.access_token) {
+            localStorage.setItem('token', data?.access_token);
+            setHasToken(true);
+          }
+        } catch {}
+        // Clean URL and go home regardless of result
+        setProcessingCallback(false);
+        window.history.replaceState({}, '', '/');
+      })();
     }
 
     const onStorage = (e: StorageEvent) => {
@@ -27,6 +60,24 @@ function App() {
     return () => window.removeEventListener('storage', onStorage);
   }, []);
 
+  if (processingCallback) {
+    return (
+      <div style={{ display: 'grid', placeItems: 'center', height: '100vh' }}>
+        <div className="card" style={{ width: 360, textAlign: 'center', padding: 24 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+            <svg width="48" height="48" viewBox="0 0 50 50" aria-label="Loading">
+              <circle cx="25" cy="25" r="20" fill="none" stroke="#3b82f6" strokeWidth="5" strokeLinecap="round" strokeDasharray="31.4 31.4">
+                <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.9s" repeatCount="indefinite" />
+              </circle>
+            </svg>
+            <div>Finishing sign-in…</div>
+            <div className="muted">Please wait</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (!hasToken) {
     return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
   }

7project/frontend/src/pages/Dashboard.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
 import AccountPage from './AccountPage';
 import AppearancePage from './AppearancePage';
+import { BACKEND_URL } from '../config';
 
 function formatAmount(n: number) {
   return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
@@ -14,6 +15,27 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Start CSAS (George) OAuth after login
+  async function startOauthCsas() {
+    const base = BACKEND_URL.replace(/\/$/, '');
+    const url = `${base}/auth/csas/authorize`;
+    try {
+      const token = localStorage.getItem('token');
+      const res = await fetch(url, {
+        credentials: 'include',
+        headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+      });
+      const data = await res.json();
+      if (data && typeof data.authorization_url === 'string') {
+        window.location.assign(data.authorization_url);
+      } else {
+        alert('Cannot start CSAS OAuth.');
+      }
+    } catch (e) {
+      alert('Cannot start CSAS OAuth.');
+    }
+  }
+
   // New transaction form state
   const [amount, setAmount] = useState<string>('');
   const [description, setDescription] = useState('');
@@ -97,6 +119,12 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
         <main className="page space-y">
           {current === 'home' && (
             <>
+              <section className="card">
+                <h3>Bank connections</h3>
+                <p className="muted">Connect your CSAS (George) account.</p>
+                <button className="btn" onClick={startOauthCsas}>Connect CSAS (George)</button>
+              </section>
+
               <section className="card">
                 <h3>Add Transaction</h3>
                 <form onSubmit={handleCreate} className="form-row">

7project/frontend/src/pages/LoginRegisterPage.tsx

@@ -2,10 +2,21 @@ import { useState, useEffect } from 'react';
 import { login, register } from '../api';
 import { BACKEND_URL } from '../config';
 
-function oauthUrl(provider: 'mojeid' | 'bankid') {
+// Minimal helper to start OAuth: fetch authorization_url and redirect
+async function startOauth(provider: 'mojeid' | 'bankid') {
   const base = BACKEND_URL.replace(/\/$/, '');
-  const redirect = encodeURIComponent(window.location.origin + '/oauth-callback');
-  return `${base}/auth/${provider}/authorize?redirect_url=${redirect}`;
+  const url = `${base}/auth/${provider}/authorize`;
+  try {
+    const res = await fetch(url, { credentials: 'include' });
+    const data = await res.json();
+    if (data && typeof data.authorization_url === 'string') {
+      window.location.assign(data.authorization_url);
+    } else {
+      alert('Cannot start OAuth.');
+    }
+  } catch (e) {
+    alert('Cannot start OAuth.');
+  }
 }
 
 export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
@@ -84,8 +95,8 @@ export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => vo
           <div className="actions" style={{ justifyContent: 'space-between' }}>
             <div className="muted">Or continue with</div>
             <div className="actions">
-              <a className="btn" href={oauthUrl('mojeid')}>MojeID</a>
-              <a className="btn" href={oauthUrl('bankid')}>BankID</a>
+              <button type="button" className="btn" onClick={() => startOauth('mojeid')}>MojeID</button>
+              <button type="button" className="btn" onClick={() => startOauth('bankid')}>BankID</button>
               <button className="btn primary" type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
             </div>
           </div>