How to update firebase-query after user login

Question

Using polymer and firebase I have some data that is only accessible by logged users. But, when the user login in the application the data isn't automatically updated.

An easily workaround is force the page reload with location.reload(). But, I'm trying to discover how to update these values without having to reload the entire application. Any ideas?

Expected outcome:

When user logins all fibase-document and firebase-query updates the synced data.

Actual outcome:

These elements doesn't update and the user has to reload the page

Example:

Element: app-auth.html

<firebase-app
  id="firebaseApp"
  auth-domain="app.firebaseapp.com"
  database-url="https://app.firebaseio.com"
  storage-bucket="app.appspot.com"
  api-key="api"
  messaging-sender-id="id"
 ></firebase-app>

<firebase-auth id="auth"
  signed-in="{{isUserLogged}}"
  user="{{user}}"
  on-error="_onAuthError"
  log
></firebase-auth>

login(credentials) {
    if (credentials.provider === 'email') {
      this.$.auth.signInWithEmailAndPassword(credentials.params.email, credentials.params.password)
        .catch(e => {
          if (e.code === 'auth/user-not-found') {
            this.$.auth.createUserWithEmailAndPassword(credentials.params.email, credentials.params.password)
              .then(this._successfulLogin());
          }
        })
        .then(this._successfulLogin());
      this.password = null;

    } else {
      this.$.auth.signInWithPopup(credentials.provider);
    }
  }

app-contents.html:

   <firebase-query
        data="{{contents}}"
        path="/contents"
    ></firebase-query>

    <div class="card">
        <h1>Contents:</h1>
        <template is="dom-repeat" items="[[contents]]" as="content">
            <app-content-preview="[[content]]"></app-content-preview>
        </template>
    </div>
</template>

The contents element shows questionnaires the user has to answer in order to complete the goal of the app. But, the questionnaires can only be accessed by logged users. I would like to, when user logins in the app-auth, process his identity and update the firebase-query that shows the questionnaires he has to answer

Answer 1

Actually should read the data at query (due to your firebase datababase rule. (if you allow read for all, but write on logged in ) something like in database rules;

"rules": {
    ".read": true,
    ".write": "auth != null"
     }

But in case let says read need also auth !=null than, lets change your code like:

 <firebase-query
        data="{{contents}}"
        path="{{pathContents}}"
    ></firebase-query>

and define an observer like

static get observers() {
        return ['_isUserLogged(user)']

   _isUserLogged(user) {
      if (user) {
        this.set('pathContents', 'contents');
      }
   }

this observer will check user is exist or not. And if exist than the path will be defined as contents than query element will fire again automatically. Hope this will work :)

Another js options is;

_isUserLogged(user) {
          if (user) {
            var db = firebase.database();
            db.ref('contents').on('value', snapshot=>{
             if (snapshot.exists()) {  //To check that you have a data
                 this.set('contents', snapshot.val() );
             }
            })
          }
       }

Please not: if you read database with above code, than you do not need firebase-query element. So, delete it.