React SpringBoot Authentication – Part 3 (Protected Routes)

Learn how to protect React routes with SpringBoot authentication using an Auth Context, Protected Route component, and login/logout state management

TL;DR

• React SpringBoot Authentication can be managed across the React application using an Authentication Context.
• Create an AuthContext to share authentication state, login, and logout functions across components.
• Use a ProtectedRoute component to redirect unauthenticated users to the /login route.
• Wrap protected components such as the Product page with the ProtectedRoute component.
• Manage login and logout through the authentication context and navigate users to the appropriate routes.

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.

1. Create the Authentication Context
2. Create the Protected Route Component
3. Protect Some Routes Using Protected Route Component
4. Manage Login and Logout

 

1. Create the Authentication Context

To be able to manage authentication state across our application, we would use the useContext hook.

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.

The content of this file is given below:

import React, { createContext, useContext, useState } from 'react'

  const AuthContext = createContext();
  export const useAuth = () => useContext(AuthContext);
  export const AuthProvider = ({children}) => {

  const [isAuthenticated, setIsAuthenticated] = useState(() => {
    return localStorage.getItem('isAuthenticated') === true
  })

  const login = () => {
    setIsAuthenticated(true)
    localStorage.setItem('isAuthenticated', true)
  }

  const logout = () => {
    setIsAuthenticated(true)
    localStorage.setItem('isAuthenticated', false)
  }

  return (
    <AuthContext.Provider value={{isAuthenticated, login, logout}}>
        {children}
    </AuthContext.Provider>
  );
};

 

2. Create the Protected Route Component

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.

The ProtectedRoute component is given below:

const ProtectedRoute = ({children}) =>  {
  const {isAuthenticated} = useAuth();
  if(!isAuthenticated){
    return <Navigate to="/login"></Navigate>
  }else {
      return children;
  }
}
export default ProtectedRoute

What happens here is that we retrieve the isAuthenticated state from  from the context and if it is not set, we would navigate to the Login component, otherwise, we would return the protected routes.

We would then modify App component to protect some components.

 

3. Protect Some Routes Using Protected Route Component

We would now modify our base App component to use our AuthProvider and Protected Route.

So in our App component,  we would make two changes:

1. wrap the BrowserRouter inside the <AuthProvider> component
2. include Protected Route component

So to protect the Product component, you will have to wrap it into the <ProtectedRoute> component like so:

<Route path="/product" element={<ProtectedRoute><Product></Product> </ProtectedRoute>} />

 

4. Manage Login and Logout

The two functions for managing user login and logout are available in the context and we just need to call each as needed.

For Login:

In the Login component, at successful user login we just need to call the login function and the same for logout.

Import the useAuth hook as shown below:

import { useAuth } from './AuthContext';

 

Next, you need to call the login function just before you navigate to the loginSuccess page.

For Logout:

In the AppBar component, import the useAuth hook as before.

Then you can write the logout event handler:

const logoutUser = () => {
  logout()
  navigate("/login")
}

 

Finally, in the Logout button, invoke the logoutUser() event handler

FAQs

What is React SpringBoot Authentication?

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.

What is an Authentication Context in React?

The Authentication Context provides authentication state and login/logout functions to components throughout the React application using React’s useContext hook.

What is a Protected Route?

A Protected Route is a wrapper around a React route that checks whether the user is authenticated. Unauthenticated users are redirected to the /login route.

How do I protect a React route?

Wrap the component you want to protect with the ProtectedRoute component, for example, the Product route.

How are login and logout managed?

The login and logout functions are provided through the authentication context. Components can call these functions when the user successfully logs in or logs out.

Final Thoughts

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.

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.