AnimeTV-Frontend/features/authCallback/index.tsx

"use client";
import { Spinner } from "@/shared/libs/shadcn/ui/spinner";
import { submitProviderCallback } from "@/features/authCallback/actions/submitProviderCallback";
import { useParams, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";

const AuthCallbackIndex = () => {
  const { name } = useParams();
  const queries = useSearchParams().toString();
  const [textDescription, setTextDescription] = useState(
    "We are processing your authentication.",
  );

  const finishOAuthFlow = (type: string, message?: string) => {
    setTimeout(() => {
      if (!window.opener) window.location.href = "/";
      window.opener.postMessage(
        { type: type, message: message },
        window.location.origin,
      );
      window.close();
    }, 1000);
  };

  useEffect(() => {
    (async () => {
      const response = await submitProviderCallback(name as string, queries);
      if (response.success) {
        setTextDescription("Authentication successful! Redirecting...");
        finishOAuthFlow("oauth-success", response.message);
      } else {
        setTextDescription("Authentication failed. Please try again.");
        finishOAuthFlow("oauth-failed", response.message);
      }
    })();
  }, [name, queries]);

  return (
    <div className="w-full flex flex-col items-center gap-2 pt-8">
      <Spinner className="size-6" />
      <div className="text-center">
        <h1 className="text-neutral-200 text-base">Please wait...</h1>
        <p className="font-normal text-neutral-400 text-sm">
          {textDescription}
        </p>
      </div>
    </div>
  );
};

export default AuthCallbackIndex;