Replace manual token input with Hugging Face OAuth login

modified: README.md
modified: package-lock.json
modified: package.json
modified: src/components/ChatInterface.jsx
new file: src/components/OAuthLogin.jsx
modified: src/hooks/useChatCompletion.js

README.md

@@ -9,6 +9,9 @@ app_build_command: npm run build
 app_file: build/index.html
 license: mit
 short_description: Test static sdk react template
+hf_oauth: true
+hf_oauth_scopes:
+  - inference-api
 ---
 
 # A Chatbot built with React
@@ -17,7 +20,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Features
 
-- Support user input of Hugging Face Access Token.
+- Support OAuth login to Hugging Face.
 - Support tuning system prompt and parameters: temperature, top_p, max_tokens.
 - Support typing animation, loading animation, and error handling.
 - Support UI to send user input and get response of the chatbot.
@@ -25,6 +28,11 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Usage
 
+### Create OAuth App
+
+Create an OAuth app at [Connected Applications](https://huggingface.co/settings/connected-applications) to support OAuth login.\
+Refer to the description of [Sign in with Hugging Face](https://huggingface.co/docs/hub/oauth)
+
 ### Development mode
 
 - `npm start`

package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-template",
       "version": "0.1.0",
       "dependencies": {
+        "@huggingface/hub": "^2.6.5",
         "@huggingface/inference": "^4.8.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
@@ -2444,6 +2445,24 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@huggingface/hub": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.6.5.tgz",
+      "integrity": "sha512-3O20Pe9bSXQ/4LxUNnf75jZAZaYvF/3lVdIU0GrJOL3oTlneuxdRHZ9AXuu25hYY05fyng0G83EIS5Xn9uJtGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/tasks": "^0.19.46"
+      },
+      "bin": {
+        "hfjs": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "cli-progress": "^3.12.0"
+      }
+    },
     "node_modules/@huggingface/inference": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.8.0.tgz",
@@ -5650,6 +5669,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@huggingface/hub": "^2.6.5",
     "@huggingface/inference": "^4.8.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",

src/components/ChatInterface.jsx

@@ -6,7 +6,7 @@ import ChatSettings from "./ChatSettings";
 import LoadingIndicator from "./LoadingIndicator";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
-import TokenInput from "./TokenInput";
+import OAuthLogin from "./OAuthLogin";
 import TypingMessage from "./TypingMessage";
 import UISettings from "./UISettings";
 
@@ -44,7 +44,7 @@ export default function ChatInterface() {
     >
       {/* Token input */}
       <div>
-        <TokenInput onHFClientReady={handleHFClientReady} />
+        <OAuthLogin onHFClientReady={handleHFClientReady} />
       </div>
 
       {/* Chat settings */}

src/components/OAuthLogin.jsx

@@ -0,0 +1,81 @@
+// Login with Hugging Face OAuth
+import { oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub";
+import { InferenceClient } from "@huggingface/inference";
+import { useEffect, useRef, useState } from "react";
+
+export default function OAuthLogin({ onHFClientReady }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [oauthResult, setOAuthResult] = useState(null);
+  const [userInfo, setUserInfo] = useState(null);
+  const oauthHandled = useRef(false);
+  const stableOnHFClientReady = useRef(onHFClientReady);
+
+  useEffect(() => {
+    // Prevent handling OAuth twice in Strict Mode
+    if (oauthHandled.current) return;
+    oauthHandled.current = true;
+
+    (async () => {
+      setLoading(true);
+      try {
+        const result = await oauthHandleRedirectIfPresent();
+        if (!result) return;
+        setOAuthResult(result);
+        setError("");
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    stableOnHFClientReady.current = onHFClientReady;
+  }, [onHFClientReady]);
+
+  useEffect(() => {
+    if (oauthResult) {
+      try {
+        const client = new InferenceClient(oauthResult.accessToken);
+        stableOnHFClientReady.current(client);
+        setUserInfo(oauthResult.userInfo);
+        setError("");
+      } catch (err) {
+        setError(err.message);
+      }
+    }
+  }, [oauthResult]);
+
+  const handleLogin = async () => {
+    if (window.location.hostname.endsWith(".hf.space")) {
+      window.location.href = await oauthLoginUrl();
+    } else {
+      window.location.href = await oauthLoginUrl({
+        clientId: "d9a24fb2-1e7c-4a57-ace3-c75fa6a99305",
+        redirectUrl: window.location.origin,
+        scopes: ["inference-api"],
+      });
+    }
+  };
+
+  return (
+    <div style={{ padding: "20px" }}>
+      {userInfo ? (
+        <div>
+          <p>
+            ✅ {userInfo.name || userInfo.email} has successfully logged in!
+          </p>
+        </div>
+      ) : loading ? (
+        <p>🔄 Authenticating with Hugging Face…</p>
+      ) : (
+        <button onClick={handleLogin} style={{ padding: "10px 20px" }}>
+          Login with Hugging Face
+        </button>
+      )}
+      {error && <p style={{ color: "red" }}>{error}</p>}
+    </div>
+  );
+}

src/hooks/useChatCompletion.js

@@ -16,7 +16,7 @@ export function useChatCompletion(
     if (!client) {
       setError({
         type: "MISSING_CLIENT",
-        message: "Please enter a valid Hugging Face token first.",
+        message: "Please login Hugging Face first.",
       });
       return;
     }