update files

dist/index.js

@@ -1,4 +1,73 @@
-function greet(name) {
-    return `Hello, ${name}!`;
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
+function initializeAuth() {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            console.log("huggingface env", window.huggingface);
+            let oauthResult = null;
+            const storedAuth = localStorage.getItem("oauth");
+            if (storedAuth) {
+                try {
+                    oauthResult = JSON.parse(storedAuth);
+                }
+                catch (error) {
+                    console.error("Failed to parse stored OAuth data:", error);
+                    localStorage.removeItem("oauth");
+                }
+            }
+            const redirectResult = yield oauthHandleRedirectIfPresent();
+            if (redirectResult) {
+                oauthResult = redirectResult;
+            }
+            if (oauthResult) {
+                const preElement = document.querySelector("pre");
+                if (preElement) {
+                    preElement.textContent = JSON.stringify(oauthResult, null, 2);
+                }
+                localStorage.setItem("oauth", JSON.stringify(oauthResult));
+                const signoutButton = document.getElementById("signout");
+                if (signoutButton) {
+                    signoutButton.style.removeProperty("display");
+                    signoutButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+                        localStorage.removeItem("oauth");
+                        window.location.href = window.location.href.replace(/\?.*$/, "");
+                        window.location.reload();
+                    });
+                }
+            }
+            else {
+                const signinButton = document.getElementById("signin");
+                if (signinButton) {
+                    signinButton.style.removeProperty("display");
+                    signinButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+                        try {
+                            const loginUrl = yield oauthLoginUrl({
+                                scopes: window.huggingface.variables.OAUTH_SCOPES,
+                            });
+                            window.location.href = `${loginUrl}&prompt=consent`;
+                        }
+                        catch (error) {
+                            console.error("Failed to generate login URL:", error);
+                        }
+                    });
+                }
+            }
+        }
+        catch (error) {
+            console.error("Authentication initialization failed:", error);
+        }
+    });
 }
-document.body.innerHTML = greet("World");
+// Initialize the authentication flow
+initializeAuth().catch((error) => {
+    console.error("Fatal error during authentication initialization:", error);
+});
+//# sourceMappingURL=index.js.map

dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

index.html

@@ -2,6 +2,20 @@
 <html>
 
 <body>
+    <div class="card" style="margin-bottom: 2rem;">
+        <h1>OAuth in a static Space</h1>
+        <p>Checkout the <a href="https://huggingface.co/spaces/huggingfacejs/client-side-oauth/blob/main/index.html"
+                target="_blank">index.html</a> file to see the few lines of code
+            enabling this space</p>
+        <p>After clicking "Signin with HF", you will be redirected to this space and the access token + user info will
+            be displayed.</p>
+    </div>
+    <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
+        alt="Sign in with Hugging Face" style="cursor: pointer; display: none;" id="signin">
+    <button id="signout" style="display: none">Sign out</button>
+    <pre>
+
+      </pre>
     <script type="module" src="dist/index.js"></script>
 </body>
 

package-lock.json

@@ -0,0 +1,62 @@
+{
+  "name": "apidemo",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "apidemo",
+      "version": "1.0.0",
+      "dependencies": {
+        "@huggingface/hub": "^1.0.1",
+        "typescript": "^5.7.3"
+      },
+      "devDependencies": {
+        "@types/node": "^22.13.1"
+      }
+    },
+    "node_modules/@huggingface/hub": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-1.0.1.tgz",
+      "integrity": "sha512-wogGVETaNUV/wYBkny0uQD48L0rK9cttVtbaA1Rw/pGCuSYoZ8YlvTV6zymsGJfXaxQU8zup0aOR2XLIf6HVfg==",
+      "dependencies": {
+        "@huggingface/tasks": "^0.15.9"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.15.9",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.15.9.tgz",
+      "integrity": "sha512-cbnZcpMHKdhURWIplVP4obHxAZcxjyRm0zI7peTPksZN4CtIOMmJC4ZqGEymo0lk+0VNkXD7ULwFJ3JjT/VpkQ=="
+    },
+    "node_modules/@types/node": {
+      "version": "22.13.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz",
+      "integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -3,10 +3,14 @@
   "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
+    "@huggingface/hub": "^1.0.1",
     "typescript": "^5.7.3"
   },
   "scripts": {
     "build": "tsc",
     "start": "node dist/index.js"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.1"
   }
 }

src/index.ts

@@ -1,5 +1,84 @@
-function greet(name: string): string {
-  return `Hello, ${name}!`;
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
+
+interface OAuthResult {
+  accessToken: string;
+  userInfo?: {
+    name?: string;
+    email?: string;
+    [key: string]: any;
+  };
+}
+
+declare global {
+  interface Window {
+    huggingface: {
+      variables: {
+        OAUTH_SCOPES: string; // Changed from string[] to string
+      };
+    };
+  }
+}
+
+async function initializeAuth(): Promise<void> {
+  try {
+    console.log("huggingface env", window.huggingface);
+
+    let oauthResult: OAuthResult | null = null;
+    const storedAuth = localStorage.getItem("oauth");
+
+    if (storedAuth) {
+      try {
+        oauthResult = JSON.parse(storedAuth);
+      } catch (error) {
+        console.error("Failed to parse stored OAuth data:", error);
+        localStorage.removeItem("oauth");
+      }
+    }
+
+    const redirectResult = await oauthHandleRedirectIfPresent();
+    if (redirectResult) {
+      oauthResult = redirectResult as OAuthResult;
+    }
+
+    if (oauthResult) {
+      const preElement = document.querySelector("pre");
+      if (preElement) {
+        preElement.textContent = JSON.stringify(oauthResult, null, 2);
+      }
+
+      localStorage.setItem("oauth", JSON.stringify(oauthResult));
+
+      const signoutButton = document.getElementById("signout");
+      if (signoutButton) {
+        signoutButton.style.removeProperty("display");
+        signoutButton.onclick = async () => {
+          localStorage.removeItem("oauth");
+          window.location.href = window.location.href.replace(/\?.*$/, "");
+          window.location.reload();
+        };
+      }
+    } else {
+      const signinButton = document.getElementById("signin");
+      if (signinButton) {
+        signinButton.style.removeProperty("display");
+        signinButton.onclick = async () => {
+          try {
+            const loginUrl = await oauthLoginUrl({
+              scopes: window.huggingface.variables.OAUTH_SCOPES,
+            });
+            window.location.href = `${loginUrl}&prompt=consent`;
+          } catch (error) {
+            console.error("Failed to generate login URL:", error);
+          }
+        };
+      }
+    }
+  } catch (error) {
+    console.error("Authentication initialization failed:", error);
+  }
 }
 
-document.body.innerHTML = greet("World");
+// Initialize the authentication flow
+initializeAuth().catch((error) => {
+  console.error("Fatal error during authentication initialization:", error);
+});

tsconfig.json

@@ -2,6 +2,13 @@
   "compilerOptions": {
     "outDir": "./dist",
     "module": "es6",
-    "target": "es6"
-  }
+    "target": "es6",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "lib": ["es2020", "dom"],
+    "sourceMap": true
+  },
+  "include": ["src/**/*"]
 }