src/index.ts

import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";

// Get UI elements
const signinButton = document.getElementById("signin") as HTMLImageElement;
const signoutButton = document.getElementById("signout") as HTMLButtonElement;
const preElement = document.querySelector("pre") as HTMLPreElement;

// Show/hide UI elements based on auth state
function updateUI(isLoggedIn: boolean) {
  signinButton.style.display = isLoggedIn ? "none" : "block";
  signoutButton.style.display = isLoggedIn ? "block" : "none";
}

async function handleOAuth() {
  try {
    const oauthResult = await oauthHandleRedirectIfPresent();

    if (oauthResult) {
      // We have OAuth results, display them
      preElement.textContent = JSON.stringify(oauthResult, null, 2);
      updateUI(true);
    } else {
      // No OAuth results, show sign-in button
      updateUI(false);
    }

    return oauthResult;
  } catch (error) {
    console.error("OAuth error:", error);
    preElement.textContent = "Error: " + (error as Error).message;
    updateUI(false);
    throw error;
  }
}

// Handle sign-in click
signinButton.addEventListener("click", async () => {
  const loginUrl = await oauthLoginUrl();
  window.location.href = loginUrl;
});

// Handle sign-out click
signoutButton.addEventListener("click", () => {
  // Clear the display and reset UI
  preElement.textContent = "";
  updateUI(false);
  // You might want to add additional logout logic here
});

// Initialize OAuth handling
handleOAuth().catch(console.error);