From 59f64bc6a0f8131a18165b6304abc2d80f515755 Mon Sep 17 00:00:00 2001
From: Mac mini <>
Date: Tue, 31 Mar 2026 15:52:41 +0700
Subject: [PATCH] login with google

---
 api.ts                             |  3 ++-
 src/components/auth/SignInForm.tsx | 15 ++++++---------
 src/components/auth/SignUpForm.tsx | 31 +++++++++++++++++++++++++++---
 src/service/auth.ts                |  8 ++------
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/api.ts b/api.ts
index 017d0cb..14c6028 100644
--- a/api.ts
+++ b/api.ts
@@ -9,6 +9,7 @@ export const API = {
     SIGNIN: `${API_URL_ROOT}/auth/signin`,
     CREATEOTP: `${API_URL_ROOT}/auth/token/create`,
     VERIFYOTP: `${API_URL_ROOT}/auth/token/verify`,
-    REFRESH: `${API_URL_ROOT}/auth/refresh`
+    REFRESH: `${API_URL_ROOT}/auth/refresh`,
+    GOOGLE_LOGIN: `${API_URL_ROOT}/auth/google/login`
   }
 }
\ No newline at end of file
diff --git a/src/components/auth/SignInForm.tsx b/src/components/auth/SignInForm.tsx
index 18f72d4..5b3022b 100644
--- a/src/components/auth/SignInForm.tsx
+++ b/src/components/auth/SignInForm.tsx
@@ -58,16 +58,13 @@ const [showPassword, setShowPassword] = useState(false);
 
     try {
       setLoading(true); 
-      
       const res = await apiSignIn(formData);
       console.log("API Sign In Response:", res);
-
-      const data =  await api.get(API.User.CURRENT);
-      console.log("Current User:", data);
-
       if (res.status === true) {
         toast.success('Đăng nhập thành công!');
-        
+
+        const data =  await apiGetCurrentUser();
+        console.log("Current User:", data);
       }else{
          toast.error('Email hoặc mật khẩu không đúng.');
       }
@@ -103,7 +100,7 @@ const [showPassword, setShowPassword] = useState(false);
           </div>
           <div>
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
-              <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
+              <button onClick={() => (window.location.href = API.Auth.GOOGLE_LOGIN)} className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
                 <svg
                   width="20"
                   height="20"
@@ -130,7 +127,7 @@ const [showPassword, setShowPassword] = useState(false);
                 </svg>
                 Sign in with Google
               </button>
-              <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
+              {/* <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
                 <svg
                   width="21"
                   className="fill-current"
@@ -142,7 +139,7 @@ const [showPassword, setShowPassword] = useState(false);
                   <path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
                 </svg>
                 Sign in with X
-              </button>
+              </button> */}
             </div>
             <div className="relative py-3 sm:py-5">
               <div className="absolute inset-0 flex items-center">
diff --git a/src/components/auth/SignUpForm.tsx b/src/components/auth/SignUpForm.tsx
index f2d6c02..515c070 100644
--- a/src/components/auth/SignUpForm.tsx
+++ b/src/components/auth/SignUpForm.tsx
@@ -7,6 +7,7 @@ import { apiCreateOTP, apiSignUp, apiVerifyOTP } from "@/service/auth";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+import { API } from "../../../api";
 
 export default function SignUpForm() {
   const [showPassword, setShowPassword] = useState(false);
@@ -143,12 +144,36 @@ export default function SignUpForm() {
           {step === 1 && (
             <>
               <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
-                <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
+                <button onClick={() => (window.location.href = API.Auth.GOOGLE_LOGIN)} className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
+                  <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
+                    fill="#4285F4"
+                  />
+                  <path
+                    d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
+                    fill="#34A853"
+                  />
+                  <path
+                    d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
+                    fill="#FBBC05"
+                  />
+                  <path
+                    d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
+                    fill="#EB4335"
+                  />
+                </svg>
                   Sign up with Google
                 </button>
-                <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
+                {/* <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
                   Sign up with X
-                </button>
+                </button> */}
               </div>
               <div className="relative py-3 sm:py-5">
                 <div className="absolute inset-0 flex items-center">
diff --git a/src/service/auth.ts b/src/service/auth.ts
index aa71b3e..8eaeb8e 100644
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -42,12 +42,8 @@ export const apiSignIn = async (payload: any) => {
 };
 
 export const apiGetCurrentUser = async () => {
-  const response = await fetch(API.User.CURRENT,{
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-    credentials: "include",
-  });
-  return response.json();
+  const response = await api.get(API.User.CURRENT);
+  return response?.data;
 };
 
 export interface ApiResponse<T> {