How to hide a part of html unless the user has logged in?

I have been making a web app using JS, CSS and HTML and for the authentication part I am integrating the app with firebase.

The problem is, on the login page, if you inspect the app, the actual app’s display property is just set to none unless firebase logs the user in. But anyone with a bit of knowledge about how these things work can simply go and set display = block.

I have been thinking about taking the login form at a different URL (example.com/signup) and the after the authentication is successful it will redirect to the app (example.com/app).

The questions I have:

  1. How to remove the HTML temporarily
  2. How to prevent a not-signed in user to access example.com/app?

If you have a better approach for doing this, I am open to all of them.

13 thoughts on “How to hide a part of html unless the user has logged in?”

Leave a Comment