What is preferred way to show DOM elements conditioned on firebase authentication

Question

I'm trying to build a small web-page where sign-in is controlled by Firebase Google Auth and is popped up with profile page. What is the secured and preferred way to show the profile page?

Currently I am using onAuthStateChanged to manipulate particular div which holds profile data when user is signed-in. If the user is not logged in I am using removeChild() method to remove that div from DOM and when logged in appendChild() adds back the div.

Answer 1

Supposing you're using firebase's native firebase.auth().onAuthStateChanged function

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

As well as firebase.auth().currentUser to check if the user is currently logged in or not.

In that case, it's perfectly fine to use removeChild and appendChild and they do not hold any security threats, as if a user is not logged, after a page refresh all of the information will vanish.

Here's a small firebase application that shows that when the connection to the firebase is closed and removeChild is used, appendChild stops working as firebase is disconnected, thus proving the point that it's safe to use.

https://jsfiddle.net/vh9xay6e/

Note that in this example I'm not testing any authentification, just the use of firebase with removeChild and appendChild.

You can see that once the connection to Firebase is over, nothing on the frontend side can happen to change that.