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
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.