Merge pull request #31 from rezahedi/oauth-onetap

Activate One Tap Login and Pass Credential to Backend API

Author: rezahedi

src/Components/Auth/GoogleLoginButton.tsx

@@ -1,31 +1,19 @@
 import React from "react";
-import { CodeResponse, useGoogleLogin } from "@react-oauth/google";
-import { Button } from "../ui/button";
-import { Google } from "@/ui/icons";
+import { CredentialResponse, GoogleLogin } from "@react-oauth/google";
 
 const GoogleLoginButton = ({
   onLogin,
 }: {
   onLogin: (code: string) => void;
 }) => {
-  const handleLogin = useGoogleLogin({
-    flow: "auth-code",
-    onSuccess: async (response: CodeResponse) => {
-      onLogin(response.code);
-    },
-    onError: async (errorResponse) => {
-      console.log("Login Failed", errorResponse);
-    },
-  });
-
   return (
-    <Button
-      onClick={handleLogin}
-      variant="ghost"
-      className="my-2 w-full p-5 font-normal text-lg bg-foreground text-background hover:bg-foreground hover:text-background active:scale-95"
-    >
-      <Google className="size-8" /> Sign in with Google
-    </Button>
+    <GoogleLogin
+      onSuccess={(response: CredentialResponse) => {
+        if (response.credential) onLogin(response.credential);
+      }}
+      text="continue_with"
+      theme="filled_blue"
+    />
   );
 };
 

src/Components/Auth/Login.tsx

@@ -5,7 +5,6 @@ import { useAuthModal } from "@/context/AuthModalContext";
 import { User } from "@/types";
 import { Dialog, DialogContent } from "@/Components/ui/dialog";
 import { Button } from "@/Components/ui/button";
-import { GoogleOAuthProvider } from "@react-oauth/google";
 import GoogleLoginButton from "./GoogleLoginButton";
 
 const LoginPage = ({
@@ -137,11 +136,7 @@ const LoginPage = ({
           {/* Left Section */}
           <div className="flex-1 md:flex-1/2 px-2 py-3 space-y-2">
             <h5 className="flex justify-center text-3xl">Sign In</h5>
-            <GoogleOAuthProvider
-              clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
-            >
-              <GoogleLoginButton onLogin={handleGoogleLogin} />
-            </GoogleOAuthProvider>
+            <GoogleLoginButton onLogin={handleGoogleLogin} />
             <div className="my-4 text-foreground/60 text-center">OR</div>
             <label className="block">
               Email:

src/Components/Auth/Register.tsx

@@ -5,7 +5,6 @@ import { postData } from "@/util";
 import { useAuth } from "@/context/AuthContext";
 import { useAuthModal } from "@/context/AuthModalContext";
 import { User } from "@/types";
-import { GoogleOAuthProvider } from "@react-oauth/google";
 import GoogleLoginButton from "./GoogleLoginButton";
 
 const RegisterPage = ({
@@ -159,11 +158,7 @@ const RegisterPage = ({
             <h5 className="flex justify-center text-3xl">
               Create Your Account
             </h5>
-            <GoogleOAuthProvider
-              clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
-            >
-              <GoogleLoginButton onLogin={handleGoogleLogin} />
-            </GoogleOAuthProvider>
+            <GoogleLoginButton onLogin={handleGoogleLogin} />
             <div className="my-4 text-foreground/60 text-center">OR</div>
             <label className="block">
               Name:

src/Components/Header/Header.tsx

@@ -6,6 +6,9 @@ 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";
 
 export const NAV_MENU = [
   { text: "Home", link: "/" },
@@ -23,6 +26,35 @@ 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}`);
+    }
+  };
+
   return (
     <header>
       <div className="bg-background flex items-center py-2">

src/Components/Layout/MainLayout.tsx

@@ -2,13 +2,18 @@ import React, { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import Header from "@/Components/Header";
 import Footer from "@/Components/Footer";
+import { GoogleOAuthProvider } from "@react-oauth/google";
 
 export default function MainLayout() {
   return (
     <>
       <ScrollToTop />
       <div className="relative mx-auto px-2 sm:px-3 w-full max-w-[1300px] box-border">
-        <Header />
+        <GoogleOAuthProvider
+          clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
+        >
+          <Header />
+        </GoogleOAuthProvider>
       </div>
 
       <div className="my-5 mx-auto px-2 sm:px-3 w-full max-w-[1300px] box-border">

src/Components/Layout/MapLayout.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Outlet } from "react-router-dom";
 import Header from "@/Components/Header";
 import { APIProvider } from "@vis.gl/react-google-maps";
+import { GoogleOAuthProvider } from "@react-oauth/google";
 
 const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAP_API_KEY;
 
@@ -14,7 +15,11 @@ function MapLayout() {
   return (
     <div className="flex flex-col h-screen">
       <div className="relative mx-auto px-2 sm:px-3 w-full max-w-[1300px] box-border">
-        <Header withBanner={false} />
+        <GoogleOAuthProvider
+          clientId={import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID}
+        >
+          <Header withBanner={false} />
+        </GoogleOAuthProvider>
       </div>
 
       <div className="flex-1">