update files

dist/main.js

@@ -1,291 +1,31 @@
-// node_modules/@huggingface/hub/dist/index.mjs
-var HUB_URL = "https://huggingface.co";
-async function createApiError(response, opts) {
-  const error = new HubApiError(response.url, response.status, response.headers.get("X-Request-Id") ?? opts?.requestId);
-  error.message = `Api error with status ${error.statusCode}${opts?.message ? `. ${opts.message}` : ""}`;
-  const trailer = [`URL: ${error.url}`, error.requestId ? `Request ID: ${error.requestId}` : void 0].filter(Boolean).join(". ");
-  if (response.headers.get("Content-Type")?.startsWith("application/json")) {
-    const json = await response.json();
-    error.message = json.error || json.message || error.message;
-    if (json.error_description) {
-      error.message = error.message ? error.message + `: ${json.error_description}` : json.error_description;
-    }
-    error.data = json;
-  } else {
-    error.data = { message: await response.text() };
-  }
-  error.message += `. ${trailer}`;
-  throw error;
-}
-var HubApiError = class extends Error {
-  statusCode;
-  url;
-  requestId;
-  data;
-  constructor(url, statusCode, requestId, message) {
-    super(message);
-    this.statusCode = statusCode;
-    this.requestId = requestId;
-    this.url = url;
-  }
-};
-var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
-var isWebWorker = typeof self === "object" && self.constructor && self.constructor.name === "DedicatedWorkerGlobalScope";
-var resolve;
-var waitPromise = new Promise((r) => {
-  resolve = r;
-});
-function base64FromBytes(arr) {
-  if (globalThis.Buffer) {
-    return globalThis.Buffer.from(arr).toString("base64");
-  } else {
-    const bin = [];
-    arr.forEach((byte) => {
-      bin.push(String.fromCharCode(byte));
-    });
-    return globalThis.btoa(bin.join(""));
-  }
-}
-var REGEX_COMMIT_HASH = new RegExp("^[0-9a-f]{40}$");
-async function oauthHandleRedirect(opts) {
-  if (typeof window === "undefined" && !opts?.redirectedUrl) {
-    throw new Error("oauthHandleRedirect is only available in the browser, unless you provide redirectedUrl");
-  }
-  if (typeof localStorage === "undefined" && (!opts?.nonce || !opts?.codeVerifier)) {
-    throw new Error(
-      "oauthHandleRedirect requires localStorage to be available, unless you provide nonce and codeVerifier"
-    );
-  }
-  const redirectedUrl = opts?.redirectedUrl ?? window.location.href;
-  const searchParams = (() => {
-    try {
-      return new URL(redirectedUrl).searchParams;
-    } catch (err) {
-      throw new Error("Failed to parse redirected URL: " + redirectedUrl);
-    }
-  })();
-  const [error, errorDescription] = [searchParams.get("error"), searchParams.get("error_description")];
-  if (error) {
-    throw new Error(`${error}: ${errorDescription}`);
-  }
-  const code = searchParams.get("code");
-  const nonce = opts?.nonce ?? localStorage.getItem("huggingface.co:oauth:nonce");
-  if (!code) {
-    throw new Error("Missing oauth code from query parameters in redirected URL: " + redirectedUrl);
-  }
-  if (!nonce) {
-    throw new Error("Missing oauth nonce from localStorage");
-  }
-  const codeVerifier = opts?.codeVerifier ?? localStorage.getItem("huggingface.co:oauth:code_verifier");
-  if (!codeVerifier) {
-    throw new Error("Missing oauth code_verifier from localStorage");
-  }
-  const state = searchParams.get("state");
-  if (!state) {
-    throw new Error("Missing oauth state from query parameters in redirected URL");
-  }
-  let parsedState;
-  try {
-    parsedState = JSON.parse(state);
-  } catch {
-    throw new Error("Invalid oauth state in redirected URL, unable to parse JSON: " + state);
-  }
-  if (parsedState.nonce !== nonce) {
-    throw new Error("Invalid oauth state in redirected URL");
-  }
-  const hubUrl = opts?.hubUrl || HUB_URL;
-  const openidConfigUrl = `${new URL(hubUrl).origin}/.well-known/openid-configuration`;
-  const openidConfigRes = await fetch(openidConfigUrl, {
-    headers: {
-      Accept: "application/json"
-    }
-  });
-  if (!openidConfigRes.ok) {
-    throw await createApiError(openidConfigRes);
-  }
-  const openidConfig = await openidConfigRes.json();
-  const tokenRes = await fetch(openidConfig.token_endpoint, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded"
-    },
-    body: new URLSearchParams({
-      grant_type: "authorization_code",
-      code,
-      redirect_uri: parsedState.redirectUri,
-      code_verifier: codeVerifier
-    }).toString()
-  });
-  if (!opts?.codeVerifier) {
-    localStorage.removeItem("huggingface.co:oauth:code_verifier");
-  }
-  if (!opts?.nonce) {
-    localStorage.removeItem("huggingface.co:oauth:nonce");
-  }
-  if (!tokenRes.ok) {
-    throw await createApiError(tokenRes);
-  }
-  const token = await tokenRes.json();
-  const accessTokenExpiresAt = new Date(Date.now() + token.expires_in * 1e3);
-  const userInfoRes = await fetch(openidConfig.userinfo_endpoint, {
-    headers: {
-      Authorization: `Bearer ${token.access_token}`
-    }
-  });
-  if (!userInfoRes.ok) {
-    throw await createApiError(userInfoRes);
-  }
-  const userInfo = await userInfoRes.json();
-  return {
-    accessToken: token.access_token,
-    accessTokenExpiresAt,
-    userInfo,
-    state: parsedState.state,
-    scope: token.scope
-  };
-}
-async function oauthHandleRedirectIfPresent(opts) {
-  if (typeof window === "undefined" && !opts?.redirectedUrl) {
-    throw new Error("oauthHandleRedirect is only available in the browser, unless you provide redirectedUrl");
-  }
-  if (typeof localStorage === "undefined" && (!opts?.nonce || !opts?.codeVerifier)) {
-    throw new Error(
-      "oauthHandleRedirect requires localStorage to be available, unless you provide nonce and codeVerifier"
-    );
-  }
-  const searchParams = new URLSearchParams(opts?.redirectedUrl ?? window.location.search);
-  if (searchParams.has("error")) {
-    return oauthHandleRedirect(opts);
-  }
-  if (searchParams.has("code")) {
-    if (!localStorage.getItem("huggingface.co:oauth:nonce")) {
-      console.warn(
-        "Missing oauth nonce from localStorage. This can happen when the user refreshes the page after logging in, without changing the URL."
-      );
-      return false;
-    }
-    return oauthHandleRedirect(opts);
-  }
-  return false;
-}
-async function oauthLoginUrl(opts) {
-  if (typeof window === "undefined" && (!opts?.redirectUrl || !opts?.clientId)) {
-    throw new Error("oauthLogin is only available in the browser, unless you provide clientId and redirectUrl");
-  }
-  if (typeof localStorage === "undefined" && !opts?.localStorage) {
-    throw new Error(
-      "oauthLogin requires localStorage to be available in the context, unless you provide a localStorage empty object as argument"
-    );
-  }
-  const hubUrl = opts?.hubUrl || HUB_URL;
-  const openidConfigUrl = `${new URL(hubUrl).origin}/.well-known/openid-configuration`;
-  const openidConfigRes = await fetch(openidConfigUrl, {
-    headers: {
-      Accept: "application/json"
-    }
-  });
-  if (!openidConfigRes.ok) {
-    throw await createApiError(openidConfigRes);
-  }
-  const opendidConfig = await openidConfigRes.json();
-  const newNonce = globalThis.crypto.randomUUID();
-  const newCodeVerifier = globalThis.crypto.randomUUID() + globalThis.crypto.randomUUID();
-  if (opts?.localStorage) {
-    if (opts.localStorage.codeVerifier !== void 0 && opts.localStorage.codeVerifier !== null) {
-      throw new Error(
-        "localStorage.codeVerifier must be a initially set to null or undefined, and will be filled by oauthLoginUrl"
-      );
-    }
-    if (opts.localStorage.nonce !== void 0 && opts.localStorage.nonce !== null) {
-      throw new Error(
-        "localStorage.nonce must be a initially set to null or undefined, and will be filled by oauthLoginUrl"
-      );
-    }
-    opts.localStorage.codeVerifier = newCodeVerifier;
-    opts.localStorage.nonce = newNonce;
-  } else {
-    localStorage.setItem("huggingface.co:oauth:nonce", newNonce);
-    localStorage.setItem("huggingface.co:oauth:code_verifier", newCodeVerifier);
-  }
-  const redirectUri = opts?.redirectUrl || (typeof window !== "undefined" ? window.location.href : void 0);
-  if (!redirectUri) {
-    throw new Error("Missing redirectUrl");
-  }
-  const state = JSON.stringify({
-    nonce: newNonce,
-    redirectUri,
-    state: opts?.state
-  });
-  const variables = (
-    // @ts-expect-error window.huggingface is defined inside static Spaces.
-    typeof window !== "undefined" ? window.huggingface?.variables ?? null : null
-  );
-  const clientId = opts?.clientId || variables?.OAUTH_CLIENT_ID;
-  if (!clientId) {
-    if (variables) {
-      throw new Error("Missing clientId, please add hf_oauth: true to the README.md's metadata in your static Space");
-    }
-    throw new Error("Missing clientId");
-  }
-  const challenge = base64FromBytes(
-    new Uint8Array(await globalThis.crypto.subtle.digest("SHA-256", new TextEncoder().encode(newCodeVerifier)))
-  ).replace(/[+]/g, "-").replace(/[/]/g, "_").replace(/=/g, "");
-  return `${opendidConfig.authorization_endpoint}?${new URLSearchParams({
-    client_id: clientId,
-    scope: opts?.scopes || variables?.OAUTH_SCOPES || "openid profile",
-    response_type: "code",
-    redirect_uri: redirectUri,
-    state,
-    code_challenge: challenge,
-    code_challenge_method: "S256"
-  }).toString()}`;
-}
-
 // src/oauth.ts
-var OAuthManager = class {
+var TokenManager = class {
   constructor() {
-    this.oauthResult = null;
-    const storedOAuth = localStorage.getItem("oauth");
-    if (storedOAuth) {
-      try {
-        this.oauthResult = JSON.parse(storedOAuth);
-      } catch {
-        this.oauthResult = null;
-      }
+    this.token = null;
+    const storedToken = localStorage.getItem("token");
+    if (storedToken) {
+      this.token = storedToken;
     }
   }
-  async handleRedirect() {
-    this.oauthResult ||= await oauthHandleRedirectIfPresent();
-    if (this.oauthResult !== null && this.oauthResult !== false) {
-      localStorage.setItem("oauth", JSON.stringify(this.oauthResult));
-    }
-    return this.oauthResult;
-  }
-  async initiateLogin() {
-    const loginUrl = await oauthLoginUrl({
-      scopes: window.huggingface?.variables?.OAUTH_SCOPES ?? ""
-    });
-    window.location.href = `${loginUrl}&prompt=consent`;
+  setToken(token) {
+    this.token = token;
+    localStorage.setItem("token", token);
   }
   logout() {
-    localStorage.removeItem("oauth");
-    window.location.href = window.location.href.replace(/\?.*$/, "");
+    this.token = null;
+    localStorage.removeItem("token");
     window.location.reload();
   }
   getAccessToken() {
-    if (this.oauthResult && typeof this.oauthResult === "object") {
-      return this.oauthResult.accessToken ?? null;
-    }
-    return null;
+    return this.token;
   }
   isAuthenticated() {
-    return this.oauthResult !== null && this.oauthResult !== false;
+    return this.token !== null;
   }
 };
-var oauthManager = new OAuthManager();
+var tokenManager = new TokenManager();
 
 // src/main.ts
-console.log("huggingface env", window.huggingface);
 async function getOrganizationInfo(accessToken) {
   const response = await fetch("https://huggingface.co/api/whoami-v2", {
     headers: {
@@ -366,102 +106,118 @@ async function createRepository(accessToken, name, organization, resourceGroupNa
   }
 }
 var init = async () => {
-  await oauthManager.handleRedirect();
-  if (oauthManager.isAuthenticated()) {
-    const accessToken = oauthManager.getAccessToken();
-    if (!accessToken) {
-      throw new Error("Access token not found");
-    }
-    const repoForm = document.getElementById("repo-form");
-    if (repoForm) {
-      repoForm.style.removeProperty("display");
-    }
-    const createRepoButton = document.getElementById("create-repo");
-    const repoNameInput = document.getElementById(
-      "repo-name"
-    );
-    const resourceGroupInput = document.getElementById(
-      "resource-group-name"
-    );
-    const resourceGroupContainer = document.getElementById(
-      "resource-group-container"
-    );
-    if (createRepoButton && repoNameInput) {
-      createRepoButton.onclick = async () => {
-        const repoName = repoNameInput.value.trim();
-        const orgSelect2 = document.getElementById(
-          "org-select"
-        );
-        if (repoName) {
-          try {
-            const selectedOrg = orgSelect2?.value || void 0;
-            const resourceGroupName = selectedOrg ? resourceGroupInput?.value.trim() : void 0;
-            console.log({ selectedOrg, resourceGroupName });
-            await createRepository(
-              accessToken,
-              repoName,
-              selectedOrg,
-              resourceGroupName
-            );
-            repoNameInput.value = "";
-            if (resourceGroupInput) {
-              resourceGroupInput.value = "";
-            }
-            alert("Repository and resource group created successfully!");
-          } catch (error) {
-            console.error("Failed to create repository:", error);
-            alert("Failed to create repository. Please try again.");
+  if (tokenManager.isAuthenticated()) {
+    showAuthenticatedUI();
+  } else {
+    showUnauthenticatedUI();
+  }
+};
+var showAuthenticatedUI = async () => {
+  const accessToken = tokenManager.getAccessToken();
+  if (!accessToken) {
+    throw new Error("Access token not found");
+  }
+  const tokenForm = document.getElementById("token-form");
+  if (tokenForm) {
+    tokenForm.style.display = "none";
+  }
+  const repoForm = document.getElementById("repo-form");
+  const signoutButton = document.getElementById("signout");
+  if (repoForm) {
+    repoForm.style.removeProperty("display");
+  }
+  if (signoutButton) {
+    signoutButton.style.removeProperty("display");
+    signoutButton.onclick = () => tokenManager.logout();
+  }
+  const createRepoButton = document.getElementById("create-repo");
+  const repoNameInput = document.getElementById(
+    "repo-name"
+  );
+  const resourceGroupInput = document.getElementById(
+    "resource-group-name"
+  );
+  const resourceGroupContainer = document.getElementById(
+    "resource-group-container"
+  );
+  if (createRepoButton && repoNameInput) {
+    createRepoButton.onclick = async () => {
+      const repoName = repoNameInput.value.trim();
+      const orgSelect2 = document.getElementById(
+        "org-select"
+      );
+      if (repoName) {
+        try {
+          const selectedOrg = orgSelect2?.value || void 0;
+          const resourceGroupName = selectedOrg ? resourceGroupInput?.value.trim() : void 0;
+          console.log({ selectedOrg, resourceGroupName });
+          await createRepository(
+            accessToken,
+            repoName,
+            selectedOrg,
+            resourceGroupName
+          );
+          repoNameInput.value = "";
+          if (resourceGroupInput) {
+            resourceGroupInput.value = "";
           }
+          alert("Repository and resource group created successfully!");
+        } catch (error) {
+          console.error("Failed to create repository:", error);
+          alert("Failed to create repository. Please try again.");
         }
-      };
-    }
-    const orgSelect = document.getElementById(
-      "org-select"
-    );
-    if (orgSelect && resourceGroupContainer) {
-      orgSelect.onchange = () => {
-        if (orgSelect.value) {
-          resourceGroupContainer.style.removeProperty("display");
-        } else {
-          resourceGroupContainer.style.display = "none";
-        }
-      };
-    }
-    try {
-      const orgInfo = await getOrganizationInfo(accessToken);
-      if (orgSelect && orgInfo.orgs) {
-        orgInfo.orgs.forEach((org) => {
-          const option = document.createElement("option");
-          option.value = org.name;
-          option.textContent = org.name;
-          orgSelect.appendChild(option);
-        });
       }
-      const preElement = document.querySelector("pre");
-      if (preElement) {
-        preElement.textContent = JSON.stringify(
-          {
-            oauth: oauthManager.getAccessToken(),
-            user: orgInfo
-          },
-          null,
-          2
-        );
+    };
+  }
+  const orgSelect = document.getElementById("org-select");
+  if (orgSelect && resourceGroupContainer) {
+    orgSelect.onchange = () => {
+      if (orgSelect.value) {
+        resourceGroupContainer.style.removeProperty("display");
+      } else {
+        resourceGroupContainer.style.display = "none";
       }
-    } catch (error) {
-      console.error("Failed to fetch organization info:", error);
-    }
-    const signoutButton = document.getElementById("signout");
-    if (signoutButton) {
-      signoutButton.style.removeProperty("display");
-      signoutButton.onclick = () => oauthManager.logout();
-    }
-  } else {
-    const signinButton = document.getElementById("signin");
-    if (signinButton) {
-      signinButton.style.removeProperty("display");
-      signinButton.onclick = () => oauthManager.initiateLogin();
-    }
+    };
+  }
+  try {
+    const orgInfo = await getOrganizationInfo(accessToken);
+    if (orgSelect && orgInfo.orgs) {
+      orgInfo.orgs.forEach((org) => {
+        const option = document.createElement("option");
+        option.value = org.name;
+        option.textContent = org.name;
+        orgSelect.appendChild(option);
+      });
+    }
+    const preElement = document.querySelector("pre");
+    if (preElement) {
+      preElement.textContent = JSON.stringify(orgInfo, null, 2);
+    }
+  } catch (error) {
+    console.error("Failed to fetch organization info:", error);
+  }
+};
+var showUnauthenticatedUI = () => {
+  const tokenForm = document.getElementById("token-form");
+  const tokenInput = document.getElementById("token-input");
+  const tokenSubmit = document.getElementById("token-submit");
+  if (tokenForm && tokenInput && tokenSubmit) {
+    tokenForm.style.removeProperty("display");
+    tokenSubmit.onclick = () => {
+      const token = tokenInput.value.trim();
+      if (token) {
+        tokenManager.setToken(token);
+        showAuthenticatedUI();
+      }
+    };
+  }
+  const repoForm = document.getElementById("repo-form");
+  const signoutButton = document.getElementById("signout");
+  if (repoForm) {
+    repoForm.style.display = "none";
+  }
+  if (signoutButton) {
+    signoutButton.style.display = "none";
   }
 };
 init().catch(console.error);

index.html

@@ -4,15 +4,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HuggingFace OAuth Demo</title>
+    <title>HuggingFace API Demo</title>
     <link rel="stylesheet" href="styles/main.css">
 </head>
 
 <body>
     <div id="app">
-        <h1>HuggingFace OAuth Demo</h1>
+        <h1>HuggingFace API Demo</h1>
         <div class="auth-container">
-            <button id="signin" style="display: none;" class="auth-button">Sign in with HuggingFace</button>
+            <div id="token-form" class="token-form">
+                <input type="password" id="token-input" placeholder="Enter your HuggingFace API token"
+                    class="repo-input">
+                <button id="token-submit" class="auth-button">Submit Token</button>
+            </div>
             <button id="signout" style="display: none;" class="auth-button">Sign out</button>
         </div>
         <div id="repo-form" style="display: none;" class="repo-form">
@@ -26,7 +30,7 @@
             <button id="create-repo" class="repo-button">Create Repository</button>
         </div>
         <div id="content">
-            <h2>OAuth Result</h2>
+            <h2>User Info</h2>
             <pre class="oauth-result"></pre>
         </div>
     </div>

src/main.ts

@@ -1,4 +1,4 @@
-import { oauthManager, HuggingFaceWindow } from "./oauth";
+import { tokenManager } from "./oauth";
 
 interface OrganizationInfo {
   type: string;
@@ -22,10 +22,6 @@ interface OrganizationMember {
   role: string;
 }
 
-declare const window: HuggingFaceWindow;
-
-console.log("huggingface env", window.huggingface);
-
 async function getOrganizationInfo(
   accessToken: string
 ): Promise<WhoAmIResponse> {
@@ -133,120 +129,142 @@ async function createRepository(
 }
 
 const init = async (): Promise<void> => {
-  await oauthManager.handleRedirect();
+  if (tokenManager.isAuthenticated()) {
+    showAuthenticatedUI();
+  } else {
+    showUnauthenticatedUI();
+  }
+};
 
-  if (oauthManager.isAuthenticated()) {
-    const accessToken = oauthManager.getAccessToken();
-    if (!accessToken) {
-      throw new Error("Access token not found");
-    }
+const showAuthenticatedUI = async () => {
+  const accessToken = tokenManager.getAccessToken();
+  if (!accessToken) {
+    throw new Error("Access token not found");
+  }
 
-    // Show repo form when logged in
-    const repoForm = document.getElementById("repo-form");
-    if (repoForm) {
-      repoForm.style.removeProperty("display");
-    }
+  // Hide token form
+  const tokenForm = document.getElementById("token-form");
+  if (tokenForm) {
+    tokenForm.style.display = "none";
+  }
 
-    // Add create repo functionality
-    const createRepoButton = document.getElementById("create-repo");
-    const repoNameInput = document.getElementById(
-      "repo-name"
-    ) as HTMLInputElement;
-    const resourceGroupInput = document.getElementById(
-      "resource-group-name"
-    ) as HTMLInputElement;
-    const resourceGroupContainer = document.getElementById(
-      "resource-group-container"
-    );
+  // Show repo form and signout button
+  const repoForm = document.getElementById("repo-form");
+  const signoutButton = document.getElementById("signout");
+  if (repoForm) {
+    repoForm.style.removeProperty("display");
+  }
+  if (signoutButton) {
+    signoutButton.style.removeProperty("display");
+    signoutButton.onclick = () => tokenManager.logout();
+  }
 
-    if (createRepoButton && repoNameInput) {
-      createRepoButton.onclick = async () => {
-        const repoName = repoNameInput.value.trim();
-        const orgSelect = document.getElementById(
-          "org-select"
-        ) as HTMLSelectElement;
-        if (repoName) {
-          try {
-            const selectedOrg = orgSelect?.value || undefined;
-            const resourceGroupName = selectedOrg
-              ? resourceGroupInput?.value.trim()
-              : undefined;
-
-            console.log({ selectedOrg, resourceGroupName });
-            await createRepository(
-              accessToken,
-              repoName,
-              selectedOrg,
-              resourceGroupName
-            );
-            repoNameInput.value = ""; // Clear input after success
-            if (resourceGroupInput) {
-              resourceGroupInput.value = ""; // Clear resource group input
-            }
-            alert("Repository and resource group created successfully!");
-          } catch (error) {
-            console.error("Failed to create repository:", error);
-            alert("Failed to create repository. Please try again.");
+  // Add create repo functionality
+  const createRepoButton = document.getElementById("create-repo");
+  const repoNameInput = document.getElementById(
+    "repo-name"
+  ) as HTMLInputElement;
+  const resourceGroupInput = document.getElementById(
+    "resource-group-name"
+  ) as HTMLInputElement;
+  const resourceGroupContainer = document.getElementById(
+    "resource-group-container"
+  );
+
+  if (createRepoButton && repoNameInput) {
+    createRepoButton.onclick = async () => {
+      const repoName = repoNameInput.value.trim();
+      const orgSelect = document.getElementById(
+        "org-select"
+      ) as HTMLSelectElement;
+      if (repoName) {
+        try {
+          const selectedOrg = orgSelect?.value || undefined;
+          const resourceGroupName = selectedOrg
+            ? resourceGroupInput?.value.trim()
+            : undefined;
+
+          console.log({ selectedOrg, resourceGroupName });
+          await createRepository(
+            accessToken,
+            repoName,
+            selectedOrg,
+            resourceGroupName
+          );
+          repoNameInput.value = ""; // Clear input after success
+          if (resourceGroupInput) {
+            resourceGroupInput.value = ""; // Clear resource group input
           }
+          alert("Repository and resource group created successfully!");
+        } catch (error) {
+          console.error("Failed to create repository:", error);
+          alert("Failed to create repository. Please try again.");
         }
-      };
+      }
+    };
+  }
+
+  // Handle org select change to show/hide resource group input
+  const orgSelect = document.getElementById("org-select") as HTMLSelectElement;
+  if (orgSelect && resourceGroupContainer) {
+    orgSelect.onchange = () => {
+      if (orgSelect.value) {
+        resourceGroupContainer.style.removeProperty("display");
+      } else {
+        resourceGroupContainer.style.display = "none";
+      }
+    };
+  }
+
+  // Get organization info and populate org select
+  try {
+    const orgInfo = await getOrganizationInfo(accessToken);
+
+    // Populate org select
+    if (orgSelect && orgInfo.orgs) {
+      orgInfo.orgs.forEach((org) => {
+        const option = document.createElement("option");
+        option.value = org.name;
+        option.textContent = org.name;
+        orgSelect.appendChild(option);
+      });
     }
 
-    // Handle org select change to show/hide resource group input
-    const orgSelect = document.getElementById(
-      "org-select"
-    ) as HTMLSelectElement;
-    if (orgSelect && resourceGroupContainer) {
-      orgSelect.onchange = () => {
-        if (orgSelect.value) {
-          resourceGroupContainer.style.removeProperty("display");
-        } else {
-          resourceGroupContainer.style.display = "none";
-        }
-      };
+    // Display user info
+    const preElement = document.querySelector("pre");
+    if (preElement) {
+      preElement.textContent = JSON.stringify(orgInfo, null, 2);
     }
+  } catch (error) {
+    console.error("Failed to fetch organization info:", error);
+  }
+};
 
-    // Get organization info and populate org select after successful authentication
-    try {
-      const orgInfo = await getOrganizationInfo(accessToken);
-
-      // Populate org select
-      if (orgSelect && orgInfo.orgs) {
-        orgInfo.orgs.forEach((org) => {
-          const option = document.createElement("option");
-          option.value = org.name;
-          option.textContent = org.name;
-          orgSelect.appendChild(option);
-        });
-      }
+const showUnauthenticatedUI = () => {
+  // Show token form
+  const tokenForm = document.getElementById("token-form");
+  const tokenInput = document.getElementById("token-input") as HTMLInputElement;
+  const tokenSubmit = document.getElementById("token-submit");
 
-      // Display full info in pre element
-      const preElement = document.querySelector("pre");
-      if (preElement) {
-        preElement.textContent = JSON.stringify(
-          {
-            oauth: oauthManager.getAccessToken(),
-            user: orgInfo,
-          },
-          null,
-          2
-        );
+  if (tokenForm && tokenInput && tokenSubmit) {
+    tokenForm.style.removeProperty("display");
+    tokenSubmit.onclick = () => {
+      const token = tokenInput.value.trim();
+      if (token) {
+        tokenManager.setToken(token);
+        showAuthenticatedUI();
       }
-    } catch (error) {
-      console.error("Failed to fetch organization info:", error);
-    }
+    };
+  }
 
-    const signoutButton = document.getElementById("signout");
-    if (signoutButton) {
-      signoutButton.style.removeProperty("display");
-      signoutButton.onclick = () => oauthManager.logout();
-    }
-  } else {
-    const signinButton = document.getElementById("signin");
-    if (signinButton) {
-      signinButton.style.removeProperty("display");
-      signinButton.onclick = () => oauthManager.initiateLogin();
-    }
+  // Hide other UI elements
+  const repoForm = document.getElementById("repo-form");
+  const signoutButton = document.getElementById("signout");
+  if (repoForm) {
+    repoForm.style.display = "none";
+  }
+  if (signoutButton) {
+    signoutButton.style.display = "none";
   }
 };
 

src/oauth.ts

@@ -1,62 +1,33 @@
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
+export type TokenResult = string | null;
 
-export interface HuggingFaceWindow extends Window {
-  huggingface?: {
-    variables: {
-      OAUTH_SCOPES: string;
-    };
-  };
-}
-
-declare const window: HuggingFaceWindow;
-
-export type OAuthResult = Record<string, any> | null | false;
-
-export class OAuthManager {
-  private oauthResult: OAuthResult = null;
+export class TokenManager {
+  private token: TokenResult = null;
 
   constructor() {
-    const storedOAuth = localStorage.getItem("oauth");
-    if (storedOAuth) {
-      try {
-        this.oauthResult = JSON.parse(storedOAuth);
-      } catch {
-        this.oauthResult = null;
-      }
+    const storedToken = localStorage.getItem("token");
+    if (storedToken) {
+      this.token = storedToken;
     }
   }
 
-  async handleRedirect(): Promise<OAuthResult> {
-    this.oauthResult ||= await oauthHandleRedirectIfPresent();
-    if (this.oauthResult !== null && this.oauthResult !== false) {
-      localStorage.setItem("oauth", JSON.stringify(this.oauthResult));
-    }
-    return this.oauthResult;
-  }
-
-  async initiateLogin(): Promise<void> {
-    const loginUrl = await oauthLoginUrl({
-      scopes: window.huggingface?.variables?.OAUTH_SCOPES ?? "",
-    });
-    window.location.href = `${loginUrl}&prompt=consent`;
+  setToken(token: string): void {
+    this.token = token;
+    localStorage.setItem("token", token);
   }
 
   logout(): void {
-    localStorage.removeItem("oauth");
-    window.location.href = window.location.href.replace(/\?.*$/, "");
+    this.token = null;
+    localStorage.removeItem("token");
     window.location.reload();
   }
 
   getAccessToken(): string | null {
-    if (this.oauthResult && typeof this.oauthResult === "object") {
-      return this.oauthResult.accessToken ?? null;
-    }
-    return null;
+    return this.token;
   }
 
   isAuthenticated(): boolean {
-    return this.oauthResult !== null && this.oauthResult !== false;
+    return this.token !== null;
   }
 }
 
-export const oauthManager = new OAuthManager();
+export const tokenManager = new TokenManager();

styles/main.css

@@ -34,6 +34,17 @@ h2 {
   margin: 2rem 0;
 }
 
+.token-form {
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+  gap: 1rem;
+}
+
+.token-form input {
+  flex: 1;
+}
+
 .auth-button {
   background-color: #ff9d00;
   color: white;