cameleer-server/ui/src/auth/OidcCallback.tsx

import { useEffect, useRef } from 'react';
import { Navigate, useNavigate } from 'react-router';
import { useAuthStore } from './auth-store';
import { api } from '../api/client';
import { Card, Spinner, Alert, Button } from '@cameleer/design-system';
import { config } from '../config';

export function OidcCallback() {
  const { isAuthenticated, loading, error, loginWithOidcCode } = useAuthStore();
  const navigate = useNavigate();
  const exchanged = useRef(false);

  useEffect(() => {
    if (exchanged.current) return;
    exchanged.current = true;

    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    const errorParam = params.get('error');

    if (errorParam) {
      // prompt=none failed — no session, fall back to login form
      if (errorParam === 'login_required' || errorParam === 'interaction_required') {
        window.location.replace(`${config.basePath}login?local`);
        return;
      }
      // consent_required — retry without prompt=none so user can grant scopes
      if (errorParam === 'consent_required' && !sessionStorage.getItem('oidc-consent-retry')) {
        sessionStorage.setItem('oidc-consent-retry', '1');
        api.GET('/auth/oidc/config').then(({ data }) => {
          if (data?.authorizationEndpoint && data?.clientId) {
            const redirectUri = `${window.location.origin}${config.basePath}oidc/callback`;
            const p = new URLSearchParams({
              response_type: 'code',
              client_id: data.clientId,
              redirect_uri: redirectUri,
              scope: 'openid email profile',
            });
            window.location.href = `${data.authorizationEndpoint}?${p}`;
          }
        }).catch(() => {
          window.location.replace(`${config.basePath}login?local`);
        });
        return;
      }
      sessionStorage.removeItem('oidc-consent-retry');
      useAuthStore.setState({
        error: params.get('error_description') || errorParam,
        loading: false,
      });
      return;
    }

    sessionStorage.removeItem('oidc-consent-retry');

    if (!code) {
      useAuthStore.setState({ error: 'No authorization code received', loading: false });
      return;
    }

    const redirectUri = `${window.location.origin}${config.basePath}oidc/callback`;
    const codeVerifier = sessionStorage.getItem('oidc-code-verifier') ?? undefined;
    sessionStorage.removeItem('oidc-code-verifier');
    loginWithOidcCode(code, redirectUri, codeVerifier);
  }, [loginWithOidcCode]);

  if (isAuthenticated) return <Navigate to="/" replace />;

  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: 'var(--surface-ground)' }}>
      <Card>
        <div style={{ padding: '2rem', textAlign: 'center', minWidth: 320 }}>
          <h2 style={{ marginBottom: '1rem' }}>cameleer3</h2>
          {loading && <Spinner />}
          {error && (
            <>
              <Alert variant="error">{error}</Alert>
              <Button variant="secondary" onClick={() => navigate('/login?local')} style={{ marginTop: 16 }}>
                Back to Login
              </Button>
            </>
          )}
        </div>
      </Card>
    </div>
  );
}