login/logout frontend implemented

.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.env
+
 # dependencies
 /node_modules
 /.pnp

.idea/inventory-promotion-react.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_X" project-jdk-name="16" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/inventory-promotion-react.iml" filepath="$PROJECT_DIR$/.idea/inventory-promotion-react.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/workspace.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="782be151-5ffb-4bb8-9cbe-39bce549aa91" name="Default Changelist" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="master" />
+      </map>
+    </option>
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="1s6VjxITkLhRTITrUtKzJtqAnzS" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="782be151-5ffb-4bb8-9cbe-39bce549aa91" name="Default Changelist" comment="" />
+      <created>1620193165194</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1620193165194</updated>
+    </task>
+    <servers />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State>
+              <option name="FILTERS">
+                <map>
+                  <entry key="branch">
+                    <value>
+                      <list>
+                        <option value="dev" />
+                      </list>
+                    </value>
+                  </entry>
+                </map>
+              </option>
+            </State>
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+</project>
\ No newline at end of file

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/App.js

-import logo from './logo.svg';
 import './App.css';
+import Login from './component/session/Login'
+import Logout from './component/session/Logout'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <Login/>
+        <Logout/>
     </div>
   );
 }

src/component/session/Login.jsx

+import React from 'react';
+import {GoogleLogin} from 'react-google-login';
+import {refreshTokenSetup} from '../../utils/refreshToken';
+
+const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+const clientId = `${google_ClientID}.apps.googleusercontent.com`;
+
+function Login(){
+    const onSuccess = (res) =>{
+        console.log('[Login Success] currentUser:', res.profileObj);
+        refreshTokenSetup(res);
+    };
+
+    const onFailure = (res) =>{
+        console.log('[Login Failed] res:', res);
+    };
+
+    return(
+        <div>
+            <GoogleLogin
+                clientId= {clientId}
+                buttonText="Sign-in with Google"
+                onSuccess= {onSuccess}
+                onFailure= {onFailure}
+                cookiePolicy={'single_host_origin'}
+                style={{marginTop: '100px'}}
+                isSignedIn={true}
+            />
+        </div>        
+    );
+}
+
+export default Login;
\ No newline at end of file

src/component/session/Logout.jsx

+import React from 'react';
+import {GoogleLogout} from 'react-google-login';
+
+const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+const clientId = `${google_ClientID}.apps.googleusercontent.com`;
+
+function Logout(){
+    const onSuccess= (res) =>{
+        console.log('User is LogOff successfully');
+    }
+
+    return(
+        <div>
+            <GoogleLogout
+            clientId= {clientId}
+            buttonText="Sign Out"
+            onLogoutSuccess={onSuccess}
+            />
+        </div>
+    );
+}
+
+export default Logout;
\ No newline at end of file

src/utils/refreshToken.js

+export const refreshTokenSetup = (res) =>{
+    // Timing to renew access token
+    let refreshTiming = (res.tokenObj.expires_in || 3600 -5 * 60) * 1000;
+
+    const refreshToken = async () =>{
+        const newAuthRes = await res.reloadAuthResponse();
+        refreshTiming = (newAuthRes.expires_in || 3600 - 5 * 60) * 1000;
+        console.log('authToken', newAuthRes);
+        // saveUserToken(newAuthRes.access_token);  <-- save new token
+        localStorage.setItem('authToken', newAuthRes.id_token);
+        
+        //Setup the other timer after the first one
+        setTimeout(refreshToken, refreshTiming);
+
+    }
+        //Setup first refresh timer
+        setTimeout(refreshToken, refreshTiming);
+}
\ No newline at end of file