Aurora-SpotiRip/pages/spotify.callback.tsx

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { CircleCheck, LoaderCircle, TriangleAlert } from "lucide-react";
import { postSpotifyExchange } from "../endpoints/spotify-exchange_POST.schema";
import { getDesktopBridge } from "../helpers/desktopBridge";
import styles from "./spotify.callback.module.css";

export default function SpotifyCallbackPage() {
  const navigate = useNavigate();
  const [error, setError] = useState<string | null>(null);
  const [handedToApp, setHandedToApp] = useState(false);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const spotifyError = params.get("error");
    const code = params.get("code");
    const state = params.get("state");
    if (spotifyError) {
      setError(`Spotify authorization was not completed: ${spotifyError}`);
      return;
    }
    if (!code || !state) {
      setError("Spotify did not return the expected authorization information.");
      return;
    }

    postSpotifyExchange({ code, state })
      .then((result) => {
        if (result.desktop && !getDesktopBridge()) setHandedToApp(true);
        else navigate("/", { replace: true });
      })
      .catch((reason) => setError(reason instanceof Error ? reason.message : "Spotify login failed."));
  }, [navigate]);

  return (
    <main className={styles.page}>
      <img src="/SpotiRip.png" alt="Aurora SpotiRip" />
      {error ? (
        <div className={styles.message}>
          <TriangleAlert size={22} />
          <strong>Spotify connection failed</strong>
          <p>{error}</p>
          <button onClick={() => navigate("/", { replace: true })}>Back to SpotiRip</button>
        </div>
      ) : handedToApp ? (
        <div className={styles.message}>
          <CircleCheck size={24} />
          <strong>Spotify connected</strong>
          <p>Return to Aurora SpotiRip. You can close this tab.</p>
        </div>
      ) : (
        <div className={styles.message}>
          <LoaderCircle className={styles.spinner} size={24} />
          <strong>Connecting Spotify…</strong>
          <p>Finishing authorization and loading your account.</p>
        </div>
      )}
    </main>
  );
}