What is protected Routing
Protected routes are routes that can only be accessed when a certain condition is met. Commonly those conditions are
- If the user is authenticated or not
- If the user session is expired or not.
Why do we need protected Routing
We need protected routing to protect certain page from the user that don’t have the access to view that page.
For Example
we have a route /home/profile and on this page a user can preform some actions that can change the data. If this page is accessible to all then the data on this page is no longer secure. To address this issues protected routes come into play.
Lets get our hands dirty
Lets dive into a coding example to better understand what protected routing is.
We are going to build a new react project with npx
Run the below code in the terminal and it will create a new react project.
npx create-react-app protected-route-example
learn more about how to setup a new react project
https://reactjs.org/docs/create-a-new-react-app.html
Navigate to the project that we just created by running the command in the terminal or you can also navigate to the project using the GUI
cd protected-route-example
Get rid of the boilerplate code from App.js that is generated by the npx create-react-app
After refactoring the App.js should look like this
function App() {
return (
<div>
</div>
);
}
export default App;
We are now ready to setup the routes for our project
Install react-router-dom
npm install react-router-dom
want to read more about react-router-dom https://reactrouter.com/docs/en/v6
After install the package lets setup a container/navbar that will contain all the visual links to go to our routes
create a file called navbar.js
Add the following code in navbar.js
import React from 'react';
import { Link } from 'react-router-dom';
export default function () {
return (
<div style={{display: 'flex', flexDirection:'column',justifyContent: 'center'}}>
<Link to="/home" >Home</Link>
<Link to="/dashboard" >Dashboard</Link>
<Link to="/contact-us" >Contact us</Link>
</div>
)
}
want to read more about Link https://reactrouter.com/docs/en/v6/components/link
Now lets define our routes and also render navbar in app.js file.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'
function App() {
return (
<BrowserRouter>
<Navbar/>
<Routes>
<Route
path="/home"
element={<Home/>}
/>
<Route
path="/contact-us"
element={<ContactUs/>}
/>
<Route
path="/dashboard"
element={<Dashboard/>}
/>
</Routes>
</BrowserRouter>
);
}
export default App;
create home.js, contactus.js and dashboard.js
home.js
export default function Home(){
return(
<h1>Home</h1>
)
}
contactus.js
export default function ContactUs(){
return(
<h1>Contact Us</h1>
)
}
dashboard.js
export default function Dashboard(){
return(
<h1>Dashboard</h1>
)
}
Setup Protected Route
Now lets setup a route that is protect. We are going to use react's useState hook to set if the user is logged in or not.
Learn more about react hooks here https://reactjs.org/docs/hooks-intro.html
Setup fake authentication
we are going to setup a fake authentication process that is going to tell us if the user is logged in or not.
***you can update it according to your usecse
Update the app.js file
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'
import { useState } from "react";
function App() {
const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
return (
<BrowserRouter>
<Navbar/>
{
isUserLoggedIn?
<button onClick={()=>setIsUserLoggedIn(false)}>Log out</button>:
<button onClick={()=>setIsUserLoggedIn(true)}>Log In</button>
}
<Routes>
<Route
path="/home"
element={<Home/>}
/>
<Route
path="/contact-us"
element={<ContactUs/>}
/>
<Route
path="/dashboard"
element={<Dashboard/>}
/>
</Routes>
</BrowserRouter>
);
}
export default App;
Now lets create a protected route component that is going to determine weather the user has access to view the protected page or not.
create a file ProtectedRoute.js
ProtectedRoute.js
import { Navigate } from "react-router-dom";
export default function ProtectedRoute({isUserLoggedIn,children}) {
if(!isUserLoggedIn) return <Navigate to="/"/>
return children
}
Now use the protectedRoute component to those Routes that you want to protect
Update the route that you want to protect
<Route
path="/dashboard"
element={
<ProtectedRoute isUserLoggedIn={isUserLoggedIn}>
<Dashboard/>
</ProtectedRoute>
}
/>
update the app.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'
import { useState } from "react";
import ProtectedRoute from "./protectedRoute";
function App() {
const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
return (
<BrowserRouter>
<Navbar/>
{
isUserLoggedIn?
<button onClick={()=>setIsUserLoggedIn(false)}>Log out</button>:
<button onClick={()=>setIsUserLoggedIn(true)}>Log In</button>
}
<Routes>
<Route
path="/home"
element={<Home/>}
/>
<Route
path="/contact-us"
element={<ContactUs/>}
/>
<Route
path="/dashboard"
element={
<ProtectedRoute isUserLoggedIn={isUserLoggedIn}>
<Dashboard/>
</ProtectedRoute>
}
/>
</Routes>
</BrowserRouter>
);
}
export default App;
Now the dashboard route is protected and is only accessible to the user who are logged in.
Conclusion
Did you guys find the method that I have listed above useful. If you have any suggestion leave them in the comments.
That it for this blog. Thank you for reading.
That's all from me! Bye!
Top comments (0)