login with google

2026-03-31 15:52:41 +07:00
parent 23fd45bda2
commit 59f64bc6a0
4 changed files with 38 additions and 19 deletions
--- 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`
  }
 }
--- 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">
--- 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">
--- 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> {