File size: 2,666 Bytes
8f1463e
 
 
 
 
 
 
0244bd5
 
 
 
341528a
0244bd5
 
 
8f1463e
 
524cef7
5216363
886a88a
5216363
 
 
 
f8a838e
637ba86
 
 
c0277c1
637ba86
c0277c1
ead90c9
 
0f09d43
 
 
 
 
 
 
 
 
 
 
637ba86
 
 
08ff3f4
f8a838e
524cef7
f8a838e
 
0f09d43
f8a838e
637ba86
5216363
ac1a23b
a683de4
 
ac1a23b
637ba86
6f6404b
8f1463e
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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" />
        <script src="https://unpkg.com/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
		<script type="importmap">
			{
				"imports": {
					"@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.13.0/+esm"
				}
			}
		</script>
	</head>
	<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">
        import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";

        console.log("huggingface env", window.huggingface);

        let oauthResult = localStorage.getItem("oauth");

        if (oauthResult) {
          try {
            oauthResult = JSON.parse(oauthResult);
          } catch {
            oauthResult = null;
          }
        }
        
        oauthResult ||= await oauthHandleRedirectIfPresent();

        if (oauthResult) {
          document.querySelector("pre").textContent = JSON.stringify(oauthResult, null, 2);
          localStorage.setItem("oauth", JSON.stringify(oauthResult));
          document.getElementById("signout").style.removeProperty("display");
          document.getElementById("signout").onclick = async function() {
            localStorage.removeItem("oauth");
            window.location.href = window.location.href.replace(/\?.*$/, '');
            window.location.reload();
          }
        } else {
          document.getElementById("signin").style.removeProperty("display");
          document.getElementById("signin").onclick = async function() {
            // prompt=consent to re-trigger the consent screen instead of silently redirecting
            window.location.href = (await oauthLoginUrl({scopes: window.huggingface.variables.OAUTH_SCOPES})) + "&prompt=consent";
          }
        }
      </script>
	</body>
</html>