Device Authorization

export default function DeviceAuthorizationPage() {
  const [userCode, setUserCode] = useState("");
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // 코드 형식 지정: 대시 제거 및 대문자로 변환
      const formattedCode = userCode.trim().replace(/-/g, "").toUpperCase();

      // GET /device 엔드포인트를 사용하여 코드가 유효한지 확인
      const response = await authClient.device({
        query: { user_code: formattedCode },
      });

      if (response.data) {
        // 승인 페이지로 리디렉션
        window.location.href = `/device/approve?user_code=${formattedCode}`;
      }
    } catch (err) {
      setError("유효하지 않거나 만료된 코드입니다");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={userCode}
        onChange={(e) => setUserCode(e.target.value)}
        placeholder="장치 코드를 입력하세요 (예: ABCD-1234)"
        maxLength={12}
      />
      <button type="submit">계속</button>
      {error && <p>{error}</p>}
    </form>
  );
}

export default function DeviceApprovalPage() {
  const { user } = useAuth(); // 인증되어야 합니다
  const searchParams = useSearchParams();
  const userCode = searchParams.get("userCode");
  const [isProcessing, setIsProcessing] = useState(false);

  const handleApprove = async () => {
    setIsProcessing(true);
    try {
      await authClient.device.approve({
        userCode: userCode,
      });
      // 성공 메시지 표시
      alert("장치가 성공적으로 승인되었습니다!");
      window.location.href = "/";
    } catch (error) {
      alert("장치 승인에 실패했습니다");
    }
    setIsProcessing(false);
  };

  const handleDeny = async () => {
    setIsProcessing(true);
    try {
      await authClient.device.deny({
        userCode: userCode,
      });
      alert("장치가 거부되었습니다");
      window.location.href = "/";
    } catch (error) {
      alert("장치 거부에 실패했습니다");
    }
    setIsProcessing(false);
  };

  if (!user) {
    // 인증되지 않은 경우 로그인으로 리디렉션
    window.location.href = `/login?redirect=/device/approve?user_code=${userCode}`;
    return null;
  }

  return (
    <div>
      <h2>장치 인증 요청</h2>
      <p>장치가 귀하의 계정에 대한 접근을 요청하고 있습니다.</p>
      <p>코드: {userCode}</p>

      <button onClick={handleApprove} disabled={isProcessing}>
        승인
      </button>
      <button onClick={handleDeny} disabled={isProcessing}>
        거부
      </button>
    </div>
  );
}

import { createAuthClient } from "better-auth/client";
import { deviceAuthorizationClient } from "better-auth/client/plugins";
import open from "open";

const authClient = createAuthClient({
  baseURL: "http://localhost:3000",
  plugins: [deviceAuthorizationClient()],
});

async function authenticateCLI() {
  console.log("🔐 Better Auth Device Authorization 데모");
  console.log("⏳ 장치 인증을 요청하는 중...");

  try {
    // 장치 코드 요청
    const { data, error } = await authClient.device.code({
      client_id: "demo-cli",
      scope: "openid profile email",
    });

    if (error || !data) {
      console.error("❌ 오류:", error?.error_description);
      process.exit(1);
    }

    const {
      device_code,
      user_code,
      verification_uri,
      verification_uri_complete,
      interval = 5,
    } = data;

    console.log("\n📱 장치 인증 진행 중");
    console.log(`다음 주소를 방문하세요: ${verification_uri}`);
    console.log(`코드를 입력하세요: ${user_code}\n`);

    // 완전한 URL로 브라우저 열기
    const urlToOpen = verification_uri_complete || verification_uri;
    if (urlToOpen) {
      console.log("🌐 브라우저를 여는 중...");
      await open(urlToOpen);
    }

    console.log(`⏳ 인증을 기다리는 중... (${interval}초마다 폴링)`);

    // 토큰 폴링
    await pollForToken(device_code, interval);
  } catch (err) {
    console.error("❌ 오류:", err.message);
    process.exit(1);
  }
}

async function pollForToken(deviceCode: string, interval: number) {
  let pollingInterval = interval;

  return new Promise<void>((resolve) => {
    const poll = async () => {
      try {
        const { data, error } = await authClient.device.token({
          grant_type: "urn:ietf:params:oauth:grant-type:device_code",
          device_code: deviceCode,
          client_id: "demo-cli",
        });

        if (data?.access_token) {
          console.log("\n인증 성공!");
          console.log("접근 토큰을 받았습니다!");

          // 사용자 세션 가져오기
          const { data: session } = await authClient.getSession({
            fetchOptions: {
              headers: {
                Authorization: `Bearer ${data.access_token}`,
              },
            },
          });

          console.log(`안녕하세요, ${session?.user?.name || "사용자"}님!`);
          resolve();
          process.exit(0);
        } else if (error) {
          switch (error.error) {
            case "authorization_pending":
              // 조용히 폴링 계속
              break;
            case "slow_down":
              pollingInterval += 5;
              console.log(`⚠️  폴링을 ${pollingInterval}초로 늦춥니다`);
              break;
            case "access_denied":
              console.error("❌ 사용자가 접근을 거부했습니다");
              process.exit(1);
              break;
            case "expired_token":
              console.error("❌ 장치 코드가 만료되었습니다. 다시 시도하세요.");
              process.exit(1);
              break;
            default:
              console.error("❌ 오류:", error.error_description);
              process.exit(1);
          }
        }
      } catch (err) {
        console.error("❌ 네트워크 오류:", err.message);
        process.exit(1);
      }

      // 다음 폴링 예약
      setTimeout(poll, pollingInterval * 1000);
    };

    // 폴링 시작
    setTimeout(poll, pollingInterval * 1000);
  });
}

// 인증 흐름 실행
authenticateCLI().catch((err) => {
  console.error("❌ 치명적 오류:", err);
  process.exit(1);
});