Protected Routes In React
Tags: javascript, react, beginners, programming
Published: 2022-07-16 11:57:39

### 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!
<img width="100%" style="width:100%" src="https://media.giphy.com/media/vwvWkWVaoWFsxFXy9y/giphy.gif">