refactor: magic link auth

src/common/component/GithubLoginButton.js

@@ -0,0 +1,35 @@
+// import { useState, useEffect } from "react";
+// import { useGoogleLogin } from "react-google-login";
+import IconGithub from "../../assets/icons/github.svg";
+import styled from "styled-components";
+import Button from "./styled/Button";
+const StyledSocialButton = styled(Button)`
+  width: 100%;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #344054;
+  border: 1px solid #d0d5dd;
+  background: none !important;
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export default function GithubLoginButton({ config = {} }) {
+  const { client_id } = config;
+  const handleGithubLogin = () => {
+    location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`;
+    // console.log("github login");
+  };
+  // console.log("google login ", loaded);
+  return (
+    <StyledSocialButton onClick={handleGithubLogin}>
+      <IconGithub className="icon" />
+      Sign in with Github
+      {/* {loaded ? `Sign in with Github` : `Initailizing`} */}
+    </StyledSocialButton>
+  );
+}

src/common/component/GoogleLoginButton.js

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import { useGoogleLogin } from "react-google-login";
+
+import googleSvg from "../../assets/icons/google.svg?url";
+import styled from "styled-components";
+import Button from "./styled/Button";
+import { useLoginMutation } from "../../app/services/auth";
+import toast from "react-hot-toast";
+const StyledSocialButton = styled(Button)`
+  width: 100%;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #344054;
+  border: 1px solid #d0d5dd;
+  background: none !important;
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+`;
+export default function GoogleLoginButton({ clientId }) {
+  const [login, { isSuccess, isLoading }] = useLoginMutation();
+  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);
+      login({
+        id_token: tokenId,
+        type: "google"
+      });
+    },
+    onFailure: (wtf) => {
+      console.error("google login failure", wtf);
+    }
+  });
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("Login Successfully");
+      // navigateTo("/");
+    }
+  }, [isSuccess]);
+  const handleGoogleLogin = () => {
+    signIn();
+  };
+  // console.log("google login ", loaded);
+  return (
+    <StyledSocialButton disabled={!loaded || isLoading} onClick={handleGoogleLogin}>
+      <img className="icon" src={googleSvg} alt="google icon" />
+      {loaded ? `Sign in with Google` : `Initailizing`}
+    </StyledSocialButton>
+  );
+}