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>
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user