{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-set-up-private-routes-in-react/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n
Learn how to protect routes in React Router v6 in my blog post here.
\n

Before we start, please note that the post below uses React Router v5. If you are using React Router v6 (the latest version), check out my blog post in the aforementioned link. The process of protecting routes in React Router v6 is relatively simpler.

\n

We will learn how to protect routes based on the login status of a user by building a simple application.

\n

First, let's do a quick walk-through of the application.

\n

Home page

\n

This is the home page of the application.

\n

The header with navigation links is common across all pages.

\n

\n \n \n \n \n

\n

About page

\n

Clicking on the About link takes us to the About page.

\n

\n \n \n \n \n

\n

Blog page

\n

Clicking on the Blog link takes us to the Blog page.

\n

\n \n \n \n \n

\n

Secret page

\n

The secret page is protected, accessible only to logged in users. Therefore, when we click on the Secret link, we are redirected to the Login page.

\n

\n \n \n \n \n

\n

Once we successfully log in, we get access to the Secret page.

\n

We log out of the application by clicking on the Logout link.

\n

\n \n \n \n \n

\n

Login page

\n

We can also log in to the application using the Login link. On successful login, we are redirected to the home page.

\n

\n \n \n \n \n

\n

Now that we understand the key features of the application, let's go ahead and build it.

\n

Create a folder named react-private-routes on your desktop. Open the folder in VS Code or any other code editor of your choice.

\n

We will create a React project inside the folder using the following command:

\n
PS C:\\Users\\Delhivery\\Desktop\\react-private-routes> npx create-react-app .
\n

Then, we install the following packages.

\n
PS C:\\Users\\Delhivery\\Desktop\\react-private-routes> npm i react-router-dom formik yup bootstrap @reduxjs/toolkit react-redux
\n

react-router-dom: We will use the package for client-side routing.

\n

formik: We will build the login form using Formik.

\n

yup: We will use Yup for schema validation.

\n

bootstrap: We will use Bootstrap classes for styling - primarily for the styling of the login form.

\n

@reduxjs/toolkit: We will use Redux Toolkit for global state management.

\n

react-redux: We will use this package so that our React components can talk to the Redux store.

\n

We have installed all the packages we need.

\n

Next, we will import the Bootstrap minified CSS above the index.css import in the index.js file.

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById("root")\n);
\n

The Header component

\n

First, we will build the header component.

\n

Inside the src folder, create a folder named components and inside the components folder create a file named Header.js.

\n
src/components/Header.js
\n
import React from "react";\nimport { NavLink } from "react-router-dom";\n\nconst Header = () => {\n  return (\n    <header>\n      <nav>\n        <NavLink to="/about" activeStyle={{ color: "#F2F2F2" }}>\n          About\n        </NavLink>\n        <NavLink to="/blog" activeStyle={{ color: "#F2F2F2" }}>\n          Blog\n        </NavLink>\n        <NavLink to="/secret" activeStyle={{ color: "#F2F2F2" }}>\n          Secret\n        </NavLink>\n        <NavLink to="/login" activeStyle={{ color: "#F2F2F2" }}>\n          Login\n        </NavLink>\n      </nav>\n    </header>\n  );\n};\n\nexport default Header;
\n

Delete all the CSS rules inside the index.css file and add the following CSS.

\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n  font-family: sans-serif;\n}\n\n/* | Header Styling */\n\nheader {\n  width: 100%;\n  height: 6rem;\n  background-color: black;\n  color: lightgray;\n  display: flex;\n  align-items: center;\n  font-size: 1.6rem;\n  font-weight: 700;\n  padding: 2rem;\n}\n\n/* | End of Header Styling */\n\n/* | Link Styling */\n\na {\n  text-decoration: none;\n  outline: none;\n}\n\na:not(:last-child) {\n  margin-right: 2rem;\n}\n\na:link,\na:visited {\n  color: gray;\n}\n\na:hover {\n  color: white;\n}\n\na:active {\n  color: limegreen;\n}\n\n/* | End of Link Styling */
\n

The header is ready. Next, we will wrap the top level App component with the Router component from react-router-dom and render the Header component inside the App component.

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport { BrowserRouter as Router } from "react-router-dom";\n\nReactDOM.render(\n  <Router>\n    <App />\n  </Router>,\n  document.getElementById("root")\n);
\n
src/App.js
\n
import React from "react";\nimport Header from "./components/Header";\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n    </>\n  );\n};\n\nexport default App;
\n

Start the application by running the following command:

\n
C:\\Users\\Delhivery\\Desktop\\react-private-routes npm start
\n

Go to http://localhost:3000/ and you should see the header.

\n

\n \n \n

Having said that, the state management library that you use is not important here. The idea is to be able to track the login status of a user from a central location that can easily be accessed by the components, no matter how deep they are nested inside the React component tree.

\n

In the src folder, create a file named store.js.

\n
src/store.js
\n
import { configureStore } from "@reduxjs/toolkit";\n\nexport default configureStore({\n  reducer: {},\n});
\n

In the components folder, create a folder named global-state and inside the global-state folder, create a file named userStateSlice.js.

\n
src/components/global-state/userStateSlice.js
\n
import { createSlice } from "@reduxjs/toolkit";\n\nconst initialState = {\n  userLoggedIn: false,\n};\n\nexport const userStateSlice = createSlice({\n  name: "userState",\n  initialState,\n  reducers: {\n    updateUserStatus(state, action) {\n      state.userLoggedIn = action.payload;\n    },\n  },\n});\n\nexport const { updateUserStatus } = userStateSlice.actions;\n\nexport default userStateSlice.reducer;
\n

We will track the login status of a user through the value of the userLoggedIn key inside the initialState object. We have set the value of userLoggedIn to false. Meaning, the user is not logged in. Only after the user successfully logs in, we change the value of the userLoggedIn key from false to true.

\n

Next, we import the reducer in the store.js file and add it to the reducer object.

\n
src/store.js
\n
import { configureStore } from "@reduxjs/toolkit"\nimport userStateReducer from "./components/global-state/userStateSlice"\n\nexport default configureStore({\n  reducer: {\n    userState: userStateReducer,\n  },\n})
\n

We have to make sure all our React components can access the global store. Update the index.js file as follows:

\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport store from "./store";\nimport { Provider } from "react-redux";\nimport { BrowserRouter as Router } from "react-router-dom";\n\nReactDOM.render(\n  <Provider store={store}>\n    <Router>\n      <App />\n    </Router>\n  </Provider>,\n  document.getElementById("root")\n);
\n

Now that we have set up our Redux store, we will convert the /secret route from a public route to a private route..

\n

Create a PrivateRoute component

\n

Create a file named PrivateRoute.js inside the components folder.

\n
src/components/PrivateRoute.js
\n
import React from "react";\nimport { Route, Redirect } from "react-router-dom";\nimport { useSelector } from "react-redux";\n\nconst PrivateRoute = ({ children, ...rest }) => {\n  const { userLoggedIn } = useSelector((state) => state.userState);\n  return (\n    <Route\n      {...rest}\n      render={({ location }) =>\n        userLoggedIn ? (\n          children\n        ) : (\n          <Redirect to={{ pathname: "/login", state: { from: location } }} />\n        )\n      }\n    />\n  );\n};\n\nexport default PrivateRoute;
\n

We access the userLoggedIn key from the Redux store using the useSelector hook.

\n

The logic inside the PrivateRoute component goes like this: if the value of userLoggedIn is true(meaning the user is logged in), the user can access the component wrapped by the PrivateRoute component. Otherwise, we direct the user to the /login route, where we show a login form.

\n

The state: {from:location} portion of the code on line 14 is important to understand.

\n

Remember that there are two ways a user can log in to our application. (1) A user clicks on the login link in the header, fills up the login form using his/her login credentials. (2) A user can click on the Secret link in the header. Because the Secret page is private, i.e., the page is only accessible to logged in users, we redirect the user to the /login route and ask the user to log in.

\n

Now, the question is: where do we rediect the user to after the user successfully logs in to our application?

\n

In scenario 1, wherein the user logs in by directly clicking on the login link in the header, we will direct the user to the home page. In scenario 2, where the user logs in to our application by first trying to access the Secret page by clicking on the Secret link in the header, we should redirect the user to the Secret page, because thats the page the user was trying to access before we told him/her to login first.

\n

state: {from:location} helps us remember the location of the user so that we can redirect the user to the right path upon successful login.

\n

We have the PrivateRoute component ready. In order to protect the Secret page, all we need to do is to wrap the Secret component inside the App.js file with the PrivateRoute component.

\n

Update the App.js file as follows:

\n
src/App.js
\n
import React from "react";\nimport About from "./components/About";\nimport Blog from "./components/Blog";\nimport Login from "./components/Login";\nimport Secret from "./components/Secret";\nimport Header from "./components/Header";\nimport Home from "./components/Home";\nimport PrivateRoute from "./components/PrivateRoute";\nimport { Switch, Route, Redirect } from "react-router-dom";\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <main>\n        <Switch>\n          <Route path="/blog" component={Blog} />\n          <Route path="/about" component={About} />\n          <Route path="/login" component={Login} />\n          <PrivateRoute path="/secret">\n            <Route component={Secret} />\n          </PrivateRoute>\n          <Route path="/" component={Home} />\n          <Redirect to="/" />\n        </Switch>\n      </main>\n    </>\n  );\n};\n\nexport default App;
\n

Now if you click on the Secret link in the header, you will be redirected to the login page. We have successfully converted the /secret route from a public route to a private route.

\n

Now, let's take care of the login part. We will hard code the login credentials. A user must enter the following credentials to login to our application.

\n\n

When the user fills in the form using above-mentioned credentials and submits the form, we will send the updateUserStatus action creator to the Redux store. This will change the value of userLoggedIn from false to true, successfully logging in the user to the application.

\n

Update the Login.js file as follows:

\n
components/Login.js
\n
import React from "react";\nimport { useSelector, useDispatch } from "react-redux";\nimport {useHistory, useLocation} from "react-router-dom";\nimport { useFormik } from "formik";\nimport * as Yup from "yup";\nimport { updateUserStatus } from "./global-state/userStateSlice";\n\nconst LoginForm = () => {\n  const history = useHistory();\n\n  const location = useLocation();\n\n  const { userLoggedIn } = useSelector((state) => state.userState);\n\n  const dispatch = useDispatch();\n\n  const formik = useFormik({\n    initialValues: {\n      email: "",\n      password: "",\n    },\n    validationSchema: Yup.object({\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n      password: Yup.string().required("Please enter your password"),\n    }),\n    onSubmit: ({ email, password }) => {\n      if ((email = "hemanta@gmail.com" && password === "1234")) {\n        dispatch(updateUserStatus(true));\n      }\n    },\n  });\n\n  if (userLoggedIn) history.push(location.state ? location.state.from.pathname : "/");\n\n  return (\n    <div className="login-form-wrapper">\n      <div className="col-10 col-sm-6 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Login</h1>\n      </div>\n      <form onSubmit={formik.handleSubmit}>\n        <div className="form-group col-10 col-sm-6 col-md-5 mx-auto mt-5">\n          <label htmlFor="email">Email Address</label>\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="email"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.email}\n          />\n          {formik.touched.email && formik.errors.email ? (\n            <small className="form-text text-danger">\n              {formik.errors.email}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-6 col-md-5 mx-auto">\n          <label htmlFor="password">Password</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.password}\n          />\n          {formik.touched.password && formik.errors.password ? (\n            <small className="form-text text-danger">\n              {formik.errors.password}\n            </small>\n          ) : null}\n        </div>\n\n        <div className="col-10 col-sm-6 col-md-5 mx-auto">\n          <button\n            type="submit"\n            className="btn btn-lg btn-primary btn-block my-3"\n          >\n            Login\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n\nexport default LoginForm;
\n

Line 35: if userLoggedIn is true, we use JavaScript ternary operator to redirect the user to the location the user came from (before we asked him/her to log in), or to the home page.

\n

Once the user is logged in, instead of showing the Login link, we will show a Logout link.

\n

Update the Header.js file as follows:

\n
src/components/Header.js
\n
import React from "react";\nimport { NavLink, withRouter } from "react-router-dom";\nimport { useDispatch, useSelector } from "react-redux";\nimport { logout } from "./global-state/userStateSlice";\n\nconst Header = ({ history }) => {\n  const { userLoggedIn } = useSelector((state) => state.userState);\n\n  const dispatch = useDispatch();\n\n  const logoutHandler = () => {\n    dispatch(logout(false));\n    history.push("/");\n  };\n  return (\n    <header>\n      <nav>\n        <NavLink to="/about" activeStyle={{ color: "#F2F2F2" }}>\n          About\n        </NavLink>\n        <NavLink to="/blog" activeStyle={{ color: "#F2F2F2" }}>\n          Blog\n        </NavLink>\n        <NavLink to="/secret" activeStyle={{ color: "#F2F2F2" }}>\n          Secret\n        </NavLink>\n        {!userLoggedIn && (\n          <NavLink to="/login" activeStyle={{ color: "#F2F2F2" }}>\n            Login\n          </NavLink>\n        )}\n        {userLoggedIn ? (\n          <button className="btn btn-primary" onClick={logoutHandler}>\n            Logout\n          </button>\n        ) : null}\n      </nav>\n    </header>\n  );\n};\n\nexport default withRouter(Header);
\n

We have imported the logout action creator from the userStateSlice.js file. But we have not yet created the logout reducer. Let's update the userStateSlice.js file as follows:

\n
src/components/global-state/userStateSlice.js
\n
import { createSlice } from "@reduxjs/toolkit";\n\nconst initialState = {\n  userLoggedIn: false,\n};\n\nexport const userStateSlice = createSlice({\n  name: "userState",\n  initialState,\n  reducers: {\n    updateUserStatus(state, action) {\n      state.userLoggedIn = action.payload;\n    },\n\n    logout(state, action) {\n      state.userLoggedIn = action.payload;\n    },\n  },\n});\n\nexport const { updateUserStatus, logout } = userStateSlice.actions;\n\nexport default userStateSlice.reducer;
\n

Let's say you also want the Blog page to be a private page, only accessibel to logged in users. All you need to to do is to the wrap the Blog component in the App.js file with the PrivateRoute compoenent.

\n
src/App.js
\n
import React from "react";\nimport About from "./components/About";\nimport Blog from "./components/Blog";\nimport Login from "./components/Login";\nimport Secret from "./components/Secret";\nimport Header from "./components/Header";\nimport Home from "./components/Home";\nimport PrivateRoute from "./components/PrivateRoute";\nimport { Switch, Route, Redirect } from "react-router-dom";\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <main>\n        <Switch>\n          <PrivateRoute path="/blog">\n            <Route component={Blog} />\n          </PrivateRoute>\n          <Route path="/about" component={About} />\n          <Route path="/login" component={Login} />\n          <PrivateRoute path="/secret">\n            <Route component={Secret} />\n          </PrivateRoute>\n          <Route path="/" component={Home} />\n          <Redirect to="/" />\n        </Switch>\n      </main>\n    </>\n  );\n};\nexport default App;
\n

Now. when you click on the Blog link in the header, you will be redirected to the login page. If you log in successfully, you will be redirected to where you came from - the Blog page.

\n

That's about it. That's how you set up private routes in React.

\n","frontmatter":{"title":"How to Set Up Private Routes in React?","date":"2021-06-15"}}},"pageContext":{"slug":"/how-to-set-up-private-routes-in-react/","prev":{"fields":{"slug":"/sticky-footer-using-flexbox-and-grid/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/remove-duplicate-values-in-an-array-using-set-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}