Merge pull request #32 from rezahedi/oauth-onetap

Google One Tap Login

Author: rezahedi

src/Components/Header/GoogleOneTap.tsx

@@ -0,0 +1,38 @@
+import { useAuth } from "@/context/AuthContext";
+import { CredentialResponse, useGoogleOneTapLogin } from "@react-oauth/google";
+import { postData } from "@/util";
+
+const GoogleOneTap = () => {
+  const { login } = useAuth();
+
+  useGoogleOneTapLogin({
+    onSuccess: async (response: CredentialResponse) => {
+      if (response.credential) handleGoogleLogin(response.credential);
+    },
+    onError: async () => {
+      console.log("Login Failed");
+    },
+    cancel_on_tap_outside: true,
+    use_fedcm_for_prompt: true,
+  });
+
+  const handleGoogleLogin = async (code: string) => {
+    if (!code) return;
+
+    try {
+      const userData = await postData("auth/login/google", { code }, () => {});
+      if (userData) {
+        await login(userData);
+      }
+    } catch (err: unknown) {
+      let errorMessage = "";
+      if (err instanceof Error) errorMessage = err.message;
+      // TODO: a toast to show the error: setErrorMessage(`Error sending data to server: ${errorMessage}`);
+      console.log(`Error sending data to server: ${errorMessage}`);
+    }
+  };
+
+  return null;
+};
+
+export default GoogleOneTap;

src/Components/Header/Header.tsx

@@ -6,9 +6,8 @@ import { Link } from "react-router-dom";
 import { useAuthModal } from "@/context/AuthModalContext";
 import HeaderActions from "./HeaderActions";
 import Banner from "./Banner";
-import { CredentialResponse, useGoogleOneTapLogin } from "@react-oauth/google";
-import { postData } from "@/util";
 import { useAuth } from "@/context/AuthContext";
+import GoogleOneTap from "./GoogleOneTap";
 
 export const NAV_MENU = [
   { text: "Home", link: "/" },
@@ -26,37 +25,11 @@ const Header = ({ withBanner = true }: { withBanner?: boolean }) => {
     closeForgotPassword,
   } = useAuthModal();
 
-  const { login } = useAuth();
-
-  useGoogleOneTapLogin({
-    onSuccess: async (response: CredentialResponse) => {
-      if (response.credential) handleGoogleLogin(response.credential);
-    },
-    onError: async () => {
-      console.log("Login Failed");
-    },
-    cancel_on_tap_outside: true,
-    use_fedcm_for_prompt: true,
-  });
-
-  const handleGoogleLogin = async (code: string) => {
-    if (!code) return;
-
-    try {
-      const userData = await postData("auth/login/google", { code }, () => {});
-      if (userData) {
-        await login(userData);
-      }
-    } catch (err: unknown) {
-      let errorMessage = "";
-      if (err instanceof Error) errorMessage = err.message;
-      // TODO: a toast to show the error: setErrorMessage(`Error sending data to server: ${errorMessage}`);
-      console.log(`Error sending data to server: ${errorMessage}`);
-    }
-  };
+  const { user } = useAuth();
 
   return (
     <header>
+      {!user && <GoogleOneTap />}
       <div className="bg-background flex items-center py-2">
         <Link
           to="/"