segregate and protect routes for both user and admin

Author: pramit-marattha

client/components/authentication/Admin.js

@@ -0,0 +1,24 @@
+import React ,{useState,useEffect} from "react";
+import Router from "next/router";
+import {isAuthenticated} from "../../actions/authentication";
+
+const Admin = ({children})=>{
+
+
+    useEffect(()=>{
+        if(!isAuthenticated()){
+            Router.push(`/login`);
+        }else if (isAuthenticated().role !== 1){
+            Router.push(`/`);
+        }
+    },[])
+
+    return (
+        <>
+        {children}
+        </>
+    )
+
+}
+
+export default Admin;

client/components/authentication/LoginAuth.js

@@ -31,9 +31,9 @@ const LoginAuth = () => {
                 // authenticate the user
                 authenticate(data,()=>{
                     if(isAuthenticated() && isAuthenticated().role === 1){
-                        Router.push(`/admin`)
+                        Router.push(`/adminDashboard`)
                     } else {
-                        Router.push(`/user`)
+                        Router.push(`/userDashboard`)
                     }
                 })
 
@@ -54,7 +54,6 @@ const LoginAuth = () => {
     return (
 
         <form onSubmit={handleSubmit}>
-       
          {/* Email */}
          <div className="form-group">
             <input type="email" value={email} className="form-control" onChange={handleChange("email")} placeholder="Enter your @Email address"/>

client/components/authentication/PrivateRoute.js

@@ -0,0 +1,22 @@
+import React ,{useState,useEffect} from "react";
+import Router from "next/router";
+import {isAuthenticated} from "../../actions/authentication";
+
+const PrivateRoute = ({children})=>{
+
+
+    useEffect(()=>{
+        if(!isAuthenticated()){
+            Router.push(`/login`)
+        }
+    },[])
+
+    return (
+        <>
+        {children}
+        </>
+    )
+
+}
+
+export default PrivateRoute;

client/pages/adminDashboard/index.js

@@ -1,11 +1,14 @@
 import Layout from "../../components/Layout";
+import Admin from "../../components/authentication/Admin";
 import Link from "next/link";
 
 
 const AdminIndex =() =>{
     return(
         <Layout>
+        <Admin>
         <h2>Admin Dashboard</h2>
+        </Admin>
         </Layout>
     )
 }

client/pages/userDashboard/index.js

@@ -1,11 +1,14 @@
 import Layout from "../../components/Layout";
+import PrivateRoute from "../../components/authentication/PrivateRoute";
 import Link from "next/link";
 
 
 const UserIndex =() =>{
     return(
         <Layout>
+        <PrivateRoute>
         <h2>User Dashboard</h2>
+        </PrivateRoute>
         </Layout>
     )
 }