0

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.

Donnald Cucharo
  • 3,866
  • 1
  • 10
  • 17
Abhishek Sharma
  • 1
  • 1
  • did you try "display: none". it will help with your 1st question – Tharindu Lakshan Feb 18 '21 at 17:19
  • 1
    @TharinduLakshan No it won't. The OP is asking how to remove the HTML from the code displayed when examining the page's source code in the developer tools. Even HTML that is not visible on the page will be visible there. – Scott Marcus Feb 18 '21 at 17:25
  • 1
    @TharinduLakshan No it will not help. You can still [interact with it in the DOM](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone). – JW_ Feb 18 '21 at 17:26
  • Investigate the [Web Authentication API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#examples) - to understand how it all fits together. At the end of the Examples section there are several repositories that hold demo code for you to experiment with. Good Luck! – Randy Casburn Feb 18 '21 at 17:27

3 Answers3

0

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)
JW_
  • 652
  • 1
  • 8
  • 22
0

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.

Fábio Henriques
  • 1
  • 1
0

If you are using angular you can use protected routes like auth.

gaya3_96
  • 1