refactor: replace hand-rolled OIDC with @logto/react SDK

The hand-rolled OIDC flow (manual PKCE, token exchange, URL
construction) was fragile and accumulated multiple bugs. Replaced
with the official @logto/react SDK which handles PKCE, token
exchange, storage, and refresh automatically.

- Add @logto/react SDK dependency
- Add LogtoProvider with runtime config in main.tsx
- Add TokenSync component bridging SDK tokens to API client
- Add useAuth hook replacing Zustand auth store
- Simplify LoginPage to signIn(), CallbackPage to useHandleSignInCallback()
- Delete pkce.ts and auth-store.ts (replaced by SDK)
- Fix react-router-dom → react-router imports in page files
- All 17 React Query hooks unchanged (token provider pattern)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/auth/CallbackPage.tsx

@@ -1,58 +1,21 @@
-import { useEffect } from 'react';
+import { useHandleSignInCallback } from '@logto/react';
 import { useNavigate } from 'react-router';
-import { useAuthStore } from './auth-store';
 import { Spinner } from '@cameleer/design-system';
-import { fetchConfig } from '../config';
-import { getCodeVerifier } from './pkce';
 
 export function CallbackPage() {
   const navigate = useNavigate();
-  const login = useAuthStore((s) => s.login);
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const code = params.get('code');
-    if (!code) {
-      navigate('/login');
-      return;
-    }
+  const { isLoading } = useHandleSignInCallback(() => {
+    navigate('/', { replace: true });
+  });
 
-    const codeVerifier = getCodeVerifier();
-    if (!codeVerifier) {
-      navigate('/login');
-      return;
-    }
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+        <Spinner />
+      </div>
+    );
+  }
 
-    const redirectUri = `${window.location.origin}/callback`;
-
-    fetchConfig().then((config) => {
-      fetch(`${config.logtoEndpoint}/oidc/token`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body: new URLSearchParams({
-          grant_type: 'authorization_code',
-          code,
-          client_id: config.logtoClientId,
-          redirect_uri: redirectUri,
-          code_verifier: codeVerifier,
-        }),
-      })
-        .then((r) => r.json())
-        .then((data) => {
-          if (data.access_token) {
-            login(data.access_token, data.refresh_token || '');
-            navigate('/');
-          } else {
-            navigate('/login');
-          }
-        })
-        .catch(() => navigate('/login'));
-    });
-  }, [login, navigate]);
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
-      <Spinner />
-    </div>
-  );
+  return null;
 }