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.

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

  1. Since you’re not using PHP, I think the best option for you is:

    • When the document is ready, clone the element you want to hide (element.cloneNode(true))
    • Delete the actual element
    • When you want it to appear again, just append the cloned element to the parent node.

    With this, it won’t appear in the DOM tree and you still can add it later.

    Here’s an example:
    Example of the solution

    But if you are developing a Single Page Application (SPA), I recommend you to use a framework (like Vue, React). It solves both of your problems and improve the execution and developing of the app.

    Reply
  2. You need to know that the clientside/frontend is always a public thing. As you mentioned, if somebody just knows a bit about web development they could inspect and change things on the page. Simple answers to your questions are:

    1. Use server-rendered HTML
    2. Use protected routes (e.g. for Angular)
    Reply

Leave a Comment