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>
22 lines
523 B
TypeScript
22 lines
523 B
TypeScript
import { useHandleSignInCallback } from '@logto/react';
|
|
import { useNavigate } from 'react-router';
|
|
import { Spinner } from '@cameleer/design-system';
|
|
|
|
export function CallbackPage() {
|
|
const navigate = useNavigate();
|
|
|
|
const { isLoading } = useHandleSignInCallback(() => {
|
|
navigate('/', { replace: true });
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|