chore: fix auth, layout and private route

gatsby-browser.js

@@ -4,9 +4,11 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToastContainer } from 'react-toastify';
 import AuthContextProvider from './src/utils/Auth';
+import { Layout } from './src/components';
 
 const queryClient = new QueryClient();
 
+// Get fonts on initial load of the app
 export const onRenderBody = ({ setHeadComponents }) => {
   // @import url('fonts/Roslindale/font.css');
   setHeadComponents([
@@ -61,6 +63,11 @@ export const onRenderBody = ({ setHeadComponents }) => {
   ]);
 };
 
+export const wrapPageElement = ({ element, props }) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Layout {...props}>{element}</Layout>
+);
+
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>

gatsby-ssr.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ToastContainer } from 'react-toastify';
 import AuthContextProvider from './src/utils/Auth';
+import { Layout } from './src/components';
 
 const queryClient = new QueryClient();
 
@@ -61,6 +62,11 @@ export const onRenderBody = ({ setHeadComponents }) => {
   ]);
 };
 
+export const wrapPageElement = ({ element, props }) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <Layout {...props}>{element}</Layout>
+);
+
 export const wrapRootElement = ({ element }) => (
   <QueryClientProvider client={queryClient}>
     <AuthContextProvider>{element}</AuthContextProvider>

src/components/marginals/Navbar/DesktopNav.jsx

@@ -32,7 +32,7 @@ function DesktopNav() {
   const menuContext = useContext(MenuContext);
   const { toggleMenuOpen, menuOpen } = menuContext;
   const authContext = useContext(AuthContext);
-  const { authenticated } = authContext;
+  const { authenticated, login, logout } = authContext;
 
   return (
     <NavSection>
@@ -64,7 +64,11 @@ function DesktopNav() {
             </ul>
           </NavCenter>
           <NavRight>
-            <Button variant='outline' text={authenticated ? 'logout' : 'Register'} />
+            <Button
+              variant='outline'
+              text={authenticated ? 'logout' : 'Register'}
+              onClick={authenticated ? logout : login}
+            />
           </NavRight>
         </NavWrapper>
       </Container>

src/components/marginals/Navbar/MobileNav.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 // Libraries
-import { Link } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 
 // Components
 import { MenuContext } from './MenuContext';
@@ -29,6 +29,13 @@ const handleScroll = (id) => {
       const scroll = newScrollObject();
       const anchor = document.getElementById(id);
       scroll.animateScroll(anchor);
+    } else {
+      navigate('/');
+      setTimeout(() => {
+        const scroll = newScrollObject();
+        const anchor = document.getElementById(id);
+        scroll.animateScroll(anchor);
+      }, 1000);
     }
   }
 };
@@ -37,7 +44,7 @@ function MobileNav() {
   const menuContext = useContext(MenuContext);
   const { toggleMenuOpen } = menuContext;
   const authContext = useContext(AuthContext);
-  const { authenticated } = authContext;
+  const { authenticated, login, logout } = authContext;
 
   const onMenuClick = (id) => {
     handleScroll(id);
@@ -64,7 +71,11 @@ function MobileNav() {
             </li>
           ))}
         </ul>
-        <Button variant='outline' text={authenticated ? 'logout' : 'Register'} />
+        <Button
+          variant='outline'
+          text={authenticated ? 'logout' : 'Register'}
+          onClick={authenticated ? logout : login}
+        />
       </div>
     </StyledMobileNav>
   );

src/components/shared/index.js

@@ -13,3 +13,4 @@ export { default as ModalBox } from './ModalBox';
 export { default as About } from './About';
 export { default as Layout } from './Layout';
 export { default as Input } from './partials/Input';
+export { default as PrivateRoute } from './partials/PrivateRoute';

src/components/shared/partials/PrivateRoute/index.jsx

@@ -0,0 +1,23 @@
+import { navigate } from 'gatsby';
+import React, { useContext } from 'react';
+import { toast } from 'react-toastify';
+import { AuthContext } from '../../../../utils/Auth';
+
+const PrivateRoute = ({ children }) => {
+  const { authenticated, loading } = useContext(AuthContext);
+
+  if (loading) {
+    // TODO: Add loading spinner
+    return <div>Loading...</div>;
+  }
+
+  if (!authenticated) {
+    toast.error('You are not authenticated. Please login to access this page.');
+    navigate('/');
+    return null;
+  }
+
+  return children;
+};
+
+export default PrivateRoute;

src/pages/404.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Layout, PageNotFoundCard } from '../components';
+import { PageNotFoundCard } from '../components';
 
 export default function Error404() {
   return (
@@ -10,9 +10,7 @@ export default function Error404() {
         <title>Page not found</title>
         <meta name='description' content='This is 404 page' />
       </Helmet>
-      <Layout>
-        <PageNotFoundCard />
-      </Layout>
+      <PageNotFoundCard />
     </>
   );
 }

src/pages/index.js

@@ -1,7 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Layout } from '../components';
 
 export default function Home() {
   return (
@@ -11,7 +10,7 @@ export default function Home() {
         <title>Innovision | Home</title>
         <meta name='description' content='This is home page' />
       </Helmet>
-      <Layout>Hello Innovision 2023</Layout>
+      Hello Innovision 2023
     </>
   );
 }

src/pages/payment.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Heading1, Layout } from '../components';
+import { Heading1, PrivateRoute } from '../components';
 
 const PaymentPage = () => {
   // eslint-disable-next-line no-console
-  console.log('Payment page');
+  console.log('PaymentPage');
 
   return (
-    <Layout>
+    <PrivateRoute>
       <Heading1>Payment</Heading1>
       {/* Payment form here */}
       TODO - Payment form
-    </Layout>
+    </PrivateRoute>
   );
 };
 

src/pages/playground.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-import { Layout } from '../components';
 import FAQSection from '../components/FAQSection/FAQSection';
 
 const Playground = () => (
@@ -12,10 +11,7 @@ const Playground = () => (
       <title>Playground</title>
       <meta name='description' content='This is playground' />
     </Helmet>
-    <User />
-    <Layout>
-      <FAQSection />
-    </Layout>
+    <FAQSection />
   </>
 );
 

src/pages/pricing.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import tw from 'twin.macro';
-import { Container, Heading3, Body2, Layout } from '../components';
+import { Container, Heading3, Body2 } from '../components';
 
 const Title = styled(Heading3)`
   ${tw`my-4`}
@@ -17,14 +17,12 @@ const RefundContainer = styled.div`
 `;
 
 const privacy = () => (
-  <Layout>
-    <Container>
-      <RefundContainer>
-        <Title>Pricing</Title>
-        <Desc>The Registration fee for Innovision 2k23 is ₹700. Free for NITR Students</Desc>
-      </RefundContainer>
-    </Container>
-  </Layout>
+  <Container>
+    <RefundContainer>
+      <Title>Pricing</Title>
+      <Desc>The Registration fee for Innovision 2k23 is ₹700. Free for NITR Students</Desc>
+    </RefundContainer>
+  </Container>
 );
 
 export default privacy;

src/pages/register.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Heading1, Layout } from '../components';
+import { Heading1 } from '../components';
 
 const RegistrationPage = () => {
   // eslint-disable-next-line no-console
   console.log('Registration page');
 
   return (
-    <Layout>
+    <>
       <Heading1>Registration</Heading1>
       {/* Registration form here */}
       TODO - Registration form
-    </Layout>
+    </>
   );
 };
 

src/pages/txn-successful.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Layout, SuccessCard } from '../components';
+import { SuccessCard } from '../components';
 
 export default function Successful() {
   return (
@@ -10,9 +10,7 @@ export default function Successful() {
         <title>Innovision | Success</title>
         <meta name='description' content='This is success page' />
       </Helmet>
-      <Layout>
-        <SuccessCard />
-      </Layout>
+      <SuccessCard />
     </>
   );
 }

src/utils/Auth.jsx

@@ -3,7 +3,6 @@
 import React, { createContext, useEffect, useMemo, useState } from 'react';
 
 import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from 'firebase/auth';
-import { navigate } from 'gatsby';
 import { toast } from 'react-toastify';
 import { auth } from '../config/firebase';
 import Api from './Api';
@@ -48,7 +47,6 @@ const AuthContextProvider = ({ children }) => {
         setAuthenticated(false);
         setUserData({});
         setToken('');
-        navigate('/');
       }
       setLoading(false);
     });
@@ -91,7 +89,6 @@ const AuthContextProvider = ({ children }) => {
       try {
         auth.signOut();
         setAuthenticated(false);
-        navigate('/');
         toast.success('Logged out successfully');
       } catch (error) {
         toast.error(error.message ?? 'Unable to logout');