{"id":1839,"date":"2024-09-21T12:00:00","date_gmt":"2024-09-21T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/?p=1839"},"modified":"2026-08-28T11:16:28","modified_gmt":"2026-08-28T09:16:28","slug":"react-springboot-authentication-part-3-protected-routes","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/react-springboot-authentication-part-3-protected-routes\/","title":{"rendered":"React SpringBoot Authentication \u2013 Part 3 (Protected Routes)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn how to protect React routes with SpringBoot authentication using an Auth Context, Protected Route component, and login\/logout state management<\/em><\/p>\n\n\n<h3 class=\"PDq2pG_selectionAnchorContainer\" data-section-id=\"79bmk3\" data-start=\"227\" data-end=\"236\">TL;DR<\/h3>\n<ul data-start=\"238\" data-end=\"755\">\n<li data-section-id=\"xiwqit\" data-start=\"238\" data-end=\"352\"><strong data-start=\"240\" data-end=\"275\">React SpringBoot Authentication<\/strong> can be managed across the React application using an Authentication Context.<\/li>\n<li data-section-id=\"1vxmj57\" data-start=\"353\" data-end=\"458\">Create an <strong data-start=\"365\" data-end=\"380\">AuthContext<\/strong> to share authentication state, login, and logout functions across components.<\/li>\n<li data-section-id=\"vfuv5q\" data-start=\"459\" data-end=\"552\">Use a <strong data-start=\"467\" data-end=\"485\">ProtectedRoute<\/strong> component to redirect unauthenticated users to the <code data-start=\"537\" data-end=\"545\">\/login<\/code> route.<\/li>\n<li data-section-id=\"pf0gkd\" data-start=\"553\" data-end=\"644\">Wrap protected components such as the Product page with the <strong data-start=\"615\" data-end=\"633\">ProtectedRoute<\/strong> component.<\/li>\n<li data-section-id=\"thnf09\" data-start=\"645\" data-end=\"755\">Manage <strong data-start=\"654\" data-end=\"674\">login and logout<\/strong> through the authentication context and navigate users to the appropriate routes.<\/li>\n<\/ul>\n<p>In this tutorial, you will learn how to protect some routes in your React application. We would create an Authentication Context and then we would create Protected Route component and use it to protect some routes n our application.<\/p>\n<ol>\n<li><a href=\"#t1\">Create the Authentication Context<\/a><\/li>\n<li><a href=\"#t2\">Create the Protected Route Component<\/a><\/li>\n<li><a href=\"#t3\">Protect Some Routes Using Protected Route Component<\/a><\/li>\n<li><a href=\"#t4\">Manage Login and Logout<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Create the Authentication Context<\/strong><\/h4>\n<p>To be able to manage authentication state across our application, we would use the useContext hook.<\/p>\n<p>You will need to create a file called AuthContext.js. In this file, you will create and export an Auth context as well as an AuthContext provider.<\/p>\n<p>The content of this file is given below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">import<\/span> React, { createContext, useContext, useState } from <span style=\"background-color: #fff0f0;\">'react'<\/span>\n\n  <span style=\"color: #008800; font-weight: bold;\">const<\/span> AuthContext <span style=\"color: #333333;\">=<\/span> createContext();\n  <span style=\"color: #008800; font-weight: bold;\">export<\/span> <span style=\"color: #008800; font-weight: bold;\">const<\/span> useAuth <span style=\"color: #333333;\">=<\/span> () <span style=\"color: #333333;\">=&gt;<\/span> useContext(AuthContext);\n  <span style=\"color: #008800; font-weight: bold;\">export<\/span> <span style=\"color: #008800; font-weight: bold;\">const<\/span> AuthProvider <span style=\"color: #333333;\">=<\/span> ({children}) <span style=\"color: #333333;\">=&gt;<\/span> {\n\n  <span style=\"color: #008800; font-weight: bold;\">const<\/span> [isAuthenticated, setIsAuthenticated] <span style=\"color: #333333;\">=<\/span> useState(() <span style=\"color: #333333;\">=&gt;<\/span> {\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> localStorage.getItem(<span style=\"background-color: #fff0f0;\">'isAuthenticated'<\/span>) <span style=\"color: #333333;\">===<\/span> <span style=\"color: #008800; font-weight: bold;\">true<\/span>\n  })\n\n  <span style=\"color: #008800; font-weight: bold;\">const<\/span> login <span style=\"color: #333333;\">=<\/span> () <span style=\"color: #333333;\">=&gt;<\/span> {\n    setIsAuthenticated(<span style=\"color: #008800; font-weight: bold;\">true<\/span>)\n    localStorage.setItem(<span style=\"background-color: #fff0f0;\">'isAuthenticated'<\/span>, <span style=\"color: #008800; font-weight: bold;\">true<\/span>)\n  }\n\n  <span style=\"color: #008800; font-weight: bold;\">const<\/span> logout <span style=\"color: #333333;\">=<\/span> () <span style=\"color: #333333;\">=&gt;<\/span> {\n    setIsAuthenticated(<span style=\"color: #008800; font-weight: bold;\">true<\/span>)\n    localStorage.setItem(<span style=\"background-color: #fff0f0;\">'isAuthenticated'<\/span>, <span style=\"color: #008800; font-weight: bold;\">false<\/span>)\n  }\n\n  <span style=\"color: #008800; font-weight: bold;\">return<\/span> (\n    <span style=\"color: #333333;\">&lt;<\/span>AuthContext.Provider value<span style=\"color: #333333;\">=<\/span>{{isAuthenticated, login, logout}}<span style=\"color: #333333;\">&gt;<\/span>\n        {children}\n    <span style=\"color: #333333;\">&lt;<\/span>\/AuthContext.Provider&gt;\n  );\n};\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Create the Protected Route Component<\/strong><\/h4>\n<p>To be able to protect some routes, we would need to have a wrapper around the Route component. The purpose would be to check whether a user is authenticated. If yes, the user is forwarded to the requested route, otherwise, he is redirected to the \/login route.<\/p>\n<p>The ProtectedRoute component is given below:<br \/><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">const<\/span> ProtectedRoute <span style=\"color: #333333;\">=<\/span> ({children}) <span style=\"color: #333333;\">=&gt;<\/span>  {\n  <span style=\"color: #008800; font-weight: bold;\">const<\/span> {isAuthenticated} <span style=\"color: #333333;\">=<\/span> useAuth();\n  <span style=\"color: #008800; font-weight: bold;\">if<\/span>(<span style=\"color: #333333;\">!<\/span>isAuthenticated){\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #333333;\">&lt;<\/span>Navigate to<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"\/login\"<\/span><span style=\"color: #333333;\">&gt;&lt;<\/span>\/Navigate&gt;\n  }<span style=\"color: #008800; font-weight: bold;\">else<\/span> {\n      <span style=\"color: #008800; font-weight: bold;\">return<\/span> children;\n  }\n}\n<span style=\"color: #008800; font-weight: bold;\">export<\/span> <span style=\"color: #008800; font-weight: bold;\">default<\/span> ProtectedRoute\n<\/pre>\n<p>What happens here is that we retrieve the isAuthenticated state from\u00a0 from the context and if it is not set, we would navigate to the Login component, otherwise, we would return the protected routes.<\/p>\n<p>We would then modify App component to protect some components.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Protect Some Routes Using Protected Route Component<\/strong><\/h4>\n<p>We would now modify our base App component to use our AuthProvider and Protected Route.<\/p>\n<p>So in our App component,\u00a0 we would make two changes:<\/p>\n<ol>\n<li>wrap the BrowserRouter inside the &lt;AuthProvider&gt; component<\/li>\n<li>include Protected Route component<\/li>\n<\/ol>\n<p>So to protect the Product component, you will have to wrap it into the &lt;ProtectedRoute&gt; component like so:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;Route<\/span> <span style=\"color: #0000cc;\">path=<\/span><span style=\"background-color: #fff0f0;\">\"\/product\"<\/span> <span style=\"color: #0000cc;\">element=<\/span><span style=\"background-color: #fff0f0;\">{&lt;ProtectedRoute<\/span><span style=\"color: #007700;\">&gt;&lt;Product&gt;&lt;\/Product&gt;<\/span> <span style=\"color: #007700;\">&lt;\/ProtectedRoute&gt;<\/span>} \/&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Manage Login and Logout<\/strong><\/h4>\n<p>The two functions for managing user login and logout are available in the context and we just need to call each as needed.<\/p>\n<p><strong>For Login:<\/strong><\/p>\n<p>In the Login component, at successful user login we just need to call the login function and the same for logout.<\/p>\n<p>Import the useAuth hook as shown below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">import<\/span> { useAuth } from <span style=\"background-color: #fff0f0;\">'.\/AuthContext'<\/span>;\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Next, you need to call the login function just before you navigate to the loginSuccess page.<\/p>\n<p><strong>For Logout:<\/strong><\/p>\n<p>In the AppBar component, import the useAuth hook as before.<\/p>\n<p>Then you can write the logout event handler:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">const<\/span> logoutUser <span style=\"color: #333333;\">=<\/span> () <span style=\"color: #333333;\">=&gt;<\/span> {\n  logout()\n  navigate(<span style=\"background-color: #fff0f0;\">\"\/login\"<\/span>)\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Finally, in the Logout button, invoke the logoutUser() event handler<\/p>\n<h3 class=\"PDq2pG_selectionAnchorContainer\" data-section-id=\"yn99c3\" data-start=\"757\" data-end=\"765\">FAQs<\/h3>\n<p data-start=\"767\" data-end=\"811\"><strong data-start=\"767\" data-end=\"811\">What is React SpringBoot Authentication?<\/strong><\/p>\n<p data-start=\"813\" data-end=\"980\">React SpringBoot Authentication in this tutorial uses an authentication context in React to manage whether a user is logged in and protect specific application routes.<\/p>\n<p data-start=\"982\" data-end=\"1029\"><strong data-start=\"982\" data-end=\"1029\">What is an Authentication Context in React?<\/strong><\/p>\n<p data-start=\"1031\" data-end=\"1194\">The Authentication Context provides authentication state and login\/logout functions to components throughout the React application using React&#8217;s <code data-start=\"1176\" data-end=\"1188\">useContext<\/code> hook.<\/p>\n<p data-start=\"1196\" data-end=\"1226\"><strong data-start=\"1196\" data-end=\"1226\">What is a Protected Route?<\/strong><\/p>\n<p data-start=\"1228\" data-end=\"1386\">A Protected Route is a wrapper around a React route that checks whether the user is authenticated. Unauthenticated users are redirected to the <code data-start=\"1371\" data-end=\"1379\">\/login<\/code> route.<\/p>\n<p data-start=\"1388\" data-end=\"1423\"><strong data-start=\"1388\" data-end=\"1423\">How do I protect a React route?<\/strong><\/p>\n<p data-start=\"1425\" data-end=\"1532\">Wrap the component you want to protect with the <code data-start=\"1473\" data-end=\"1489\">ProtectedRoute<\/code> component, for example, the Product route.<\/p>\n<p data-start=\"1534\" data-end=\"1571\"><strong data-start=\"1534\" data-end=\"1571\">How are login and logout managed?<\/strong><\/p>\n<p data-start=\"1573\" data-end=\"1740\">The <code data-start=\"1577\" data-end=\"1584\">login<\/code> and <code data-start=\"1589\" data-end=\"1597\">logout<\/code> functions are provided through the authentication context. Components can call these functions when the user successfully logs in or logs out.<\/p>\n<h3 class=\"PDq2pG_selectionAnchorContainer\" data-section-id=\"1gmogxw\" data-start=\"1742\" data-end=\"1760\">Final Thoughts<\/h3>\n<p data-start=\"1762\" data-end=\"2059\">Protecting routes is an important step when building a React application that works with a SpringBoot backend. By introducing an Authentication Context and a reusable Protected Route component, authentication state can be shared across the application while access to specific pages is controlled.<\/p>\n<p data-start=\"2061\" data-end=\"2365\" data-is-last-node=\"\" data-is-only-node=\"\">The approach keeps authentication logic separate from individual pages and makes it easier to protect additional routes as the application grows. Once this foundation is in place, you can extend it with more complete authentication flows, persistent sessions, and role- or privilege-based access control.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to protect React routes with SpringBoot authentication using an Auth Context, Protected Route component, and login\/logout state management<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1839","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1839"}],"version-history":[{"count":4,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839\/revisions"}],"predecessor-version":[{"id":2538,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839\/revisions\/2538"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}