CODEWITHSUNDEEP
polymerfirebase-authentication
Jan Beneš
Jan Beneš

Reputation: 722

signedIn property of domHost is false on ready function call

I want to check if the user is logged in on element creation and eventually redirect him if the user is not. The problem is that the domHost.signedIn property is false even though the user is signedIn. If I check the property later(for example when I call a function with button tap) the property is true as it should be.

Here is the code:

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="/bower_components/paper-button/paper-button.html">

<dom-module id="settings-view">
    <template>
        <style>
        </style>
        TODO: user settings
        <paper-button on-tap="debugFunction">button</paper-button>
    </template>

    <script>
        Polymer({
            is: 'settings-view',

            ready: function () {
                console.log(this.domHost.signedIn); // false
                console.log(this.domHost.user);  // null
            },

            debugFunction: function () {
                console.log(this.domHost.signedIn); // true
                console.log(this.domHost.user); // user object
            }
        });
    </script>
</dom-module>

What is the best way to check if the user is signedIn in child element? Would setting the signedIn value to iron-meta element be a better approach?

Thanks, Jan

Upvotes: 0

Views: 98

Answers (1)

JohnRiv
JohnRiv

Reputation: 306

You're better off declaring properties with observers on them. Observers will execute the function as soon as the property's value is something other than undefined. So your code will look like this:

<link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="/bower_components/paper-button/paper-button.html">

<dom-module id="settings-view">
    <template>
        <style>
        </style>
        TODO: user settings
    </template>

    <script>
        Polymer({
            is: 'settings-view',

            properties: {
                signedIn: {
                    type: Boolean,
                    observer: '_signedInChanged'
                },

                user: {
                    type: Object,
                    observer: '_userChanged'
                },
            },

            _signedInChanged: function (newSignedInValue) {
                console.log(newSignedInValue); // true
                console.log(this.signedIn); // true
            },

            _userChanged: function (newUserValue) {
                console.log(newUserValue); // user object
                console.log(this.user); // user object
            }
        });
    </script>
</dom-module>

Then when you update those signedIn and user values through JavaScript or data binding, the observers will call the associated functions.

Upvotes: 2

Related Questions