1:HL["/_next/static/media/2d141e1a38819612-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
2:HL["/_next/static/css/cf073754662ee1dd.css","style",{"crossOrigin":""}]
0:["PKb518kvGJ1fSv37ZR9-f",[[["",{"children":["blog",{"children":[["slug","role-based-auth-with-react-router-v6","d"],{"children":["__PAGE__?{\"slug\":\"role-based-auth-with-react-router-v6\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cf073754662ee1dd.css","precedence":"next","crossOrigin":""}]],"$L4"]]]]
5:I[7221,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"ThemeProvider"]
6:I[2920,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"Header"]
7:I[6899,[],""]
8:I[345,[],""]
9:I[9311,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
c:I[9328,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"GoogleAnalytics"]
d:I[5097,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Role Based Authorization with React Router v6 and Typescript | Adarsha Acharya"}],["$","meta","2",{"name":"description","content":"Building auth route in react router v6 with role based authorization."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"Role Based Authorization with React Router v6 and Typescript"}],["$","meta","7",{"property":"og:description","content":"Building auth route in react router v6 with role based authorization."}],["$","meta","8",{"property":"og:url","content":"https://adarsha.dev/blog/role-based-auth-with-react-router-v6"}],["$","meta","9",{"property":"og:site_name","content":"Adarsha Acharya"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://adarsha.dev/og?title=Role%20Based%20Authorization%20with%20React%20Router%20v6%20and%20Typescript"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"Role Based Authorization with React Router v6 and Typescript"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"property":"article:published_time","content":"2021-07-01\r"}],["$","meta","17",{"property":"article:author","content":"Adarsha Acharya"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Role Based Authorization with React Router v6 and Typescript"}],["$","meta","20",{"name":"twitter:description","content":"Building auth route in react router v6 with role based authorization."}],["$","meta","21",{"name":"twitter:image","content":"https://adarsha.dev/og?title=Role%20Based%20Authorization%20with%20React%20Router%20v6%20and%20Typescript"}],["$","meta","22",{"name":"next-size-adjust"}]]
3:[null,["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/_static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/_static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/_static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/_static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/_static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","meta",null,{"name":"google-site-verification","content":"br9AjaAyJgS4OVigpXtHmm2DwdzuzMqzpK4G77lD2TY"}]],["$","body",null,{"className":"mx-auto min-h-screen max-w-3xl antialiased dark:bg-zinc-950 dark:text-gray-100 __className_0aa4ae","children":[["$","$L5",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","main",null,{"className":"mx-4  px-2 md:px-0 lg:mx-auto flex flex-col justify-between min-h-screen","children":[["$","$L6",null,{}],["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight  md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","$L9",null,{"href":"/","className":"underline","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children",["slug","role-based-auth-with-react-router-v6","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La","$Lb",null],"segment":"__PAGE__?{\"slug\":\"role-based-auth-with-react-router-v6\"}"},"styles":[]}],"segment":["slug","role-based-auth-with-react-router-v6","d"]},"styles":[]}],"segment":"blog"},"styles":[]}],["$","footer",null,{"className":"flex justify-center align-center pt-10 pb-5 h-20px","children":["$","p",null,{"className":"text-gray-500  dark:text-gray-400 text-sm","children":["© ",2024," ",["$","a",null,{"href":"https://x.com/adarsha_ach","target":"_blank","rel":"noopener noreferrer","children":"Adarsha Acharya."}],"  All rights reserved."]}]}]]}],null]}],["$","$Lc",null,{"gaId":"$undefined"}],["$","$Ld",null,{"async":true,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-undefined","crossOrigin":"anonymous","strategy":"afterInteractive"}]]}]]}],null]
e:I[3364,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
f:I[5900,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"Image"]
10:I[419,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"BlogComments"]
b:["$","section",null,{"children":[["$","h1",null,{"className":"text-2xl font-bold tracking-tighter","children":["$","$Le",null,{"children":"Role Based Authorization with React Router v6 and Typescript"}]}],["$","div",null,{"className":"mb-8 mt-2 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400","children":["$","p",null,{"children":["July 1, 2021"," - ","7 min read"]}]}],[["$","article",null,{"className":"prose prose-neutral dark:prose-invert prose-quoteless  max-w-none","children":[["$","$Lf",null,{"src":"/_static/blogs/role-based-auth-with-react-router-v6/banner.png","width":1280,"height":720,"alt":"react router banner","priority":true,"className":"rounded-lg"}],"\n",["$","h3",null,{"id":"background","children":[["$","a",null,{"className":"anchor","href":"#background","children":["$","span",null,{"className":"icon icon-link"}]}],"Background"]}],"\n",["$","p",null,{"children":"React router has almost become de-facto way of setting up routing in React application and it has really come long way with exciting features in each iteration."}],"\n",["$","p",null,{"children":"I love how composable the new api is and best thing is it's tiny/simple api structure which makes api more memorizable so, I don't need to switch to docs everytime."}],"\n",["$","p",null,{"children":["You can read more features on ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://reactrouter.com/docs/en/v6/getting-started/overview","children":"this blog post"}]," by ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://x.com/mjackson","children":"Michael Jackson"}],"."]}],"\n",["$","p",null,{"children":"Talking about building Private Route component it is the way by which we only allow the authenticated user to view the partuicular page by checking the user state, or the roles given to the user in the state."}],"\n",["$","h3",null,{"id":"before-v6","children":[["$","a",null,{"className":"anchor","href":"#before-v6","children":["$","span",null,{"className":"icon icon-link"}]}],"Before v6"]}],"\n",["$","p",null,{"children":["Before react router v6 the common way to build the ",["$","code",null,{"children":"PrivateRoute"}]," component by utilizing the ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#render-func","children":"render-props"}]," pattern. If you are building apps with react this might be the standard way of creating PrivateRoute pattern :"]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// PrivateRoute.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Redirect"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"RouteProps"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-redux\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"interface"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"extends"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"RouteProps"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"component"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"any"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"FC"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"> "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"auth"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"auth"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"); "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// get auth state"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"auth"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"component"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Component"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", ..."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"rest"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"..."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"rest"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"render"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"?"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Loading...</"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        ) "}],["$","span",null,{"style":{"color":"#C678DD"},"children":":"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"?"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Component"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"..."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"props"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        ) "}],["$","span",null,{"style":{"color":"#C678DD"},"children":":"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Redirect"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"to"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"{ "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"pathname"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/login\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"props"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"location"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } }"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        )"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    />"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","h3",null,{"id":"react-router-v6","children":[["$","a",null,{"className":"anchor","href":"#react-router-v6","children":["$","span",null,{"className":"icon icon-link"}]}],"React router v6"]}],"\n",["$","p",null,{"children":"Although there wasn't anything wrong with that approach but something was missing with it, may be render props pattern looks quite unusual after moving to hooks based pattern??, I don't know....."}],"\n",["$","p",null,{"children":"Let's see how we can modify above component and how easy it is to build the Private Route component:"}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// PrivateRoute.tsx in v6"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-redux\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Navigate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useLocation"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ({ "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }: { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"JSX"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Element"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }) "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"let"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"location"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useLocation"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"auth"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"if"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Checking authenticaton..</"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"if"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"!"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Navigate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"to"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/login\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"{ "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"location"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["I hope looking at the code you may have already understand it, it is as simple. You just create create a component named ",["$","code",null,{"children":"PrivateRoute"}]," which receives the children prop. Inside the ",["$","code",null,{"children":"PrivateRoute"}]," component we check if user if logged in or not using ",["$","code",null,{"children":"isAuthenticated"}]," state that we've created in",["$","code",null,{"children":"react-redux"}],"store, but you can use any state maangement solution that may be contexts, or your custom hooks to check the user auth state. Now, if user ",["$","code",null,{"children":"isAuthenticated === false"}]," Navigate to ",["$","code",null,{"children":"/login"}]," path else render the component inside it. Btw we are checking ",["$","code",null,{"children":"loading"}]," state so that user doesn't see blank screen while checking authentication."]}],"\n",["$","p",null,{"children":["Everything is simple except you amy be confused on props like element or Navigate that doesn't used to be there on v5. Check this ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://reactrouter.com/docs/en/v6/upgrading/v5","children":"blog"}]," about new api changes."]}],"\n",["$","h4",null,{"id":"how-to-use-it-","children":[["$","a",null,{"className":"anchor","href":"#how-to-use-it-","children":["$","span",null,{"className":"icon icon-link"}]}],"How to use it ?"]}],"\n",["$","p",null,{"children":["Go to your App or the component where you manage your routes and use PrivateRoute component instead of normal ",["$","code",null,{"children":"Route"}]," component."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// App.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"CreateAccount"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Dashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Home"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Login"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"NotFound"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"sections\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./PrivateRoute\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"/**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" * Top level application router"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#C678DD","fontStyle":"italic"},"children":"@returns"}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B","fontStyle":"italic"},"children":"{Component}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"App"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Home"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/create-account\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"CreateAccount"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/login\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Login"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"/* Private Route */"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/dashboard\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"StudentDashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"*\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"NotFound"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":["Here, you simply as protect the ",["$","code",null,{"children":"Dashboard"}]," by wrapping the component with ",["$","code",null,{"children":"PrivateRoute"}]," inside of element."]}],"\n",["$","p",null,{"children":["Don't forget to wrap your ",["$","code",null,{"children":"App"}]," component with BrowserRouter in your ",["$","code",null,{"children":"index.tsx"}]," file."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// index.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"React"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"ReactDOM"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"App"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./App\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reportWebVitals"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./reportWebVitals\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"BrowserRouter"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E5C07B"},"children":"ReactDOM"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"render"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"BrowserRouter"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"React.StrictMode"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"App"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"React.StrictMode"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"BrowserRouter"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"document"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"getElementById"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"root\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"),"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]}]]}]}]}],"\n",["$","p",null,{"children":"If you only want protected route without role based authorization then that's it."}],"\n",["$","p",null,{"children":"But... what about cehecking the role of user and redirecting to particular dashboard. Then welcome to second part of blog."}],"\n",["$","h3",null,{"id":"role-based-authentication","children":[["$","a",null,{"className":"anchor","href":"#role-based-authentication","children":["$","span",null,{"className":"icon icon-link"}]}],"Role based Authentication"]}],"\n",["$","p",null,{"children":["First create file named ",["$","code",null,{"children":"roles.ts"}]," where we can define the enum of roles and can use it everywhere."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"ts","data-theme":"default","children":["$","code",null,{"data-language":"ts","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"enum"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"ROLE"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Admin"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"Admin\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"User"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"User\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}"}]}]]}]}]}],"\n",["$","p",null,{"children":["Secondly, lets modify our ",["$","code",null,{"children":"PrivateRoute"}]," component which checks what type of user it is."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// PrivateRoute.tsx"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"ROLE"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./roles\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-redux\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Navigate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useLocation"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"roles"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}: {"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"JSX"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Element"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"roles"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Array"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Role"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"}) "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"let"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"location"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useLocation"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"user"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"auth"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"if"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75"},"children":"loading"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"className"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"container\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">Checking auth..</"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"p"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"userHasRequiredRole"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"user"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"&&"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"roles"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"includes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"user"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"role"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"?"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"true"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":":"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"false"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"if"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"!"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Navigate"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"to"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/login\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"{ "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"location"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" }"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"if"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}],["$","span",null,{"style":{"color":"#E06C75"},"children":"isAuthenticated"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"&&"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"!"}],["$","span",null,{"style":{"color":"#E06C75"},"children":"userHasRequiredRole"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"AccessDenied"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />; "}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// build your won access denied page (sth like 404)"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  }"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"children"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":"Everything is same as above, except the props we receive :"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","code",null,{"children":"roles"}]," : takes the array of roles which user role should be authorized."]}],"\n"]}],"\n",["$","p",null,{"children":["In PrivateRoute we check the ",["$","code",null,{"children":"user"}]," from redux store which has roles within it. Then we check\r\npassed ",["$","code",null,{"children":"roles"}]," contains/includes the ",["$","code",null,{"children":"user.role"}]," and store it in ",["$","code",null,{"children":"requiredRoles"}]," variable."]}],"\n",["$","p",null,{"children":"Now we have three points to consider :"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["If user isn't authenticated redirected to ",["$","code",null,{"children":"login"}]," page."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":["If user is authenticated but doesn't have required role specified then render ",["$","code",null,{"children":"AccessDenied"}]," page."]}],"\n"]}],"\n",["$","li",null,{"children":["\n",["$","p",null,{"children":"Else render the children component."}],"\n"]}],"\n"]}],"\n",["$","p",null,{"children":["Note : We have to create ",["$","code",null,{"children":"AccessDenied"}]," page manually to show if the user isn't authorized to view certain page. Example, student trying to see teacher dashboard and so on. I've created one Access Denied page using Ant Design ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/adarshaacharya/MentorLabs/blob/main/client/src/sections/AccessDenied/index.tsx","children":"you can check here"}],"."]}],"\n",["$","p",null,{"children":"In App component we pass the required roles for each component:"}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"tsx","data-theme":"default","children":["$","code",null,{"data-language":"tsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"ROLE"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./roles\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-router-dom\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"CreateAccount"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Home"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Login"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"NotFound"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"AdminDashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"UserDashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"} "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"sections\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"./PrivateRoute\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"/**"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" * Top level application router"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" *"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" * "}],["$","span",null,{"style":{"color":"#C678DD","fontStyle":"italic"},"children":"@returns"}],["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B","fontStyle":"italic"},"children":"{Component}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":" */"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"Router"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Home"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"/create-account\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"CreateAccount"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"login\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Login"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"admin-dashboard\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"roles"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Role"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"Admin"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"AdminDashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"user-dashboard\""}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"roles"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Role"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"User"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"UserDashboard"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"PrivateRoute"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      <"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Route"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"path"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"*\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66","fontStyle":"italic"},"children":"element"}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#C678DD"},"children":"{"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"<"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"NotFound"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}],["$","span",null,{"style":{"color":"#C678DD"},"children":"}"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" />"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    </"}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"Routes"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":">"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":"Now user isn't only authenticated but also they are authorized with right to view that particular page that too using new react-router v6. 👍"}],"\n",["$","p",null,{"children":["Here's the simple example of how to leverage react router v6 while creating the authenticated routes. If you want example on big project then checkout my project ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://github.com/adarshaacharya/MentorLabs","children":"MentorLabs"}],". THe project structure may be different from the above example but can be good example how to leverage it in fairly large project."]}],"\n",["$","p",null,{"children":["Also, if you face any problem in setting up above feature on your project comment down below or you can directly message me on twiiter via : ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://x.com/adarsha_ach","children":"@adarsha_ach"}]]}],"\n",["$","p",null,{"children":"Thanks !"}],"\n",["$","h3",null,{"id":"more-resources","children":[["$","a",null,{"className":"anchor","href":"#more-resources","children":["$","span",null,{"className":"icon icon-link"}]}],"More resources:"]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://reactrouter.com/docs/en/v6/examples/auth","children":"React Router Authentication"}]}],"\n",["$","li",null,{"children":["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://dev.to/reactpodcast/85-michael-jackson-on-react-router-v6-and-empathy-in-open-source","children":"Michael Jackson on React Router v6 and Empathy in Open Source\r\n"}]}],"\n"]}]]}],["$","$L10",null,{}]]]}]
a:null