HTML Authentication with Firebase, Hiding HTML Content for Not Logged In Users

Question

I have a basic firebase powered index file, which I login and sign out user. At the very first step, there is a login dialog box coming the screen. If my user not logged in, the main index page is not visible. I am hiding the main content with css like below.

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 800;
display: flex;
justify-content: center;
align-items: center;

But, I can not figure out. It's not secure. Because there is the content which I want to hide at my main index file. If someone who knows html basics, he can see the content at the browser dev tools.

Is there a secure way to encrypt or hide this content for not logged in users?

Answer 1

Sensitive content that should only be shared with trusted entities must be controlled on the server (or other trusted environment, such as Firebase Cloud Functions). Only after authentication and authorization would sensitive content be sent to a client (and then only over HTTPS).

For non-sensitive content (such as user interface components), then it is okay to use CSS to show/hide based on the user's authentication status.