feat: add user authentication & admin authorization

Author: saddamrushowl

components/layout/layout.tsx

@@ -1,16 +1,64 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
 
 import Navbar from './navbar';
 import Footer from './footer';
 
+import Login from '../login-page/login';
+
 const Layout: React.FunctionComponent = ({ children }) => {
-  return (
-    <React.Fragment>
-      <Navbar />
-      <main>{children}</main>
-      <Footer />
-    </React.Fragment>
-  );
+  const [isProtectedRoute, setIsProtectedRoute] = useState(false);
+  const [resetPasswordRoute, setResetPasswordRoute] = useState(false);
+  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
+  const router = useRouter();
+  console.log(router.pathname);
+  useEffect(() => {
+    if (router.pathname.includes('/reset-password') || router.pathname.includes('/verify-email')) {
+      setIsProtectedRoute(() => false);
+      setResetPasswordRoute(() => true);
+    } else if (router.pathname === '/order' || router.pathname === '/cart' || router.pathname === '/') {
+      setResetPasswordRoute(() => false);
+      setIsProtectedRoute(() => true);
+    }
+  }, [router, isAuthenticated]);
+
+  useEffect(() => {
+    const redirectToLogin = () => {
+      if (!isAuthenticated && isProtectedRoute) {
+        return <Login />;
+      }
+    };
+
+    redirectToLogin();
+  }, [isAuthenticated]);
+
+  let content;
+  if (resetPasswordRoute) {
+    content = (
+      <React.Fragment>
+        <main>{children}</main>
+      </React.Fragment>
+    );
+  } else if (!isAuthenticated && isProtectedRoute) {
+    content = <Login />;
+  } else if (!isAuthenticated && !isProtectedRoute) {
+    content = (
+      <React.Fragment>
+        <Login />
+      </React.Fragment>
+    );
+  } else {
+    content = (
+      <React.Fragment>
+        <Navbar />
+        <main>{children}</main>
+        <Footer />
+      </React.Fragment>
+    );
+  }
+
+  return content;
 };
 
 export default Layout;

components/layout/navbar.tsx

@@ -1,20 +1,17 @@
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
+import { connect } from 'react-redux';
+import { removeAuthenticatedUser } from '../../redux/actions/index';
+import { ReducerType } from '../../redux/reducers/rootReducer';
 import { removedUserFromLocalStorage } from '../../utils/functions/helpers';
 
-const Navbar: React.FunctionComponent = () => {
-  const [user, setUser] = useState<any>(false);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setUser(() => localStorage.getItem('user'));
-    }
-  }, [user]);
+const Navbar: React.FunctionComponent = (props: any) => {
+  const { isAuthenticated, isADmin } = props.auth;
 
   const signedOutHandler = () => {
+    props.removeAuthenticatedUser();
     removedUserFromLocalStorage();
-    setUser(false);
   };
 
   return (
@@ -30,31 +27,36 @@ const Navbar: React.FunctionComponent = () => {
           <Link href="/cart">
             <a className="customlink">Cart</a>
           </Link>
-          <Link href="/add-product">
-            <a className="customlink">Add Product</a>
-          </Link>
+          {isADmin === 'admin' && (
+            <Link href="/add-product">
+              <a className="customlink">Add Product</a>
+            </Link>
+          )}
           <Link href="/order">
             <a className="customlink">Oder</a>
           </Link>
-          <Link href="/admin/products">
-            <a className="customlink">Admin Products</a>
-          </Link>
-          <Link href="/admin/users-ui">
-            <a className="customlink"> Admin Users UI</a>
-          </Link>
-          <Link href="/admin/users-table">
-            <a className="customlink"> Admin Users Table</a>
-          </Link>
+          {isADmin === 'admin' && (
+            <>
+              <Link href="/admin/products">
+                <a className="customlink">Admin Products</a>
+              </Link>
+              <Link href="/admin/users-ui">
+                <a className="customlink"> Admin Users UI</a>
+              </Link>
+              <Link href="/admin/users-table">
+                <a className="customlink"> Admin Users Table</a>
+              </Link>
+            </>
+          )}
         </div>
-        {user && (
+        {isAuthenticated && (
           <div>
             <button className=" customlink" onClick={signedOutHandler}>
               SignOut
             </button>
           </div>
         )}
-
-        {!user && (
+        {!isAuthenticated && (
           <div className=" flex  justify-between items-center space-x-8">
             <Link href="/login">
               <a className="customlink cursor-pointer">Login</a>
@@ -70,4 +72,17 @@ const Navbar: React.FunctionComponent = () => {
   );
 };
 
-export default Navbar;
+const mapStateToProps = (state: ReducerType) => {
+  return {
+    auth: state.auth
+  };
+};
+
+const mapDispatchToProps = {
+  removeAuthenticatedUser
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Navbar);