Function IntegrationCallback

frontend/src/pages/IntegrationCallback.tsx:15–125

()

type CallbackStatus = 'pending' | 'success' | 'error';

export function IntegrationCallback() {
  const { provider } = useParams<{ provider: string }>();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const userId = useMemo(() => getCurrentUserId(), []);

  const [status, setStatus] = useState<CallbackStatus>('pending');
  const [message, setMessage] = useState('Exchanging authorization code…');
  const exchangeStartedRef = useRef(false);

  useEffect(() => {
    if (!provider) {
      setStatus('error');
      setMessage('Missing provider information in callback URL.');
      return;
    }

    const providerId = provider;

    const errorParam = searchParams.get('error');
    if (errorParam) {
      setStatus('error');
      setMessage(`Provider returned an error: ${errorParam}`);
      return;
    }

    const code = searchParams.get('code');
    const state = searchParams.get('state');

    if (!code || !state) {
      setStatus('error');
      setMessage('Unable to complete OAuth without an authorization code and state.');
      return;
    }

    if (exchangeStartedRef.current) {
      return;
    }
    exchangeStartedRef.current = true;

    const authCode = code;
    const authState = state;

    const redirectUri = `${window.location.origin}/integrations/callback/${providerId}`;
    let cancelled = false;

    async function exchangeCode() {
      try {
        const connection = await api.integrations.completeOAuth(providerId, {
          userId,
          code: authCode,
          state: authState,
          redirectUri,
        });

        if (cancelled) {
          return;
        }