Merge pull request #121 from Macktireh/social-auth

added ability to log in with google

src/actions/auth/googleLogin.action.ts

@@ -0,0 +1,36 @@
+import { AnyAction, Dispatch } from "redux";
+
+import Axios from "@/config/axios";
+import * as Api from "@/config/apiEndPoint";
+import * as Types from "@/actions/types";
+import loginAction from "./login.action";
+
+const googleLoginAction =
+  (code: any) =>
+  async (dispatch: Dispatch<AnyAction> | any) => {
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+
+    const body = JSON.stringify({ code });
+
+    console.log("googleLoginAction body", body);
+
+    try {
+      const res = await Axios.post(Api.googleLoginEndpoint, body, config);
+
+      localStorage.setItem("access", res.data.token.access);
+      localStorage.setItem("refresh", res.data.token.refresh);
+
+      dispatch(loginAction(true));
+
+    } catch (error: any) {
+      dispatch({
+        type: Types.LOGIN_FAIL,
+      });
+    }
+  };
+
+export default googleLoginAction;

src/components/auth/GoogleLoginButton.tsx

@@ -0,0 +1,27 @@
+import ButtonCustom from "@/widgets/ButtonCustom";
+
+interface propsTypes {
+  text: string;
+  nameClass?: string;
+  isDisabled?: boolean;
+}
+
+export const GoogleLoginButton: React.FC<propsTypes> = ({ text, nameClass, isDisabled }) => {
+  const handleReachGoogle = () => {
+    const GoogleClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+    const GoogleCallBackURI = process.env.REACT_APP_GOOGLE_CALLBACK_URL;
+    window.location.replace(
+      `https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=${GoogleCallBackURI}&prompt=consent&response_type=code&client_id=${GoogleClientID}&scope=openid%20email%20profile&access_type=offline`
+    );
+  };
+
+  return (
+    <ButtonCustom
+      nameClass={nameClass}
+      pic={"/static/svg/google.svg"}
+      text={text}
+      onClick={handleReachGoogle}
+      isDisabled={isDisabled}
+    />
+  );
+};

src/config/apiEndPoint.ts

@@ -9,6 +9,7 @@ export const resetPasswordEndpoint : string = "/api/auth/user/reset-password/"
 export const verifyTokenEndpoint : string = "/api/auth/user/jwt/verify/"
 export const refreshTokenEndpoint : string = "/api/auth/user/token/refresh/"
 export const logoutEndpoint : string = "/api/auth/user/logout/"
+export const googleLoginEndpoint : string = "/api/auth/user/login/google/"
 
 
 /***

src/helper/AuthProvider.tsx

@@ -2,21 +2,30 @@ import * as React from "react";
 import { connect } from "react-redux";
 
 import { IRootState } from "@/models";
-import { Navigate } from "react-router-dom";
+import { Navigate, useSearchParams } from "react-router-dom";
 import { privateRoutes } from "@/routes/private.routes";
 import SpinnersLoding from "@/widgets/SpinnersLoding";
+import googleLoginAction from "@/actions/auth/googleLogin.action";
 
 type TProps = {
   isPublic: boolean;
   isAuthenticated: boolean | null;
   children: React.PropsWithChildren<any>;
+  googleLoginAction: (code: any) => void;
 };
 
-const AuthProvider: React.FC<TProps> = ({ isPublic, isAuthenticated, children }) => {
+const AuthProvider: React.FC<TProps> = ({ isPublic, isAuthenticated, children, googleLoginAction }) => {
   const [loading, setLoading] = React.useState(true);
+  let [searchParams, setSearchParams] = useSearchParams();
 
   React.useEffect(() => {
-    if (isAuthenticated !== null) setLoading(false);
+    const code = searchParams.get("code")
+    if (code && isAuthenticated === false || isAuthenticated === null) {
+      (async () => {
+        await googleLoginAction( code );
+        setTimeout(() => setLoading(false), 800);
+      })();
+    } else if (isAuthenticated !== null) setLoading(false);
   }, [loading, isAuthenticated]);
 
   if (!isPublic) {
@@ -30,4 +39,4 @@ const mapStateToProps = (state: IRootState) => ({
   isAuthenticated: state.authReducer.isAuthenticated,
 });
 
-export default connect(mapStateToProps, {})(AuthProvider);
+export default connect(mapStateToProps, {googleLoginAction})(AuthProvider);

src/pages/auth/Login.tsx

@@ -9,6 +9,7 @@ import useLogin from "@/hooks/UseLogin";
 import loginAction from "@/actions/auth/login.action";
 import { IAuthLogin } from "@/models";
 import { authRoutes } from "@/routes/auth.routes";
+import { GoogleLoginButton } from "@/components/auth/GoogleLoginButton";
 
 type propsTypes = { loginAction: (isAuthenticated?: boolean) => Promise<void> };
 
@@ -39,11 +40,7 @@ const Login: React.FC<propsTypes> = ({ loginAction }) => {
   return (
     <ModalAuth title="Connectez-vous à Clone Twitter" loading={loading} disabled={disabled}>
       <div className="box-social-auth">
-        <ButtonCustom
-          nameClass={"btn-signup-ext"}
-          pic={"/static/svg/google.svg"}
-          text={"Se connecter avec Google"}
-        />
+        <GoogleLoginButton text={"Se connecter avec Google"} nameClass="btn-signup-ext btn-signup" />
         <ButtonCustom
           nameClass={"btn-signup-ext"}
           pic={"/static/svg/apple.svg"}

src/pages/public/HomePublic.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 
 import ButtonCustom from "@/widgets/ButtonCustom";
 import { authRoutes } from "@/routes/auth.routes";
+import { GoogleLoginButton } from "@/components/auth/GoogleLoginButton";
 
 const HomePublic: React.FC = () => {
   React.useEffect(() => {
@@ -21,11 +22,7 @@ const HomePublic: React.FC = () => {
         </div>
         <div className="frame-btn-connexion">
           <div className="frame1">
-            <ButtonCustom
-              nameClass={"btn-signup-ext"}
-              pic={"/static/svg/google.svg"}
-              text={"S'inscrire avec Google"}
-            />
+            <GoogleLoginButton text={"S'inscrire avec Google"} nameClass="btn-signup-ext btn-signup" />
             <ButtonCustom
               nameClass={"btn-signup-ext"}
               pic={"/static/svg/apple.svg"}

src/service-worker.ts

@@ -78,3 +78,4 @@ self.addEventListener('message', (event) => {
 });
 
 // Any other custom service worker logic can go here.
+

src/styles/pages/auth/_auth.scss

@@ -69,6 +69,12 @@
               width: 18px;
             }
           }
+          .btn-signup-ext[disabled] {
+            background-color: rgba($color2, 0.7) !important;
+            border-color: transparent;
+            color: $color1;
+            cursor: not-allowed;
+          }
         }
 
         .sep {
@@ -124,7 +130,7 @@
         .btn-signup[disabled] {
           background-color: rgba($color2, 0.7) !important;
           color: $color1;
-          cursor: default;
+          cursor: not-allowed;
         }
 
         .info {