I am creating an app using Polymer and Polymerfire elements and I can't find an effective way to share user and auth references across the app.
My current solution of receiving auth reference is as follows:
var auth = document.getElementById('appID').app.auth()
This approach works but I have a hunch that there should be a better way.
Second problem is, that I am not sure howto get the user reference in subviews, were getting the reference by property sharing would be super cumbersome(and I've been having issues using this approach).
I was thinking that using iron-meta tag might solve the issue, but that would mean that on every login and logout I would have to set the value "manually". So is there a more straightforward way to share the reference?
If I access the firebase-auth reference directly:
document.getElementById('authID').user
Then there is a problem that when it's accessed in the element's ready function call it's always null. If it's called later, then it works fine but I need to check if the user is logged in in ready call(and redirect to login page).
Plus, this approach doesn't work at all if global Polymer setting is set to: dom: 'shadow' (The firebase-auth is not located in index.html but lower and with this setting I am able to access only the index.html elements.) and this setting is supposed to be set by default in the future and I want the solution to be future-proofed.
I'll be grateful for any responses, Jan
I solved the issue. Apparently it's possible to initialize the firebase-auth element wherever you want and the element retains the app state as long as the app name is provided.
<firebase-auth id="auth" app-name=name-of-the-app"></firebase-auth>
Than just use the element reference:
this.$.auth