Added a context to track logged-in and editable state

context/AppContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+const AppContext = createContext({
+    authenticated: false,
+    editable: false,
+    setAuthenticated: (auth: boolean) => {},
+    setEditable: (editable: boolean) => {}
+})
+
+export default AppContext

pages/_app.tsx

@@ -1,15 +1,23 @@
 import '../styles/globals.scss'
 
-import type { AppProps } from 'next/app'
+import { useState } from 'react'
 import { CookiesProvider } from 'react-cookie'
+
 import Layout from '~components/Layout'
+import AppContext from '~context/AppContext'
+
+import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {
+    const [authenticated, setAuthenticated] = useState(false)
+    const [editable, setEditable] = useState(false)
     return (
         <CookiesProvider>
-            <Layout>
+            <AppContext.Provider value={{ authenticated, setAuthenticated, editable, setEditable }}>
-                <Component {...pageProps} />
+                <Layout>
-            </Layout>
+                    <Component {...pageProps} />
+                </Layout>
+            </AppContext.Provider>
         </CookiesProvider>
     )
 }