Integrate login with API

Author: alaaltoros

UIcode/client/src/Components/LoginLogoutButton/index.jsx

@@ -1,8 +1,7 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { GoogleLogin, GoogleLogout } from "react-google-login";
 import NavLinkStyle from "Styled/NavLink";
 import styled from "styled-components";
-import { googleLoginToApi } from "Services/auth";
 import { useContext } from "react";
 import { authContext } from "Providers/AuthProvider";
 
@@ -11,19 +10,21 @@ const StyledButton = styled.button`
 `;
 
 const LoginLogoutButton = ({ defaultButton = false }) => {
-  const { token, setToken } = useContext(authContext);
+  const { googleToken, loginWithGoogleToken, logout } = useContext(authContext);
 
-  const loginSuccess = (response) => {
-    setToken(response.tokenId);
-    googleLoginToApi(response.tokenId).then(console.log, console.log);
-  };
+  const loginSuccess = useCallback(
+    (response) => {
+      loginWithGoogleToken(response.tokenId);
+    },
+    [loginWithGoogleToken]
+  );
 
   const loginFail = (response) => {
     alert("Login failed");
   };
 
   const onLogout = (response) => {
-    setToken(null);
+    logout();
   };
 
   const render = defaultButton
@@ -34,8 +35,7 @@ const LoginLogoutButton = ({ defaultButton = false }) => {
         </StyledButton>
       );
 
-  console.log({ token });
-  return token ? (
+  return googleToken ? (
     <GoogleLogout
       clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
       buttonText="Logout"

UIcode/client/src/Pages/Contribute/index.jsx

@@ -18,7 +18,7 @@ const Contribute = () => {
   const [step, setStep] = useState(0);
   const [selectedTestResult, setSelectedTestResult] = useState("positive");
   const [testDate, setTestDate] = useState(null);
-  const { token } = useContext(authContext);
+  const { isLoggedIn } = useContext(authContext);
 
   const showButtons = step === 1;
 
@@ -51,7 +51,7 @@ const Contribute = () => {
 
   return (
     <Wrapper>
-      {token ? (
+      {isLoggedIn ? (
         <>
           <CurrentStep />
           {showButtons && (

UIcode/client/src/Providers/AuthProvider.jsx

@@ -1,13 +1,69 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
+import Cookies from "js-cookie";
+import { googleLoginToApi, getMe } from "Services/auth";
 
 export const authContext = React.createContext({});
 
 const { Provider } = authContext;
 
 const AuthProvider = ({ children }) => {
-  const [token, setToken] = useState(null);
+  const [googleToken, setGoogleToken] = useState();
+  const [jwtToken, setJwtTokenState] = useState(Cookies.get("jwt") || null);
+  const [user, setUser] = useState(Cookies.getJSON("user") || null);
 
-  return <Provider value={{ token, setToken }}>{children}</Provider>;
+  const setJwtToken = useCallback((token) => {
+    setJwtTokenState(token);
+    if (!token) {
+      Cookies.remove("jwt");
+    } else {
+      Cookies.set("jwt", token);
+    }
+  }, []);
+
+  const setMe = useCallback((me) => {
+    setUser(me);
+    if (!me) {
+      Cookies.remove("user");
+    } else {
+      Cookies.set("user", me);
+    }
+  }, []);
+
+  const loginWithGoogleToken = async (googleToken) => {
+    const {
+      data: { token },
+    } = await googleLoginToApi(googleToken);
+    const { data: me } = await getMe(token);
+
+    setGoogleToken(googleToken);
+    setJwtToken(token);
+    setMe(me);
+  };
+
+  const logout = async () => {
+    setMe(() => {
+      setGoogleToken(null);
+      setJwtToken(null);
+      return null;
+    });
+  };
+
+  const isLoggedIn = googleToken && jwtToken && user;
+
+  return (
+    <Provider
+      value={{
+        googleToken,
+        loginWithGoogleToken,
+        logout,
+        jwtToken,
+        me: user,
+        isLoggedIn,
+      }}
+    >
+      {children}
+    </Provider>
+  );
 };
 
 export default AuthProvider;

UIcode/client/src/Services/auth.js

@@ -6,13 +6,18 @@ export const getToken = () => {
 };
 
 export const googleLoginToApi = (token) => {
-  return Axios.post(
-    `${process.env.REACT_APP_API_URL}/user/gloging`,
-    {},
+  return Axios.post(`${process.env.REACT_APP_API_URL}/user/glogin`, {
+    token,
+  });
+};
+
+export const getMe = (token) => {
+  return Axios.get(
+    `${process.env.REACT_APP_API_URL}/user/me`,
+
     {
       headers: {
         authorization: token,
-        "auth-user-type": 1,
       },
     }
   );