refactor: replace hand-rolled OIDC with @logto/react SDK
All checks were successful
CI / build (push) Successful in 38s
CI / docker (push) Successful in 48s

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>
This commit is contained in:
hsiegeln
2026-04-05 01:17:47 +02:00
parent 84667170f1
commit 0843a33383
19 changed files with 320 additions and 224 deletions

View File

@@ -1,7 +1,7 @@
import { useState, useCallback } from 'react';
import { useNavigate, useLocation } from 'react-router';
import { SidebarTree, type SidebarTreeNode } from '@cameleer/design-system';
import { useAuthStore } from '../auth/auth-store';
import { useAuth } from '../auth/useAuth';
import { useEnvironments, useApps } from '../api/hooks';
import type { EnvironmentResponse } from '../types/api';
@@ -45,7 +45,7 @@ function EnvWithApps({
}
export function EnvironmentTree() {
const tenantId = useAuthStore((s) => s.tenantId);
const { tenantId } = useAuth();
const { data: environments } = useEnvironments(tenantId ?? '');
const navigate = useNavigate();
const location = useLocation();

View File

@@ -5,7 +5,7 @@ import {
Sidebar,
TopBar,
} from '@cameleer/design-system';
import { useAuthStore } from '../auth/auth-store';
import { useAuth } from '../auth/useAuth';
import { EnvironmentTree } from './EnvironmentTree';
// Simple SVG logo mark for the sidebar header
@@ -91,8 +91,7 @@ function UserIcon() {
export function Layout() {
const navigate = useNavigate();
const username = useAuthStore((s) => s.username);
const logout = useAuthStore((s) => s.logout);
const { username, logout } = useAuth();
const [envSectionOpen, setEnvSectionOpen] = useState(true);
const [collapsed, setCollapsed] = useState(false);