feat: Updates logic for authentication

packages/frontend/components/navbar/index.tsx

@@ -1,13 +1,23 @@
 import React, { Fragment } from "react";
-import { Box, Link as _Link } from "@chakra-ui/core";
+import { Box, Link as _Link, Button } from "@chakra-ui/core";
 import { NextPage } from "next";
 import Link from "next/link";
+import { cookieRemover } from "../../lib/cookie";
+import Router from "next/router";
 
 interface iProps {
   isAuthenticated: boolean;
 }
 
 const Navbar: NextPage<iProps> = ({ isAuthenticated }) => {
+  const handleSignOut = () => {
+    cookieRemover("user-id");
+    cookieRemover("user-roles");
+    cookieRemover("token");
+
+    Router.push("/sign-up");
+  };
+
   return (
     <Box borderBottomWidth={1}>
       <Box
@@ -21,21 +31,24 @@ const Navbar: NextPage<iProps> = ({ isAuthenticated }) => {
       >
         <Box display="flex" alignItems="center">
           <Link href="/">
-            <_Link>Logo</_Link>
+            <_Link>Home</_Link>
           </Link>
         </Box>
         <Box display="flex" alignItems="center">
-          <_Link mr={4}>Documentation</_Link>
           {!isAuthenticated ? (
             <Fragment>
               <_Link mr={4} href="/sign-in">
                 Sign In
               </_Link>
               <Link href="/sign-up">
-                <_Link>Sign Up</_Link>
+                <Button variantColor="purple">Sign Up</Button>
               </Link>
             </Fragment>
-          ) : null}
+          ) : (
+            <Button variantColor="purple" onClick={handleSignOut}>
+              Sign out
+            </Button>
+          )}
         </Box>
       </Box>
     </Box>

packages/frontend/components/pages/sign-up/index.tsx

@@ -31,7 +31,7 @@ const SignUp: NextPage = () => {
     cookieSetter("token", res.token);
 
     if (response.ok) {
-      router.push("/index");
+      router.push("/");
     } else {
       setErrors(res.data.columns);
     }
@@ -53,7 +53,7 @@ const SignUp: NextPage = () => {
       ) : null}
       <Box minWidth="400px" p={4}>
         <Box mb={8} as="form" onSubmit={handleSubmit}>
-          <FormControl isRequired mb={8}>
+          <FormControl isRequired mb={4}>
             <FormLabel htmlFor="email">Email address</FormLabel>
             <Input
               type="email"
@@ -82,7 +82,7 @@ const SignUp: NextPage = () => {
         </Box>
         <Box display="flex" justifyContent="flex-end" p={0}>
           <Button
-            variantColor="blue"
+            variantColor="purple"
             size="lg"
             loadingText="Signing up..."
             onClick={handleSubmit}

packages/frontend/lib/cookie.ts

@@ -1,10 +1,14 @@
-import { setCookie } from 'nookies'
+import { setCookie, destroyCookie } from "nookies";
 
 const cookieSetter = (key: string, value: string, ctx = null) => {
   setCookie(ctx, key, value, {
     maxAge: 30 * 24 * 60 * 60,
-    path: '/',
-  })
-}
+    path: "/"
+  });
+};
 
-export { cookieSetter }
+const cookieRemover = (key: string) => {
+  destroyCookie(null, key);
+};
+
+export { cookieSetter, cookieRemover };

packages/frontend/lib/with-authentication.tsx

@@ -1,49 +1,71 @@
-import { Component } from 'react'
-import { parseCookies } from 'nookies'
-import { NextPage } from 'next'
-import Router from 'next/router'
+import { Component } from "react";
+import { parseCookies } from "nookies";
+import { NextPage, NextPageContext, NextComponentType } from "next";
+import Router from "next/router";
 
-// Gets the display name of a JSX component for dev tools
-const getComponentDisplayName = (Component: any) => {
-  return Component.displayName || Component.name || 'Unknown'
+interface Context extends NextPageContext {
+  // any modifications to the default context, e.g. query types
+  asPath: string;
 }
 
+// Gets the display name of a JSX component for dev tools
+const getComponentDisplayName = (Component: NextComponentType) => {
+  return Component.displayName || Component.name || "Unknown";
+};
+
 export default (ComposedComponent: NextPage) => {
   return class WithAuthentication extends Component {
     static displayName = `WithAuthentication(${getComponentDisplayName(
       ComposedComponent
-    )})`
+    )})`;
 
-    static async getInitialProps(ctx: any) {
-      const isAuthenticated = !!parseCookies(ctx).token
+    static async getInitialProps(ctx: Context) {
+      const isAuthenticated = !!parseCookies(ctx).token;
 
       // Evaluate the composed component's getInitialProps()
-      let composedInitialProps = {}
+      let composedInitialProps = {};
 
       if (ComposedComponent.getInitialProps) {
-        composedInitialProps = await ComposedComponent.getInitialProps(ctx)
+        composedInitialProps = await ComposedComponent.getInitialProps(ctx);
       }
 
       // When the user is authenticated, don't let the user visit the
       // sign-in and sign-up routes
       if (
         isAuthenticated &&
-        ['/sign-up', '/sign-in'].indexOf(ctx.asPath) > -1
+        ["/sign-up", "/sign-in"].indexOf(ctx.asPath) > -1
       ) {
-        if (typeof window !== 'undefined') {
-          Router.push('/')
+        if (typeof window !== "undefined") {
+          Router.push("/");
         } else {
-          ctx.res.redirect('/')
+          if (ctx.res) {
+            ctx.res.writeHead(301, {
+              Location: "/"
+            });
+            ctx.res.end();
+          }
+        }
+      } else if (!isAuthenticated && ["/"].indexOf(ctx.asPath) > -1) {
+        if (typeof window !== "undefined") {
+          Router.push("/sign-up");
+        } else {
+          if (ctx.res) {
+            ctx.res.writeHead(301, {
+              Location: "/sign-up"
+            });
+            ctx.res.end();
+          }
         }
       }
 
       return {
         ...composedInitialProps,
-      }
+        isAuthenticated
+      };
     }
 
     render() {
-      return <ComposedComponent {...this.props} />
+      return <ComposedComponent {...this.props} />;
     }
-  }
-}
+  };
+};

packages/frontend/pages/_app.tsx

@@ -1,12 +1,6 @@
 import React from "react";
 import NextApp from "next/app";
-import {
-  ThemeProvider,
-  CSSReset,
-  ColorModeProvider,
-  theme,
-  Box
-} from "@chakra-ui/core";
+import { ThemeProvider, CSSReset, Box } from "@chakra-ui/core";
 
 import withApollo from "../lib/with-apollo";
 import Navbar from "../components/navbar";
@@ -16,18 +10,16 @@ class App extends NextApp {
     const { Component, pageProps } = this.props;
 
     return (
-      <ThemeProvider theme={theme}>
+      <ThemeProvider>
         <CSSReset />
-        <ColorModeProvider>
-          <Box fontSize="sm">
-            <Navbar isAuthenticated={pageProps.isAuthenticated} />
-            <Box bg="gray.50">
-              <Box minH="100vh" maxW="6xl" w="full" mx="auto" p={4}>
-                <Component {...this.props} />
-              </Box>
+        <Box fontSize="sm">
+          <Navbar isAuthenticated={pageProps.isAuthenticated} />
+          <Box bg="gray.50">
+            <Box minH="100vh" maxW="6xl" w="full" mx="auto" p={4}>
+              <Component {...this.props} />
             </Box>
           </Box>
-        </ColorModeProvider>
+        </Box>
       </ThemeProvider>
     );
   }