connect FE and BE to generate and store JWT and refresh token

src/App.js

-import React from "react";
+import React, { useEffect } from "react";
 import { Router } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import i18next from "i18next";
 import history from "./store/utils/history";
 import MainContainer from "./components/Section/MainContainer";
 import AppRoutes from "./AppRoutes";
+import { useDispatch } from "react-redux";
+import {refreshUserToken} from "./store/actions/login/loginActions";
+import { BASE_PAGE } from "./constants/pages";
 const App = () => {
-  // const { pathname } = useLocation();
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    if(history.location.pathname === BASE_PAGE)
+      return;
+    dispatch(refreshUserToken())
+  },[])
+
   return (
     <>
       <Router history={history}>

src/pages/LoginPage/LoginPageMUI.js

   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const handleMouseDownPassword = () => setShowPassword(!showPassword);
 
-  // When user refreshes page
-  // useEffect(() => {
-  // 	function redirectClient() {
-  //     let token = localStorage.getItem("JwtToken")
-  // 		if (!token) {
-  // 			return;
-  // 		}
-  //     handleApiResponseSuccess()
-  // 	}
-  // 	redirectClient();
-  // }, [history]);
+  useEffect(() => {
+    function redirectClient() {
+      let token = localStorage.getItem("JwtToken")
+        if (!token) {
+          return;
+        }
+        handleApiResponseSuccess()
+      }
+      redirectClient();
+    }, [history]);
 
   const isLoading = useSelector(
     selectIsLoadingByActionType(LOGIN_USER_LOADING)

src/request/apiEndpoints.js

 export default {
   authentications: {
     login: 'http://localhost:26081/v1/users/authenticate',
+    refreshToken:'http://localhost:26081/v1/users/refresh'
   },
 };

src/store/actions/login/loginActions.js

 
 export const updateUserToken = (payload) => ({
   type: UPDATE_USER_JWT_TOKEN,
-  payload,
+  payload
 });
 
 export const resetLoginState = () => ({
   type: LOGOUT_USER,
 });
 
-export const refreshUserToken = () => ({
+export const refreshUserToken = (payload) => ({
   type: REFRESH_TOKEN,
+  payload
 });
 
 export const generateToken = (payload) => ({

src/store/reducers/login/loginReducer.js

 import {
   CLEAR_LOGIN_USER_ERROR,
   LOGIN_USER_ERROR,
-  LOGIN_USER_SUCCESS,
   RESET_LOGIN_STATE,
-  UPDATE_USER_JWT_TOKEN,
   GENERATE_TOKEN_SUCCESS,
   GENERATE_TOKEN_ERROR,
 } from '../../actions/login/loginActionConstants';
 
 const initialState = {
-  email: '',
-  token: {
-    RefreshToken: '',
-    JwtToken: '',
-  },
-  errorMessage: '',
+  email: "",
+  errorMessage: "",
 };
 
 export default createReducer(
   {
-
-    [LOGIN_USER_SUCCESS]: setUser,
-    [UPDATE_USER_JWT_TOKEN]: setUserJwtToken,
     [RESET_LOGIN_STATE]: resetLoginState,
     [LOGIN_USER_ERROR]: setError,
     [CLEAR_LOGIN_USER_ERROR]: clearLoginErrors,
   initialState,
 );
 
-
-function setUser(state, action) {
-  return {
-    ...state,
-    token: action.payload,
-  };
-}
-
-function setUserJwtToken(state, action) {
-  return {
-    ...state,
-    token: {
-      ...state.token,
-      JwtToken: action.payload,
-    },
-  };
-}
-
 function setError(state, action) {
   return {
     ...state,

src/store/reducers/user/userReducer.js

 } from '../../actions/user/userActionConstants';
 
 const initialState = {
-  user: {},
+  id:"",
+  firstName:"",
+  lastName:"",
+  username:"",
+  token:"",
+  refreshToken:""
 };
 
 export default createReducer(
 
 function setUser(state, action) {
   return {
-    ...state,
-    user: action.payload,
+    id:action.payload.id,
+    firstName:action.payload.firstName,
+    lastName:action.payload.lastName,
+    username:action.payload.username,
+    token:action.payload.token,
+    refreshToken:action.payload.refreshToken,
   };
 }
 

src/store/saga/loginSaga.js

   resetLoginState,
   updateUserToken,
 } from '../actions/login/loginActions';
-import { LOGIN_PAGE } from '../../constants/pages';
+import { LOGIN_PAGE,BASE_PAGE } from '../../constants/pages';
 import { setUser } from '../actions/user/userActions';
 import {
   addHeaderToken,
 function* fetchUser({ payload }) {
   try {
     const { data } = yield call(attemptLogin, payload);
-    if (data.token) {
-      const user = jwt.decode(data.token);
+    if (data) {
+      //const user = jwt.decode(data.token);
       yield call(authScopeSetHelper, JWT_TOKEN, data.token);
-      yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken);
-      yield call(authScopeSetHelper, REFRESH_TOKEN_CONST, data.RefreshToken);
+      yield call(authScopeSetHelper, REFRESH_TOKEN_CONST, data.refreshToken);
       yield call(addHeaderToken, data.token);
-      yield put(setUser(user));
+      yield put(setUser(data));
     }
     yield put(fetchUserSuccess(data));
     if (payload.handleApiResponseSuccess) {
 
 export function* refreshToken() {
   try {
-    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
-    const JwtRefreshToken = yield call(
-      authScopeStringGetHelper,
-      JWT_REFRESH_TOKEN,
-    );
+    const token = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    const refreshToken = yield call(authScopeStringGetHelper,REFRESH_TOKEN_CONST);
 
-    if (JwtToken && JwtRefreshToken) {
+    if (token && refreshToken) {
       const { data } = yield call(refreshTokenRequest, {
-        JwtRefreshToken,
-        JwtToken,
+        refreshToken,
+        token,
       });
 
-      yield call(authScopeSetHelper, JWT_TOKEN, data.JwtToken);
-      yield call(authScopeSetHelper, JWT_REFRESH_TOKEN, data.JwtRefreshToken);
-      const user = jwt.decode(data.JwtToken);
-      addHeaderToken(data.JwtToken);
-      yield put(setUser(user));
-      yield put(updateUserToken(data.JwtToken));
+      yield call(authScopeSetHelper, JWT_TOKEN, data.data.token);
+      addHeaderToken(data.data.token);
+      yield put(setUser(data.data));
     }
   } catch (error) {
-    yield call(logoutUser);
-    console.log(error); // eslint-disable-line
+    localStorage.removeItem(JWT_TOKEN)
+    localStorage.removeItem(REFRESH_TOKEN_CONST)
+    yield call(history.replace, BASE_PAGE);
   }
 }
 

src/util/helpers/authScopeHelpers.js

 }
 
 export function authScopeStringGetHelper(key) {
-  if (sessionStorage.getItem(SESSION_STORAGE_SCOPE)) {
-    return sessionStorage.getItem(key);
-  }
-
   return localStorage.getItem(key);
 }