Search code examples
javascriptangularjsangularjs-scopefirebase-realtime-databasefirebase-authentication

angularjs firebase login scope value is not available after refresh


I have my pseudonym in the $scope and I try to access it from other views after the user has logged in, using:
however, when I refresh the page immediately after the user has successfully signed in, the $scope value reverts back into {{pseudonym}} and the parameter isn't available. How can I save this data persistently throughout the logged in session?
Can you please provide the answer with an example?

app.controller("MyregisterCtrl", ["$scope", "$stateParams", "Auth", "$state", "$location", "$modal", "DatabaseRef", "$rootScope",
    function ($scope, $stateParams, Auth, $state, $location, $modal, DatabaseRef, $rootScope) {   
        $scope.user = {};
        $scope.signIn = function () {
            if (!$scope.user.email && !$scope.user.password) {
                toastr.error("Add email and password");
            } else {
                Auth.$signInWithEmailAndPassword($scope.user.email, $scope.user.password)
                    .then(function(firebaseUser) {

                        var userId = firebase.auth().currentUser.uid;
                        DatabaseRef.ref('/users/' + userId).once('value')
                            .then(function(snapshot) {
                                pseudonym = snapshot.val().pseudonym;
                                console.log("pseudonym: ", pseudonym);
                                $scope.pseudonym = pseudonym;
                            });
                        $state.go('app.dashboard');

                        if (!firebaseUser.emailVerified) {
                            // firebaseUser.sendEmailVerification();
                            toastr.info('Your email is NOT verified.', 'Verify email!');
                            $state.go('login.signin');
                        }
                        // $state.go('home');
                    })
                    .catch(function(error) {
                        toastr.error(error.message, error.reason, { timeOut: 10000 });
                        $scope.user = {};
                    })
            }
        };

Solution

  • You should use a Service to store the value and retrieve it whenever you need.

    var myApp = angular.module('myApp',[]);
    myApp.service('mySingleton', function() {
        var username= "test";
        return {
            username : username
        };
    });
    
    function MyCtrl($scope, mySingleton) {
        $scope.username= mySingleton.username;
    }
    
    function MyCtrl2($scope, mySingleton) {
        $scope.username= mySingleton.username;
    }