Refactored BungieLogin, enabled token refresh logic, modified App to conditionally render content if logged in

Author: dragoni7

src/App.jsx

@@ -58,21 +58,30 @@ const RightPane = styled('div')({
 function App() {
   return (
     <Container>
-      <BungieLogin />
-      <HeaderContainer>
-        <SingleDiamondButton />
-      </HeaderContainer>
-      <ContentContainer>
-        <LeftPane>
-          <NumberBoxes />
-        </LeftPane>
-        <RightPane>
-          <h1 style={{ fontSize: '16px' }}>Armour Combinations</h1>
-          <StatsTable />
-        </RightPane>
-      </ContentContainer>
+      <BungieLogin>{({ isLoggedIn }) => (
+        <div>
+          { isLoggedIn ? (
+            <Container>
+              <HeaderContainer>
+              <SingleDiamondButton />
+              </HeaderContainer>
+                <ContentContainer>
+                  <LeftPane>
+                    <NumberBoxes />
+                  </LeftPane>
+                  <RightPane>
+                    <h1 style={{ fontSize: '16px' }}>Armour Combinations</h1>
+                    <StatsTable />
+                  </RightPane>
+                </ContentContainer>
+            </Container>
+          ) : (
+            <div> Please log in to continue...</div>
+          )}
+      </div>
+      )}
+      </BungieLogin>
     </Container>
-
   );
 }
 

src/features/auth/components/BungieLogin.jsx

@@ -1,17 +1,35 @@
 import BungieAuth from "../../../lib/BungieAuth"
-import React, { useEffect } from "react"
+import React, { Component } from "react"
 
-export default () => {
+class BungieLogin extends Component {
+    constructor(props) {
+        super(props)
 
-    function onLogIn() {
-        BungieAuth.authenticate()
+        this.state = {
+            isLoggedIn: BungieAuth.isAuthenticated()
+        }
     }
 
-    useEffect ( () => {
+    componentDidMount() {
         if (BungieAuth.setAuthCode()) {
             BungieAuth.generateToken()
         }
-    }, [])
+    }
+
+    onLogIn () {
+        BungieAuth.authenticate()
+    }
+
+    onLogOut () {
+        // TODO: log out 
+    }
+
+    render() {
+        return <div>
+                { this.props.children({ isLoggedIn: this.state.isLoggedIn }) }
+                { this.state.isLoggedIn ? ( <button onClick={this.onLogOut}>Log Out</button> ) : ( <button onClick={this.onLogIn}>Log In</button> ) }
+            </div>
+    }
+}
 
-    return BungieAuth.isAuthenticated() ? null : ( <button onClick={onLogIn}>Log In</button> )
-}
+export default BungieLogin

src/lib/BungieAuth.jsx

@@ -25,7 +25,7 @@ const BungieAuth = {
         })
 
         if (refreshToken && Date.now() < refreshTokenExpiringAt && Date.now() > lastRefresh + timing) {
-            return generateToken(true)
+            return BungieAuth.generateToken(true)
         }
 
         return true
@@ -52,15 +52,17 @@ const BungieAuth = {
                 localStorage.setItem("refreshToken", response.data.refresh_token)
                 localStorage.setItem("refreshTokenExpiringAt", Date.now() + response.data.refresh_expires_in * 1000 - 10 * 1000)
                 localStorage.setItem("lastRefresh", Date.now())
+                return true
             }
             else {
-                return new Error('Could not get access token')
+                console.log("Could not get access token")
+                return false
             }
         })
     },
 
     isAuthenticated: () => {
-        return (localStorage.getItem("accessToken") !== null)
+        return (localStorage.getItem("accessToken") !== null && BungieAuth.autoRegenerateTokens())
     },
 
     setAuthCode: () => {