ClickerZ/Frontend/src/pages/AuthCallback.jsx

import { useEffect, useState, useRef } from "react";
import { useNavigate, Link } from "react-router-dom";
import { exchangeCode, loadVerifier, clearVerifier } from "../lib/oauth";
import { apiFetch } from "../lib/api";
import { useAuth } from "../context/AuthContext";
import "../scss/pages.scss";

export default function AuthCallback() {
  const navigate = useNavigate();
  const { refresh } = useAuth();
  const [error, setError] = useState(null);
  const called = useRef(false);

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

    const params = new URLSearchParams(window.location.search);
    const code  = params.get("code");
    const err   = params.get("error");

    if (err) {
      setError(err);
      return;
    }

    if (!code) {
      setError("Code manquant dans l'URL.");
      return;
    }

    const verifier = loadVerifier();
    if (!verifier) {
      setError("Verifier PKCE manquant — réessaie la connexion.");
      return;
    }

    const redirectUri = `${window.location.origin}/callback`;

    exchangeCode(code, verifier, redirectUri)
      .then((tokens) => {
        clearVerifier();
        return apiFetch("/auth/session", {
          method: "POST",
          body: JSON.stringify({
            token: tokens.access_token,
            refreshToken: tokens.refresh_token,
          }),
        });
      })
      .then(() => refresh())
      .then(() => navigate("/", { replace: true }))
      .catch((e) => {
        clearVerifier();
        setError(e.message || "Erreur de connexion.");
      });
  }, [navigate, refresh]);

  if (error) {
    return (
      <section>
        <div className="containererror">
          <h1>Erreur de connexion</h1>
          <p className="message">{error}</p>
          <Link className="btn-return" to="/login">
            Retour au login
          </Link>
        </div>
      </section>
    );
  }

  return (
    <section>
      <div className="containererror">
        <p className="message">Connexion en cours...</p>
      </div>
    </section>
  );
}