File size: 2,152 Bytes
8f1463e
 
 
 
 
 
 
0244bd5
 
 
 
341528a
0244bd5
 
 
8f1463e
 
5216363
 
886a88a
5216363
 
 
 
f8a838e
637ba86
 
 
c0277c1
637ba86
c0277c1
f8a838e
637ba86
 
 
f8a838e
 
 
 
 
 
637ba86
5216363
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
<!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">
        <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";

        const oauthResult = localStorage.get("oauth") || await oauthHandleRedirectIfPresent();

        if (oauthResult) {
          document.querySelector("pre").textContent = JSON.stringify(oauthResult, null, 2);
          localStorage.setItem("oauth", oauthResult);
          document.getElementById("signout").style.removeProperty("display");
          document.getElementById("signout").onClick = async function() {
            localStorage.removeItem("oauth");
            window.location.href = window.location.href.replace(/\?.*$/, '');
          }
        } else {
          document.getElementById("signin").style.removeProperty("display");
          document.getElementById("signin").onclick = async function() {
            window.location.href = await oauthLoginUrl();
          }
        }
      </script>
	</body>
</html>