missing button

patches/src/components/buttons/OAuthLogin.tsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import Button from './Button';
+import hf from '../../../assets/hf.svg';
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
+
+const OAuthLogin = () => {
+  const [isSignedIn, setIsSignedIn] = useState(false);
+
+  useEffect(() => {
+    const checkAuthStatus = async () => {
+      let oauthResult = localStorage.getItem('oauth');
+      if (oauthResult) {
+        try {
+          oauthResult = JSON.parse(oauthResult);
+        } catch {
+          oauthResult = null;
+        }
+      }
+
+      if (!oauthResult) {
+        oauthResult = await oauthHandleRedirectIfPresent();
+        if (oauthResult) {
+          localStorage.setItem('oauth', JSON.stringify(oauthResult));
+        }
+      }
+
+      setIsSignedIn(!!oauthResult);
+    };
+
+    checkAuthStatus();
+  }, []);
+
+  const handleSignIn = async () => {
+    let clientId = import.meta.env.VITE_OAUTH_CLIENT_ID;
+    window.location.href = await oauthLoginUrl({ clientId });
+  };
+
+  const handleSignOut = () => {
+    localStorage.removeItem('oauth');
+    window.location.href = window.location.href.replace(/\?.*$/, '');
+    setIsSignedIn(false);
+  };
+
+  return (
+    <div>
+      {isSignedIn ? (
+        <div>
+          <Button id="signout" imgUrl={hf} onClick={handleSignOut}>Sign out</Button>
+        </div>
+      ) : (
+        <Button id="signin" imgUrl={hf} onClick={handleSignIn}>
+          Sign in with Hugging Face
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default OAuthLogin;