[{"data":1,"prerenderedAt":173},["ShallowReactive",2],{"/2025/12/20-react-router-conditional-protected-route":3},{"id":4,"title":5,"body":6,"date":164,"description":68,"extension":165,"meta":166,"navigation":167,"path":168,"robots":169,"seo":170,"stem":171,"__hash__":172},"posts/2025/12/20 react-router-conditional-protected-route.md","20 React Router Conditional Protected Route",{"type":7,"value":8,"toc":161},"minimark",[9,18,21,34,36,51,53,56,69,71,81,83,86,94,97,105,107,115,117,120,122,135,137,140,148,150,153],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"react-router-conditional-protected-route","React Router Conditional Protected Route",[19,20],"br",{},[22,23,24,25,33],"p",{},"I'm using ",[26,27,32],"code",{"className":28},[29,30,31],"bg-gray-200","p-2","rounded","react-oidc-context"," package for my app. And so far, all routes on my app is protected. However, I need to let some routes to not require authentication. I can't find much documentation on how to do that on React Router v7 Framework mode. So, I start with gathering all relevant information.",[19,35],{},[22,37,38,39,50],{},"To protect a route using react-oidc-context is by providing the component that we want to protect (",[40,41,44],"span",{"className":42},[43],"text-blue-600",[45,46,47],"a",{"href":47,"rel":48},"https://github.com/authts/react-oidc-context?tab=readme-ov-file#protect-a-route",[49],"nofollow",").",[19,52],{},[22,54,55],{},"However, the Framework mode of React Router v7 route config is made up of strings, so I can't just do something like:",[57,58,59],"code-block",{},[60,61,66],"pre",{"className":62,"code":64,"language":65},[63],"language-text","route('/some-route', withAuthenticationRequired('path-to-file'))\n","text",[26,67,64],{"__ignoreMap":68},"",[19,70],{},[22,72,73,74,80],{},"Back in React Router v6, since I was using either Data or Declarative mode, I can just create AuthenticationGuard component and apply it on the route itself similar to this ",[45,75,79],{"href":76,"rel":77,"className":78},"https://developer.auth0.com/resources/guides/spa/react/basic-authentication#:~:text=the%20next%20section.-,Add%20Route%20Guards%20to%20React,-You%27ll%20create%20an",[49],[43],"Auth0 guide",". But obviously can't be applied to React Router v7 Framework mode.",[19,82],{},[22,84,85],{},"In my case, I want to protect a parent Layout component, so all the underlying routes will be protected as well. And I will put unprotected route outside of the protected Layout component. So, I went from:",[57,87,88],{},[60,89,92],{"className":90,"code":91,"language":65},[63],"export default withAuthenticationRequired(Outlet, {\n  OnRedirecting: () => (\u003Cdiv>Redirecting to the login page...\u003C/div>)\n})\n",[26,93,91],{"__ignoreMap":68},[22,95,96],{},"to",[57,98,99],{},[60,100,103],{"className":101,"code":102,"language":65},[63],"export default withAuthenticationRequired(Layout, {\n  OnRedirecting: () => (\u003Cdiv>Redirecting to the login page...\u003C/div>)\n})\n",[26,104,102],{"__ignoreMap":68},[19,106],{},[22,108,109,110,114],{},"The code above was in ",[26,111,113],{"className":112},[29,30,31],"root.tsx"," and it didn't work for me.",[19,116],{},[22,118,119],{},"And as a good keeping-up-with-the-tech engineer, I check with AI. The recommended way was to use middleware. I'm familar with middleware concept on .NET OWIN era, so it makes sense to me. As I explore it at this time, the middleware is still under testing for Framework mode and it is an opt-in only. In other words, it probably will change in the future, so I'd rather wait until it stabilize a bit more.",[19,121],{},[22,123,124,125,129,130,134],{},"Eventually, after more trials and errors, I got it working by moving the withAuthenticationRequired method from ",[26,126,128],{"className":127},[29,30,31],"root.tsx file"," to ",[26,131,133],{"className":132},[29,30,31],"Layout.tsx"," file.",[19,136],{},[22,138,139],{},"My route looks like the following:",[57,141,142],{},[60,143,146],{"className":144,"code":145,"language":65},[63],"export default [\n  layout('./routes/layout.tsx', [\n    route(\"protected\", \"./routes/protected.tsx\")\n  ]),\n  route(\"unprotected\", \"./routes/unprotected.tsx\")  \n] satisfies RouteConfig;\n",[26,147,145],{"__ignoreMap":68},[19,149],{},[22,151,152],{},"And my Layout.tsx:",[57,154,155],{},[60,156,159],{"className":157,"code":158,"language":65},[63],"const Layout = () => {\n...\n}\n\nexport default withAuthenticationRequired(Layout, {\n  OnRedirecting: () => (\u003Cdiv>Redirecting to the login page...\u003C/div>)\n})\n",[26,160,158],{"__ignoreMap":68},{"title":68,"searchDepth":162,"depth":162,"links":163},2,[],"2025-12-20T00:00:00.000Z","md",{},true,"/2025/12/20-react-router-conditional-protected-route",null,{"title":5,"description":68},"2025/12/20 react-router-conditional-protected-route","XGCBv8sYsWWYwckzZtAgOHMYICrUX0DgQtzN0Ot4KrY",1785167452091]