Replace token input with Hugging Face OAuth authentication

README.md

@@ -10,49 +10,52 @@ tags:
 pinned: false
 short_description: Test docker sdk streamlit template
 license: mit
+hf_oauth: true
+hf_oauth_scopes:
+  - inference-api
 ---
 
 # Welcome to Chatbot!
 
-The following command installs required packages of the chatbot.
+## Local Setup Instructions
 
-```
-pip install -r requirements.txt
-```
+To run this app locally, follow these steps:
 
-The following commands provides API token to the chatbot. Choose from one of them.
+1. **Clone the repository**
 
-- Login Hugging Face Hub
+   ```bash
+   git clone https://huggingface.co/spaces/ferrywuai/streamlit-chatbot-oauth-test
+   cd streamlit-chatbot-oauth-test
+   ```
 
-```
-hf auth login
-```
+2. **Install dependencies**
 
-- Set HF_TOKEN environment variable
+   Make sure you have Python 3.8+ installed, then run:
 
-```
-export HF_TOKEN=<Your Hugging Face Token>
-```
+   ```bash
+   pip install -r requirements.txt
+   ```
 
-The following command runs the chatbot.
+3. **Set up OAuth credentials**
 
-```
-streamlit run src/streamlit_app.py
-```
+   This app requires OAuth credentials from Hugging Face to function properly.
 
-Use browser to access the chatbot after you see the following message.
+   - Visit the [Hugging Face OAuth documentation](https://huggingface.co/docs/hub/oauth)
+   - Create a new OAuth App
+   - Copy the Client ID and Client Secret
+   - Set them as environment variables in your local environment:
 
-```
-  You can now view your Streamlit app in your browser.
+     ```bash
+     export OAUTH_CLIENT_ID="your-client-id"
+     export OAUTH_CLIENT_SECRET="your-client-secret"
+     ```
 
-  Local URL: http://localhost:8501
-  Network URL: http://172.28.148.72:8501
-```
+4. **Run the app**
 
-Use Crtl+C to stop the chatbot.
+   ```bash
+   streamlit run src/streamlit_app.py
+   ```
 
-Logout Hugging Face Hub if you have logged in.
+5. **Launch browser**
 
-```
-hf auth logout
-```
+   Open <http://localhost:8501> URL to access the app.

src/streamlit_app.py

@@ -1,7 +1,19 @@
 import os
+import urllib
+import uuid
 
+import requests
 import streamlit as st
-from huggingface_hub import HfFolder, InferenceClient
+from huggingface_hub import InferenceClient
+
+oauth_parameters = {
+    "client_id": "",
+    "client_secret": "",
+    "redirect_uri": "http://localhost:8501",
+    "scope": "openid profile inference-api",
+    "auth_uri": "https://huggingface.co/oauth/authorize",
+    "token_uri": "https://huggingface.co/oauth/token",
+}
 
 chat_parameters = {
     "system_prompt": "You are a friendly Chatbot.",
@@ -17,6 +29,59 @@ def switch_page():
     st.rerun()
 
 
+def get_oauth_parameters():
+    client_id = os.getenv("OAUTH_CLIENT_ID")
+    client_secret = os.getenv("OAUTH_CLIENT_SECRET")
+
+    if not client_id or not client_secret:
+        st.warning("OAuth credentials missing.")
+        st.markdown(
+            "### Missing OAuth Configuration\n\n"
+            "To use this app, you need to "
+            "set up OAuth credentials from Hugging Face.\n\n"
+            "1. Visit [Hugging Face OAuth documentation]"
+            "(https://huggingface.co/docs/hub/oauth).\n"
+            "2. Create a new OAuth App.\n"
+            "3. Copy the **Client ID** and **Client Secret**.\n"
+            "4. Set them as environment variables on your system:\n\n"
+            "```bash\n"
+            "export OAUTH_CLIENT_ID=\"your-client-id\"\n"
+            "export OAUTH_CLIENT_SECRET=\"your-client-secret\"\n"
+            "```\n\n"
+            "Restart the app after setting the variables."
+        )
+        st.stop()
+
+    oauth_parameters["client_id"] = client_id
+    oauth_parameters["client_secret"] = client_secret
+    space_host = os.getenv("SPACE_HOST")
+    if space_host:
+        oauth_parameters["redirect_uri"] = f"https://{space_host}"
+
+
+def get_auth_url():
+    params = {
+        "response_type": "code",
+        "client_id": oauth_parameters["client_id"],
+        "redirect_uri": oauth_parameters["redirect_uri"],
+        "scope": oauth_parameters["scope"],
+        "state": uuid.uuid4(),
+    }
+    return f"{oauth_parameters['auth_uri']}?{urllib.parse.urlencode(params)}"
+
+
+def get_token(code):
+    data = {
+        "grant_type": "authorization_code",
+        "code": code,
+        "redirect_uri": oauth_parameters["redirect_uri"],
+        "client_id": oauth_parameters["client_id"],
+        "client_secret": oauth_parameters["client_secret"],
+    }
+    response = requests.post(oauth_parameters["token_uri"], data=data)
+    return response.json()
+
+
 def get_chat_parameters():
     with st.sidebar:
         chat_parameters["system_prompt"] = st.text_area(
@@ -62,25 +127,27 @@ def get_reponse(client, user_input):
 
 
 def login():
-    api_token = HfFolder.get_token()
-    env_token = os.getenv("HF_TOKEN")
-
-    if api_token:
-        st.session_state.hf_token = api_token
-        switch_page()
-    elif env_token:
-        st.session_state.hf_token = env_token
-        switch_page()
+    st.title("🔐 Hugging Face OAuth Login")
+    get_oauth_parameters()
+
+    query_params = st.query_params
+    code = query_params.get("code")
+
+    if code:
+        token_data = get_token(code)
+        access_token = token_data.get("access_token")
+
+        if access_token:
+            st.success("🎉 Login successful!")
+            st.session_state.hf_token = access_token
+            switch_page()
+        else:
+            st.error("❌ Failed to get access token")
     else:
-        st.title("🔐 Please input Hugging Face Token")
-        user_token = st.text_input("HF_TOKEN", type="password")
-        if st.button("✅ Login"):
-            if user_token:
-                st.session_state.hf_token = user_token
-                switch_page()
-            else:
-                st.session_state.message = st.warning(
-                    "Please enter a valid token.")
+        auth_link = get_auth_url()
+        st.markdown(f"""
+            <a href="{auth_link}" target="_blank">🔐 Login with Hugging Face</a>
+            """, unsafe_allow_html=True)
 
 
 def chatbot():