Hugging Face's logo

Spaces:
tfrere
/
vanilla-js-client-side-spaces-oauth
Running

App Files Community
tfrere HF Staff commited on
Commit
f91a47c
·
verified ·
1 Parent(s): 1295dc4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +52 -30
index.html CHANGED
@@ -2,57 +2,82 @@
2
  <html>
3
  <head>
4
  <meta charset="utf-8" />
5
- <title>Hugging Face OAuth Example</title>
6
- <meta name="viewport" content="width=device-width,initial-scale=1" />
 
7
  <style>
8
  body { font-family: sans-serif; background: #fafafd; color: #222; }
9
- .card { max-width: 400px; margin: 2rem auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 2rem; }
10
- #status { margin-top: 1rem; word-break: break-all; }
11
  button, img { margin-top: 1rem; }
12
- pre { background: #eee; padding: 1em; border-radius: 4px; }
 
13
  </style>
14
  </head>
15
  <body>
16
  <div class="card">
17
- <h1>Sign in with Hugging Face (vanilla JS)</h1>
18
  <p>
19
- This example demonstrates how to add a "Sign in with HF" button to your Space using only HTML and plain JavaScript.<br>
20
- No external dependencies or build step needed.
21
  </p>
22
- <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
23
- alt="Sign in with Hugging Face" id="login-hf-btn" style="cursor:pointer;max-width:100%;">
 
 
 
 
 
24
  <button id="signout" style="display:none;">Sign out</button>
25
  <div id="status"></div>
26
  <pre id="userinfo" style="display:none"></pre>
27
  </div>
28
  <script>
 
29
  const CLIENT_ID = window.huggingface?.variables?.OAUTH_CLIENT_ID;
30
- const REDIRECT_URI = window.location.origin + window.location.pathname; // or your custom callback
31
  const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize';
32
  const HF_TOKEN_URL = 'https://huggingface.co/oauth/token';
33
 
34
- // Show login button and handle click
35
- document.getElementById('login-hf-btn').onclick = function () {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  const state = Math.random().toString(36).slice(2);
37
  localStorage.setItem('hf_oauth_state', state);
38
  const url = `${HF_OAUTH_URL}?client_id=${CLIENT_ID}` +
39
  `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
40
- `&response_type=code&scope=openid%20profile&state=${state}`;
41
  window.location = url;
42
  };
43
 
44
- // Sign out logic
45
  document.getElementById('signout').onclick = function () {
46
- localStorage.removeItem('hf_oauth_state');
47
  localStorage.removeItem('hf_oauth_token');
48
  localStorage.removeItem('hf_oauth_userinfo');
49
- window.location.href = window.location.pathname;
 
 
50
  };
51
 
52
  // Handle OAuth callback
53
  window.onload = async function () {
 
54
  const params = new URLSearchParams(window.location.search);
55
- // If redirected back after OAuth
56
  if (params.has('code') && params.has('state')) {
57
  const state = params.get('state');
58
  if (state !== localStorage.getItem('hf_oauth_state')) {
@@ -75,33 +100,30 @@
75
  const data = await resp.json();
76
  if (data.access_token) {
77
  localStorage.setItem('hf_oauth_token', data.access_token);
78
- document.getElementById('status').textContent = 'Logged in!';
79
  // Fetch userinfo
80
  const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
81
  headers: { Authorization: `Bearer ${data.access_token}` }
82
  });
83
  const userinfo = await respUser.json();
84
- localStorage.setItem('hf_oauth_userinfo', JSON.stringify(userinfo, null, 2));
85
- document.getElementById('userinfo').style.display = '';
86
- document.getElementById('userinfo').textContent = JSON.stringify(userinfo, null, 2);
87
- document.getElementById('signout').style.display = '';
88
- document.getElementById('login-hf-btn').style.display = 'none';
89
  // Clean up URL
90
  window.history.replaceState({}, '', window.location.pathname);
91
  } else {
92
  document.getElementById('status').textContent = 'OAuth failed: ' + JSON.stringify(data);
 
93
  }
94
  return;
95
  }
96
- // If already logged in, show info
 
97
  const token = localStorage.getItem('hf_oauth_token');
98
  const userinfo = localStorage.getItem('hf_oauth_userinfo');
99
  if (token && userinfo) {
100
- document.getElementById('status').textContent = 'Already logged in!';
101
- document.getElementById('userinfo').style.display = '';
102
- document.getElementById('userinfo').textContent = userinfo;
103
- document.getElementById('signout').style.display = '';
104
- document.getElementById('login-hf-btn').style.display = 'none';
105
  }
106
  };
107
  </script>
 
2
  <html>
3
  <head>
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>OAuth in a static Space (Vanilla JS)</title>
7
+ <link rel="stylesheet" href="style.css" />
8
  <style>
9
  body { font-family: sans-serif; background: #fafafd; color: #222; }
10
+ .card { max-width: 420px; margin: 2rem auto 0 auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 2rem; }
11
+ #status { margin-top: 1rem; word-break: break-all; color: #b00; }
12
  button, img { margin-top: 1rem; }
13
+ pre { background: #eee; padding: 1em; border-radius: 4px; margin-top: 1rem; }
14
+ #signout { margin-left: 0; }
15
  </style>
16
  </head>
17
  <body>
18
  <div class="card">
19
+ <h1>OAuth in a static Space (Vanilla JS)</h1>
20
  <p>
21
+ This is a demonstration of the Hugging Face OAuth flow in a <b>static Space</b> using only vanilla JS.<br>
22
+ No external libraries are needed – just copy this HTML file in your Space!
23
  </p>
24
+ <p>
25
+ Click "Sign in with HF" to start the authentication flow.<br>
26
+ After authenticating, your access token and user info will be displayed below.<br>
27
+ <i>(Tokens are only stored locally in your browser and never sent anywhere else.)</i>
28
+ </p>
29
+ <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg"
30
+ alt="Sign in with Hugging Face" id="signin" style="cursor:pointer;display:none;max-width:100%;">
31
  <button id="signout" style="display:none;">Sign out</button>
32
  <div id="status"></div>
33
  <pre id="userinfo" style="display:none"></pre>
34
  </div>
35
  <script>
36
+ // Utiliser le client_id injecté par Hugging Face dans l'environnement du Space
37
  const CLIENT_ID = window.huggingface?.variables?.OAUTH_CLIENT_ID;
38
+ const REDIRECT_URI = window.location.origin + window.location.pathname;
39
  const HF_OAUTH_URL = 'https://huggingface.co/oauth/authorize';
40
  const HF_TOKEN_URL = 'https://huggingface.co/oauth/token';
41
 
42
+ // Helper pour afficher l'état et les infos utilisateur
43
+ function showLoggedIn(userinfo) {
44
+ document.getElementById('signin').style.display = 'none';
45
+ document.getElementById('signout').style.display = '';
46
+ document.getElementById('status').textContent = 'Logged in!';
47
+ document.getElementById('userinfo').style.display = '';
48
+ document.getElementById('userinfo').textContent = userinfo;
49
+ }
50
+ function showLoggedOut() {
51
+ document.getElementById('signin').style.display = '';
52
+ document.getElementById('signout').style.display = 'none';
53
+ document.getElementById('status').textContent = '';
54
+ document.getElementById('userinfo').style.display = 'none';
55
+ document.getElementById('userinfo').textContent = '';
56
+ }
57
+
58
+ // Sign in button
59
+ document.getElementById('signin').onclick = function () {
60
  const state = Math.random().toString(36).slice(2);
61
  localStorage.setItem('hf_oauth_state', state);
62
  const url = `${HF_OAUTH_URL}?client_id=${CLIENT_ID}` +
63
  `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
64
+ `&response_type=code&scope=openid%20profile&state=${state}&prompt=consent`;
65
  window.location = url;
66
  };
67
 
68
+ // Sign out button
69
  document.getElementById('signout').onclick = function () {
 
70
  localStorage.removeItem('hf_oauth_token');
71
  localStorage.removeItem('hf_oauth_userinfo');
72
+ localStorage.removeItem('hf_oauth_state');
73
+ showLoggedOut();
74
+ window.history.replaceState({}, '', window.location.pathname);
75
  };
76
 
77
  // Handle OAuth callback
78
  window.onload = async function () {
79
+ // If returning from OAuth redirect
80
  const params = new URLSearchParams(window.location.search);
 
81
  if (params.has('code') && params.has('state')) {
82
  const state = params.get('state');
83
  if (state !== localStorage.getItem('hf_oauth_state')) {
 
100
  const data = await resp.json();
101
  if (data.access_token) {
102
  localStorage.setItem('hf_oauth_token', data.access_token);
 
103
  // Fetch userinfo
104
  const respUser = await fetch('https://huggingface.co/oauth/userinfo', {
105
  headers: { Authorization: `Bearer ${data.access_token}` }
106
  });
107
  const userinfo = await respUser.json();
108
+ const userinfoStr = JSON.stringify(userinfo, null, 2);
109
+ localStorage.setItem('hf_oauth_userinfo', userinfoStr);
110
+ showLoggedIn(userinfoStr);
 
 
111
  // Clean up URL
112
  window.history.replaceState({}, '', window.location.pathname);
113
  } else {
114
  document.getElementById('status').textContent = 'OAuth failed: ' + JSON.stringify(data);
115
+ showLoggedOut();
116
  }
117
  return;
118
  }
119
+
120
+ // Already logged in?
121
  const token = localStorage.getItem('hf_oauth_token');
122
  const userinfo = localStorage.getItem('hf_oauth_userinfo');
123
  if (token && userinfo) {
124
+ showLoggedIn(userinfo);
125
+ } else {
126
+ showLoggedOut();
 
 
127
  }
128
  };
129
  </script>