authenticationfirebasepolymerfirebase-authenticationdom-if

Dom-if by user role with polymer & firebase using firebase-auth and google as provider


I am trying to show a dom-if template only to some users, but I don't know how to do it. Here is a pseudocode of what I am trying to do:

 <template is="dom-if" if="{{user.isAdmin}}" restamp="true">
        <hr />
        <h1>Add new conference:</h1>
        <paper-input
        id="title"
        label="Título"
        type="text"
        name="title">
    </paper-input>
    <paper-fab id="saveFab" icon="cloud-upload" on-tap="add"></paper-fab>
</template>
<script>
        Polymer({
            is: 'my-conferences',
            properties: {
                data: Array,
                user: Object,
            },

...

Where "user" is the object that I got from the <firebase-auth> element. Something like user.isAdmin is what I would like to achieve.

Any ideas? Thank you!


Solution

  • here is a way you could do this.

    1. Create a users record on you firebase with the same id.

    then:

        <firebase-auth id="auth" provider="google" user="{{auth}}" on-error="showError">
    </firebase-auth>
    
    <app-user
        uid="[[auth.uid]]"
        user="{{user}}"></app-user>
    

    App user element is

    <script>
        (function() {
            'use strict';
            Polymer({
                is: 'app-user',
    
                properties: {
                    uid: {
                        type: String,
                        reflectToAttribute: true,
                        notify: true,
                        observer: '_uidChanged'
                    },
                    user: {
                        type: Object,
                        value: null,
                        notify: true
                    }
                },
    
                _uidChanged: function (uid) {
    
                    if (this.uid) {
                        firebase.database().ref('/users/' + uid).once('value', function(snapshot) {
                            if (snapshot.val()) {
                                this.user = snapshot.val();
                            }
                        }.bind(this));
    
                    }
                }
            });
        })();
    </script>
    

    let me know if you need more help.