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
<\/p>\n
To be able to manage authentication state across our application, we would use the useContext hook.<\/p>\n
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
The content of this file is given below:<\/p>\n
import<\/span> React, { createContext, useContext, useState } from 'react'<\/span>\r\n\r\n const<\/span> AuthContext =<\/span> createContext();\r\n export<\/span> const<\/span> useAuth =<\/span> () =><\/span> useContext(AuthContext);\r\n export<\/span> const<\/span> AuthProvider =<\/span> ({children}) =><\/span> {\r\n\r\n const<\/span> [isAuthenticated, setIsAuthenticated] =<\/span> useState(() =><\/span> {\r\n return<\/span> localStorage.getItem('isAuthenticated'<\/span>) ===<\/span> true<\/span>\r\n })\r\n\r\n const<\/span> login =<\/span> () =><\/span> {\r\n setIsAuthenticated(true<\/span>)\r\n localStorage.setItem('isAuthenticated'<\/span>, true<\/span>)\r\n }\r\n\r\n const<\/span> logout =<\/span> () =><\/span> {\r\n setIsAuthenticated(true<\/span>)\r\n localStorage.setItem('isAuthenticated'<\/span>, false<\/span>)\r\n }\r\n\r\n return<\/span> (\r\n <<\/span>AuthContext.Provider value=<\/span>{{isAuthenticated, login, logout}}><\/span>\r\n {children}\r\n <<\/span>\/AuthContext.Provider>\r\n );\r\n};\r\n<\/pre>\n <\/p>\n
2. Create the Protected Route Component<\/strong><\/h4>\nTo 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
The ProtectedRoute component is given below:
\n<\/p>\n
const<\/span> ProtectedRoute =<\/span> ({children}) =><\/span> {\r\n const<\/span> {isAuthenticated} =<\/span> useAuth();\r\n if<\/span>(!<\/span>isAuthenticated){\r\n return<\/span> <<\/span>Navigate to=<\/span>\"\/login\"<\/span>><<\/span>\/Navigate>\r\n }else<\/span> {\r\n return<\/span> children;\r\n }\r\n}\r\nexport<\/span> default<\/span> ProtectedRoute\r\n<\/pre>\nWhat 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
We would then modify App component to protect some components.<\/p>\n
<\/p>\n
3. Protect Some Routes Using Protected Route Component<\/strong><\/h4>\nWe would now modify our base App component to use our AuthProvider and Protected Route.<\/p>\n
So in our App component,\u00a0 we would make two changes:<\/p>\n
\n- wrap the BrowserRouter inside the <AuthProvider> component<\/li>\n
- include Protected Route component<\/li>\n<\/ol>\n
So to protect the Product component, you will have to wrap it into the <ProtectedRoute> component like so:<\/p>\n
<Route<\/span> path=<\/span>\"\/product\"<\/span> element=<\/span>{<ProtectedRoute<\/span>><Product><\/Product><\/span> <\/ProtectedRoute><\/span>} \/>\r\n<\/pre>\n <\/p>\n
4. Manage Login and Logout<\/strong><\/h4>\nThe two functions for managing user login and logout are available in the context and we just need to call each as needed.<\/p>\n
For Login:<\/strong><\/p>\nIn the Login component, at successful user login we just need to call the login function and the same for logout.<\/p>\n
Import the useAuth hook as shown below:<\/p>\n
import<\/span> { useAuth } from '.\/AuthContext'<\/span>;\r\n<\/pre>\n <\/p>\n
Next, you need to call the login function just before you navigate to the loginSuccess page.<\/p>\n
For Logout:<\/strong><\/p>\nIn the AppBar component, import the useAuth hook as before.<\/p>\n
Then you can write the logout event handler:<\/p>\n
const<\/span> logoutUser =<\/span> () =><\/span> {\r\n logout()\r\n navigate(\"\/login\"<\/span>)\r\n}\r\n<\/pre>\n <\/p>\n
Finally, in the Logout button, invoke the logoutUser() event handler<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[414],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839"}],"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":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839\/revisions"}],"predecessor-version":[{"id":1840,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1839\/revisions\/1840"}],"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}]}}