How to protect reactjs resources with spring boot based authentiation?

Question

My current project state:

• I am working on a Web Application with ReactJs (frontend) and spring boot (backend).
• When I deploy this application, I package react code with my spring boot jar using gradle-node-plugin

Problem:

• I understand that I should serve all the resources that require authentication from the server. - However, I'm having a hard time understanding if there is a way to put certain components/routes of my react project behind the authentication API.
• An example is Google Docs, where Google does not let you create any new document (or even see the text canvas) without actually logging in.
• Currently only the data I'm loading from the database is protected under spring security, but I have a design tool written in Javascript in my react project, that I'd like to protect as well.
• Is this possible through spring security or should I just assume that everything under my react project can be accessed publicly?
• In other words how do I protect the javascript based UI only page, where you are not making any backend calls to get authentication information.

Thank you!

Answer 1

Call Authenticate API when the page loads to see if user's session is authenticated. I think spring security can do this. Based on the response, you can restrict the route.

<Route
      {...rest}
      render={({ location }) =>
        authenticateApiResponse.authenticated ? (
          <Redirect
            to={{
              pathname: "/profile",
              state: { from: location }
            }}
          />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />

Now user can only go to profile screen if he's authenticated by backend API.