Currently, I am working on a Firebase application where I am facing an issue regarding persisting user data in the DOM. When a user logs in, their username and email are displayed appropriately. However, upon refreshing the page, this data disappears from the DOM.
<div class="item">
{{::userDisplayInfo.name}}
</div>
<div class="item">
{{::userDisplayInfo.email}}
</div>
Below is the JavaScript code snippet:
$scope.signIn = function (user) {
auth.$authWithPassword({
email: user.email,
password: user.pwdForLogin
}).then(function (authData) {
ref.child("users").child(authData.uid).once('value', function (snapshot) {
var val = snapshot.val();
$scope.$apply(function () {
$rootScope.name = val;
$scope.userDisplayInfo.name = $rootScope.name.displayName;
$scope.userDisplayInfo.email = $rootScope.name.email;
});
console.log(user);
});
}).catch(function (error) {
console.log(error);
});
};
Can you suggest how to ensure that the user and email information persists in the DOM even after refreshing the page?