Spaces:

tfrere
/

vanilla-js-client-side-spaces-oauth

Running

App Files Files Community

tfrere HF Staff commited on Sep 15

Commit

22665fb

verified ·

1 Parent(s): 3f84555

Update index.html

Browse files

Files changed (1) hide show

index.html +108 -18

index.html CHANGED Viewed

@@ -1,19 +1,109 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Hugging Face OAuth Example</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style>
+      body { font-family: sans-serif; background: #fafafd; color: #222; }
+      .card { max-width: 400px; margin: 2rem auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 2rem; }
+      #status { margin-top: 1rem; word-break: break-all; }
+      button, img { margin-top: 1rem; }
+      pre { background: #eee; padding: 1em; border-radius: 4px; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>Sign in with Hugging Face (vanilla JS)</h1>
+      <p>
+        This example demonstrates how to add a "Sign in with HF" button to your Space using only HTML and plain JavaScript.<br>
+        No external dependencies or build step needed.
+      </p>
+      <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
+           alt="Sign in with Hugging Face" id="login-hf-btn" style="cursor:pointer;max-width:100%;">
+      <button id="signout" style="display:none;">Sign out</button>
+      <div id="status"></div>
+      <pre id="userinfo" style="display:none"></pre>
+    </div>
+    <script>
+      const CLIENT_ID = window.huggingface?.variables?.OAUTH_CLIENT_ID;
+      const REDIRECT_URI = window.location.origin + window.location.pathname; // or your custom callback
+      const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize';
+      const HF_TOKEN_URL = 'https://huggingface.co/oauth/token';
+      // Show login button and handle click
+      document.getElementById('login-hf-btn').onclick = function () {
+        const state = Math.random().toString(36).slice(2);
+        localStorage.setItem('hf_oauth_state', state);
+        const url = `${HF_OAUTH_URL}?client_id=${CLIENT_ID}` +
+          `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+          `&response_type=code&scope=openid%20profile&state=${state}`;
+        window.location = url;
+      };
+      // Sign out logic
+      document.getElementById('signout').onclick = function () {
+        localStorage.removeItem('hf_oauth_state');
+        localStorage.removeItem('hf_oauth_token');
+        localStorage.removeItem('hf_oauth_userinfo');
+        window.location.href = window.location.pathname;
+      };
+      // Handle OAuth callback
+      window.onload = async function () {
+        const params = new URLSearchParams(window.location.search);
+        // If redirected back after OAuth
+        if (params.has('code') && params.has('state')) {
+          const state = params.get('state');
+          if (state !== localStorage.getItem('hf_oauth_state')) {
+            document.getElementById('status').textContent = 'Invalid state, possible CSRF detected.';
+            return;
+          }
+          const code = params.get('code');
+          const body = new URLSearchParams({
+            client_id: CLIENT_ID,
+            grant_type: 'authorization_code',
+            code: code,
+            redirect_uri: REDIRECT_URI
+          });
+          document.getElementById('status').textContent = 'Exchanging code for token...';
+          const resp = await fetch(HF_TOKEN_URL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+            body
+          });
+          const data = await resp.json();
+          if (data.access_token) {
+            localStorage.setItem('hf_oauth_token', data.access_token);
+            document.getElementById('status').textContent = 'Logged in!';
+            // Fetch userinfo
+            const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
+              headers: { Authorization: `Bearer ${data.access_token}` }
+            });
+            const userinfo = await respUser.json();
+            localStorage.setItem('hf_oauth_userinfo', JSON.stringify(userinfo, null, 2));
+            document.getElementById('userinfo').style.display = '';
+            document.getElementById('userinfo').textContent = JSON.stringify(userinfo, null, 2);
+            document.getElementById('signout').style.display = '';
+            document.getElementById('login-hf-btn').style.display = 'none';
+            // Clean up URL
+            window.history.replaceState({}, '', window.location.pathname);
+          } else {
+            document.getElementById('status').textContent = 'OAuth failed: ' + JSON.stringify(data);
+          }
+          return;
+        }
+        // If already logged in, show info
+        const token = localStorage.getItem('hf_oauth_token');
+        const userinfo = localStorage.getItem('hf_oauth_userinfo');
+        if (token && userinfo) {
+          document.getElementById('status').textContent = 'Already logged in!';
+          document.getElementById('userinfo').style.display = '';
+          document.getElementById('userinfo').textContent = userinfo;
+          document.getElementById('signout').style.display = '';
+          document.getElementById('login-hf-btn').style.display = 'none';
+        }
+      };
+    </script>
+  </body>
+</html>