React / Next.js SSAFY 인증 연동

"use client";

import Script from "next/script";
import { useState } from "react";

type VerifyResult =
  | { ok: true; verified: true; sub: string; cohort: string | null; campus: string | null; authTime: number }
  | { ok: false; errorCode: string; requestId: string | null };

declare global {
  interface Window {
    ssafyVerify?: {
      verify(options: {
        clientId: string;
        redirectUri: string;
        scopes: string[];
        waitForCallback: true;
        timeoutMs?: number;
      }): Promise<{
        code: string | null;
        state: string | null;
        iss: string | null;
        error: string | null;
        error_code: string | null;
        request_id: string | null;
        codeVerifier: string;
      }>;
    };
  }
}

export function SsafySdkScript() {
  return <Script src="https://verify.myknow.xyz/sdk/ssafy-verify.js" strategy="afterInteractive" />;
}

export function useSsafyVerify() {
  const [status, setStatus] = useState<"idle" | "working" | "verified" | "failed">("idle");
  const [result, setResult] = useState<VerifyResult | null>(null);

  async function verify() {
    const sdk = window.ssafyVerify;
    const expectedIssuer = process.env.NEXT_PUBLIC_SSAFY_VERIFY_ISSUER ?? "https://verify.myknow.xyz";
    if (!sdk) {
      const nextResult = { ok: false as const, errorCode: "SDK_NOT_READY", requestId: null };
      setStatus("failed");
      setResult(nextResult);
      return nextResult;
    }

    setStatus("working");
    const callback = await sdk.verify({
      clientId: process.env.NEXT_PUBLIC_SSAFY_VERIFY_CLIENT_ID!,
      redirectUri: process.env.NEXT_PUBLIC_SSAFY_VERIFY_REDIRECT_URI!,
      scopes: ["ssafy.verify", "ssafy.affiliation", "ssafy.name"],
      waitForCallback: true,
    }).then((value) => value, () => null);

    if (!callback) {
      const nextResult = { ok: false as const, errorCode: "VERIFY_POPUP_FAILED", requestId: null };
      setStatus("failed");
      setResult(nextResult);
      return nextResult;
    }

    if (callback.error || !callback.code) {
      const nextResult = {
        ok: false as const,
        errorCode: callback.error_code ?? "VERIFY_CANCELLED",
        requestId: callback.request_id,
      };
      setStatus("failed");
      setResult(nextResult);
      return nextResult;
    }

    if (callback.iss !== expectedIssuer) {
      const nextResult = {
        ok: false as const,
        errorCode: "CALLBACK_ISSUER_MISMATCH",
        requestId: callback.request_id,
      };
      setStatus("failed");
      setResult(nextResult);
      return nextResult;
    }

    const response = await fetch("/api/ssafy/verify-token", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        code: callback.code,
        codeVerifier: callback.codeVerifier,
        redirectUri: process.env.NEXT_PUBLIC_SSAFY_VERIFY_REDIRECT_URI!,
        iss: callback.iss,
      }),
    }).then((value) => value, () => null);

    if (!response) {
      const nextResult = { ok: false as const, errorCode: "VERIFY_NETWORK_FAILED", requestId: null };
      setStatus("failed");
      setResult(nextResult);
      return nextResult;
    }

    const nextResult = await response.json().then(
      (value) => value as VerifyResult,
      () => ({ ok: false as const, errorCode: "VERIFY_RESPONSE_INVALID", requestId: null }),
    );
    setStatus(nextResult.ok ? "verified" : "failed");
    setResult(nextResult);
    return nextResult;
  }

  return { status, result, verify };
}