Should I protect UI in web application?

Question

We have a web application with Rich Client Architecture. We use React for our client side and Java/Spring for our back-end.

Now the question is should login page be a part of our react program or not? As I know, if we do so, the downsides are:

• The UI is not protected and everyone, even those without any access, can download the whole UI app.
• Everyone, even without access must download the whole UI application before logging in.

And the upsides are:

• The page need not to be refreshed when someone logeed in.
• Front-end and back-end parts can be totally separated without any shared sessions.

In most known apps such as gmail, slack, etc. the rich client app (angular, react, etc.) is just after logging in and I just don't know any application with the first approach.

Answer 1

1. Frontend is generally not protected. There are potential ways to make it harder to brake code, but it will be always possible.
2. Because of 1 -> you should not keep any sensitive data in frontend.
3. As an secured way of transfering data from Spring backend to React(or any other like Angular,VueJS etc) you should probably use JWT or OAuth2.
4. You can decode your JWT on frontend (but only backend can verify if it is valid token so don't worry) to get encoded scopes,roles etc to use them e.g. to show admin only options.
5. To answer your question - login page definitely can be part of React app, as it will send login credentials and get back JWT from backend
6. When user is logged in - you will attach JWT in headers with every request, so your Spring Security can check it and authorize request.