fixed User Provider and token

app/containers/App/index.js

@@ -12,7 +12,7 @@ import Login from 'containers/Login';
 import ClientDevices from 'containers/ClientDevices';
 import UserProvider from 'contexts/UserProvider';
 
-import { getItem } from 'utils/localStorage';
+import { getItem, setItem } from 'utils/localStorage';
 import { parseJwt } from 'utils/jwt';
 
 import UnauthenticatedRoute from './components/UnauthenticatedRoute';
@@ -27,26 +27,34 @@ const RedirectToDashboard = () => (
 );
 
 const App = () => {
+  const token = getItem(AUTH_TOKEN);
   const [user, setUser] = useState({});
 
   useEffect(() => {
-    const token = getItem(AUTH_TOKEN);
     if (token) {
       const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
-
       setUser({ id: userId, email: userName, role: userRole, customerId });
     }
   }, []);
 
+  const updateToken = newToken => {
+    setItem(AUTH_TOKEN, newToken);
+    if (newToken) {
+      const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
+      setUser({ id: userId, email: userName, role: userRole, customerId });
+    }
+  };
+
   const updateUser = newUser => setUser({ ...user, ...newUser });
 
   return (
     <UserProvider
-      id={user.id}
-      email={user.email}
-      role={user.role}
+      id={user.userId}
+      email={user.userName}
+      role={user.userRole}
       customerId={user.customerId}
       updateUser={updateUser}
+      updateToken={updateToken}
     >
       <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
         <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>

app/containers/Login/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import gql from 'graphql-tag';
 import { useMutation, useApolloClient } from '@apollo/react-hooks';
 import { useHistory } from 'react-router-dom';
@@ -6,9 +6,7 @@ import { notification } from 'antd';
 
 import { Login as LoginPage } from '@tip-wlan/wlan-cloud-ui-library';
 
-import { AUTH_TOKEN } from 'constants/index';
-
-import { setItem } from 'utils/localStorage';
+import UserContext from 'contexts/UserContext';
 
 const AUTHENTICATE_USER = gql`
   mutation AuthenticateUser($email: String!, $password: String!) {
@@ -22,6 +20,7 @@ const AUTHENTICATE_USER = gql`
 
 const Login = () => {
   const history = useHistory();
+  const { updateToken } = useContext(UserContext);
   const client = useApolloClient();
   const [authenticateUser] = useMutation(AUTHENTICATE_USER);
 
@@ -29,7 +28,7 @@ const Login = () => {
     authenticateUser({ variables: { email, password } })
       .then(({ data }) => {
         client.resetStore();
-        setItem(AUTH_TOKEN, data.authenticateUser, data.authenticateUser.expires_in);
+        updateToken(data.authenticateUser);
         history.push('/');
       })
       .catch(() =>

app/contexts/UserProvider/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import UserContext from 'contexts/UserContext';
 
-const UserProvider = ({ children, id, email, role, customerId, updateUser }) => (
-  <UserContext.Provider value={{ id, email, role, customerId, updateUser }}>
+const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
+  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
     {children}
   </UserContext.Provider>
 );
@@ -12,6 +12,7 @@ const UserProvider = ({ children, id, email, role, customerId, updateUser }) =>
 UserProvider.propTypes = {
   children: PropTypes.node.isRequired,
   updateUser: PropTypes.func.isRequired,
+  updateToken: PropTypes.func.isRequired,
   id: PropTypes.number,
   email: PropTypes.string,
   role: PropTypes.string,

app/utils/localStorage.js

@@ -13,7 +13,9 @@ export const getItemExpiration = () => {
 
 export const setItem = (key, data, expiration) => {
   const localStorageState = data;
-  localStorageState.expiration = expiration || getItemExpiration();
+  if (localStorageState) {
+    localStorageState.expiration = expiration || getItemExpiration();
+  }
   window.localStorage.setItem(key, JSON.stringify(localStorageState));
 };