refactor: google oauth login

package.json

@@ -8,6 +8,7 @@
     "@metamask/onboarding": "^1.0.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@react-oauth/google": "^0.2.6",
     "@reduxjs/toolkit": "^1.8.2",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -53,7 +54,6 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-google-login": "^5.2.2",
     "react-helmet": "^6.1.0",
     "react-hot-toast": "^2.2.0",
     "react-icons": "^4.4.0",

src/common/component/GoogleLoginButton.tsx

@@ -1,5 +1,5 @@
-import { FC, useEffect } from "react";
-import { useGoogleLogin } from "react-google-login";
+import { FC, useEffect, useState } from "react";
+import { useGoogleLogin, GoogleOAuthProvider, GoogleOAuthProviderProps } from "@react-oauth/google";
 import toast from "react-hot-toast";
 import styled from "styled-components";
 import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
@@ -24,32 +24,26 @@ const StyledSocialButton = styled(Button)`
 `;
 
 interface Props {
-  clientId: string;
+  loadError?: boolean;
+  loaded?: boolean;
+  clientId?: string;
   type?: "login" | "register";
 }
 
-const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
+const GoogleLogin: FC<Props> = ({ type = "login", loaded, loadError }) => {
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   //拿本地存的magic token
   const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
-  const { signIn, loaded } = useGoogleLogin({
-    onScriptLoadFailure: (wtf) => {
-      console.error("google login script load failure", wtf);
-    },
-    clientId,
-    onSuccess: ({ tokenId, ...rest }) => {
-      console.info("google oauth success", tokenId, rest);
+  const googleLogin = useGoogleLogin({
+    // flow: "auth-code",
+    onSuccess: ({ access_token }) => {
       login({
         magic_token,
-        id_token: tokenId,
+        id_token: access_token,
         type: "google"
       });
-    },
-    onFailure: (wtf) => {
-      console.error("google login failure", wtf);
     }
   });
-
   useEffect(() => {
     if (isSuccess) {
       toast.success("Login Successfully");
@@ -72,16 +66,35 @@ const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
     }
   }, [error]);
   const handleGoogleLogin = () => {
-    signIn();
+    googleLogin();
   };
-
   // console.log("google login ", loaded);
   return (
     <StyledSocialButton disabled={!loaded || isLoading} onClick={handleGoogleLogin}>
       <IconGoogle className="icon" alt="google icon" />
-      {loaded ? `${type === "login" ? "Sign in" : "Sign up"} with Google` : `Initializing`}
+      {loadError
+        ? "Script Load Error!"
+        : loaded
+        ? `${type === "login" ? "Sign in" : "Sign up"} with Google`
+        : `Initializing`}
     </StyledSocialButton>
   );
 };
-
+const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  return (
+    <GoogleOAuthProvider
+      onScriptLoadError={() => {
+        setHasError(true);
+      }}
+      onScriptLoadSuccess={() => {
+        setScriptLoaded(true);
+      }}
+      clientId={clientId}
+    >
+      <GoogleLogin type={type} loaded={scriptLoaded} loadError={hasError} />
+    </GoogleOAuthProvider>
+  );
+};
 export default GoogleLoginButton;

yarn.lock

@@ -2386,6 +2386,11 @@
   resolved "http://mirrors.cloud.tencent.com/npm/@react-hook%2fmerged-ref/-/merged-ref-1.3.2.tgz#919b387a5f79ed67f2578f2015ab7b7d337787d2"
   integrity sha512-cQ9Y8m4zlrw/qotReo33E+3Sy9FVqMZb5JwUlb3wj3IJJ1cNJtxcgfWF6rS2NZQrfBJ2nAnckUdPJjMyIJTNZg==
 
+"@react-oauth/google@^0.2.6":
+  version "0.2.6"
+  resolved "https://mirrors.cloud.tencent.com/npm/@react-oauth%2fgoogle/-/google-0.2.6.tgz#42f7a18c62d677c77ee8e1fc2eec2ccbe50be997"
+  integrity sha512-Az6w/EL3QHSvWVbfX2WbUB15PGqM0hm86bpAoyvjw2nhDdPp9IOjpFg5HfSGJQJBydjbCFnZjI8PJskTzLOhew==
+
 "@reduxjs/toolkit@^1.8.2":
   version "1.8.2"
   resolved "https://mirrors.cloud.tencent.com/npm/@reduxjs%2ftoolkit/-/toolkit-1.8.2.tgz#352fd17bc858af51d21ce8d28183a930cab9e638"
@@ -10377,14 +10382,6 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.1.1:
   resolved "https://mirrors.tencent.com/npm/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-google-login@^5.2.2:
-  version "5.2.2"
-  resolved "http://mirrors.cloud.tencent.com/npm/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"
-  integrity sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.0"
-
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://mirrors.tencent.com/npm/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"