Detect if token is expired

src/App.js

@@ -40,7 +40,6 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            isLoged: false,
             num: null,
             role: null,
             token: null
@@ -55,7 +54,7 @@ class App extends React.Component {
         if (token) {
             const num = localStorage.getItem("num");
             const role = localStorage.getItem("role");
-            this.setState({ isLoged: true, num, role, token });
+            this.setState({ num, role, token });
         }
     }
 
@@ -67,7 +66,6 @@ class App extends React.Component {
 
     login(token, member) {
         this.setState({
-            isLoged: true,
             num: member.num,
             role: member.role,
             token: token
@@ -75,9 +73,12 @@ class App extends React.Component {
         this.storeState(token, member.num, member.role);
     }
 
+    isLoged() {
+        return this.state.token !== null && !this.tokenExpired();
+    }
+
     logout() {
         this.setState({
-            isLoged: false,
             num: null,
             role: null,
             token: null
@@ -85,10 +86,24 @@ class App extends React.Component {
         this.storeState("", "", "");
     }
 
+	tokenExpired() {
+        const token = this.state.token;
+		const base64Url = token.split('.')[1];
+		const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+		const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+			return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+		}).join(''));
+		const claims = JSON.parse(jsonPayload);
+
+        return claims["exp"] < Date.now();
+	};
+
     render() {
-        const component = this.state.isLoged ?
-            <Panel onLogout={this.logout} /> :
-            <SignIn onLogin={this.login} />;
+        let component = <Panel onLogout={this.logout} />;
+        if (!this.isLoged()) {
+            component = <SignIn onLogin={this.login} />;
+        }
+
         return (
           <AuthContext.Provider value={this.state}>
             {component}

src/SignIn.js

@@ -98,11 +98,11 @@ class SignIn extends React.Component {
 
         return (
           <Container>
-            <Row className="justify-content-md-center">
+            <Row className="justify-content-center">
               <img src={logo} alt="Garbanzo Negro" />
             </Row>
             {alert}
-            <Row className="justify-content-md-center">
+            <Row className="justify-content-center">
               {form}
             </Row>
           </Container>