CODEWITHSUNDEEP
javascriptfirebasefirebase-authenticationserver-sideclient-side
Jarnu Girdhar
Jarnu Girdhar

Reputation: 98

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

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.

Upvotes: 5

Views: 234

Answers (3)

Karthik S
Karthik S

Reputation: 147

try to wire around your code by: var userCurrent = firebase.auth().currentUser; in a function.

NOTE: Make sure you need to be sure first you signed in (as its an async operation), followed by the update user data as:

       var authenticationRef = firebase.auth();
    authenticationRef.onAuthStateChanged(function(user) {
        if (user) {
            console.log('onAuthStateChanged : '+user.displayName);
            _updateUser();
        } else {
            console.log('Not login');
        }
    });

    fucntion _updateUser(){
      var userCurrent = firebase.auth().currentUser;
        userCurrent.updateProfile({
        displayName: "Karthik.S",
      }).then(function() {
        var displayName = userCurrent.displayName;
      }, function(error) {

      });
  }

Upvotes: 0

Ransaka Ravihara
Ransaka Ravihara

Reputation: 1994

Using onAuthStateChanged method we can act upon state change (sign in or Sign out)

As an example :

firebase.auth().onAuthStateChanged(user=>{ 
  if(user){
    document.getElementById("id").classList.remove('hide')
    //this will populate your class which associate with above id.
  } else{
    document.getElementById("id_of_your_div").classList.add('hide')
  }
})

I think it's okay to use removeChild and appendChild method based on firebase auth state changes in your application.

Upvotes: 0

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

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.

Upvotes: 1

Related Questions