Uses localStorage to extract authentication status

workspaces/homepage/src/components/header/Header.js

@@ -54,6 +54,13 @@ const Wrapper = styled.div({
   // opacity: '0.84'
 })
 
+const logout = () => {
+  const isSSR = typeof window === 'undefined'
+  if (!isSSR) {
+    return localStorage.setItem('authenticated', false)
+  }
+}
+
 const Header = () => (
   <HyperWrapper>
     <Wrapper>
@@ -67,7 +74,7 @@ const Header = () => (
         <MenuLink
           css={{
             margin: '5px 20px'
-          }} to='/' state={{ authenticated: false }}
+          }} onClick={logout} to='/login'
         >Logout
         </MenuLink>
         {/* <MenuLink

workspaces/homepage/src/pages/index.js

@@ -1,21 +1,33 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { graphql, navigate } from 'gatsby'
 
 // import { PrivateRoute } from 'src/components/private-route'
 import { Crypton } from 'src/components/crypton'
 
-const isAuthenticated = state => {
-  return (state && state.authenticated)
+const isAuthenticated = () => {
+  const isSSR = typeof window === 'undefined'
+  if (!isSSR) {
+    return localStorage.getItem('authenticated') === 'true'
+  }
+  return false
 }
 
 const Home = ({ data, location }) => {
+  const [authenticated, setAuthenticated] = useState(false)
   console.log('************* Welcome to CRYPTON *************')
 
   useEffect(() => {
-    if (!isAuthenticated(location.state)) {
+    if (!isAuthenticated()) {
+      setAuthenticated(false)
       navigate('/login')
+    } else {
+      setAuthenticated(true)
     }
-  }, [location.state])
+  }, [])
+
+  if (!authenticated) {
+    return null
+  }
 
   return (
     <Crypton data={data} />

workspaces/homepage/src/pages/login.js

@@ -1,15 +1,43 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
 import { navigate } from 'gatsby'
 
+import { FadingValueBox } from 'src/components/animations'
+
+const isAuthenticated = () => {
+  const isSSR = typeof window === 'undefined'
+  if (!isSSR) {
+    return localStorage.getItem('authenticated') === 'true'
+  }
+  return false
+}
+
 const Login = ({ data, location }) => {
+  const [authenticated, setAuthenticated] = useState(true)
+
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      setAuthenticated(false)
+    } else {
+      navigate('/')
+      setAuthenticated(true)
+    }
+  }, [])
   const onClick = useCallback(() => {
-    navigate('/', { state: { authenticated: true } })
+    const isSSR = typeof window === 'undefined'
+    if (!isSSR) {
+      localStorage.setItem('authenticated', true)
+    }
+    navigate('/')
   }, [])
 
+  if (authenticated) {
+    return null
+  }
+
   return (
-    <div>
+    <FadingValueBox alignItems='center'>
       <button onClick={onClick}>Login...</button>
-    </div>
+    </FadingValueBox>
   )
 }