javascript - Polymer and firebase-auth -

i writing polymer web application. using firebase along firebase-auth db , authentication.

i have main app.html element on index page custom my-login element pops when click login button contains firebase-auth element , login logic. far have been able log in firebase-auth element. however, after logging in my-login element, have not been able figure out how access login information on index.html page , of other pages in app.

any idea on how this? can't find examples online of using login information on elements other 1 contains firebase-auth.

here app.html:

<dom-module id="my-app">     <link rel="import" type="css" href="../styles/app-theme.css">     <template>         <app-router style="display:none;">             <app-route path="/" import="/elements/blog.html"></app-route>             <app-route path="/artist" import="/elements/artist.html"></app-route>             <app-route path="/teacher" import="/elements/teacher.html"></app-route>             <app-route path="/research" import="/elements/research.html"></app-route>             <app-route path="/contact" import="/elements/contact.html"></app-route>             <app-route path="*" import="/elements/blog.html"></app-route>         </app-router>          <!-- main area -->         <paper-scroll-header-panel main fixed>             <!-- main toolbar -->             <paper-toolbar class="medium-tall">                  <div class="">                     <div class="app-name">joyce k. lee</div>                     <span class="spacer"></span>                     <paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusknown || user}}"></paper-icon-button>                     <paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusknown || !user}}"></paper-icon-button>                     <template if="{{user}}">                         {{user.password.username}}                     </template>                 </div>                  <div class="bottom center fit">                     <paper-tabs id="nav" selected="{{selected}}">                         <paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>                         <paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>                         <paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>                         <paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>                         <paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>                     </paper-tabs>                 </div>             </paper-toolbar>              <!-- main content -->             <div class="content">                 <neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">                     <neon-animatable><my-blog></my-blog></neon-animatable>                     <neon-animatable><my-artist></my-artist></neon-animatable>                     <neon-animatable><my-teacher></my-teacher></neon-animatable>                     <neon-animatable><my-research></my-research></neon-animatable>                     <neon-animatable><my-contact></my-contact></neon-animatable>                 </neon-animated-pages>             </div>              <simple-overlay id="login" with-backdrop>                 <my-login></my-login>             </simple-overlay>         </paper-scroll-header-panel>     </template>      <script>         (function () {             polymer({                 is: 'my-app'             });         })();     </script> </dom-module> 

here working my-login element:

<dom-module id="my-login">     <template>         <firebase-auth id="firebaselogin" user="{{user}}" status-known="{{statusknown}}" location="https://brilliant-inferno-6056.firebaseio.com" provider="password" on-error="errorhandler" on-user-created="usersuccesshandler" on-password-changed="usersuccesshandler" on-password-reset="usersuccesshandler" on-user-removed="usersuccesshandler"></firebase-auth>          <h4>login</h4>         <paper-input label="email" value="{{email::input}}"></paper-input>         <paper-input label="password" type="password" value="{{password::input}}"></paper-input>         <paper-button on-tap="login" raised>login</paper-button>         <br>         <div id="message">[[message]]</div>         <h3>login status:</h3>         <p>{{computeloginstatus(statusknown, user)}}</p>     </template>      <script>         (function () {             'use strict';              polymer({                 is: 'my-login',                  properties: {                     message: {                         type: string,                         value: ''                     },                     email: {                         type: string,                         value: ''                     },                     password: {                         type: string,                         value: ''                     },                     user: {                         type: object,                         value: null,                         notify: true                     },                     statusknown: {                         type: boolean,                         notify: true                     }                 },                 login: function () {                     var params = {};                     params.email = this.email;                     params.password = this.password;                     this.$.firebaselogin.login(params);                 },                 logout: function () {                     this.$.firebaselogin.logout();                 },                 errorhandler: function (e) {                     this.message = 'error: ' + e.detail.message;                 },                 usersuccesshandler: function (e) {                     this.message = e.type + ' success!';                 },                 createuserhandler: function (e) {                     this.$.firebaselogin.createuser(this.email, this.password);                 },                 changepasswordhandler: function (e) {                     this.$.firebaselogin.changepassword(this.email, this.password, this.newpassword);                 },                 resetpasswordhandler: function (e) {                     this.$.firebaselogin.sendpasswordresetemail(this.email);                 },                 removeuserhandler: function (e) {                     this.$.firebaselogin.removeuser(this.email, this.password);                 },                 computecreateuserdisabled: function (email, password) {                     return !email || !password;                 },                 computechangepassworddisabled: function (email, password, newpassword) {                     return !email || !password || !newpassword;                 },                 computeresetpassworddisabled: function (email, password) {                     return !email || !password;                 },                 computeremoveuserdisabled: function (email, password) {                     return !email || !password;                 },                 computeloginhidden: function (statusknown, user) {                     return !statusknown || !!user;                 },                 computelogouthidden: function (statusknown, user) {                     return !statusknown || !user;                 },                 computeloginstatus: function (statusknown, user) {                     if (statusknown && user) {                         return 'logged in';                     }                     if (statusknown) {                         return 'logged out';                     }                     return 'unknown (checking status...)';                 }             });         })();     </script> </dom-module> 

bind user object in my-login property my-app. user object mind doesn't hold want you'll need add firebase-document fetches additional information need. same thing applies, bind result of object user in my-app.

<dom-module id="my-app"> <link rel="import" type="css" href="../styles/app-theme.css"> <template>     <app-router style="display:none;">         <app-route path="/" import="/elements/blog.html"></app-route>         <app-route path="/artist" import="/elements/artist.html"></app-route>         <app-route path="/teacher" import="/elements/teacher.html"></app-route>         <app-route path="/research" import="/elements/research.html"></app-route>         <app-route path="/contact" import="/elements/contact.html"></app-route>         <app-route path="*" import="/elements/blog.html"></app-route>     </app-router>      <!-- main area -->     <paper-scroll-header-panel main fixed>         <!-- main toolbar -->         <paper-toolbar class="medium-tall">              <div class="">                 <div class="app-name">joyce k. lee</div>                 <span class="spacer"></span>                 <paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusknown || user}}"></paper-icon-button>                 <paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusknown || !user}}"></paper-icon-button>                 <template if="{{user}}">                     {{user.password.username}}                 </template>             </div>              <div class="bottom center fit">                 <paper-tabs id="nav" selected="{{selected}}">                     <paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>                     <paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>                     <paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>                     <paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>                     <paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>                 </paper-tabs>             </div>         </paper-toolbar>          <!-- main content -->         <div class="content">             <neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">                 <neon-animatable><my-blog user="{{user}}"></my-blog></neon-animatable>                 <neon-animatable><my-artist user="{{user}}"></my-artist></neon-animatable>                 <neon-animatable><my-teacher user="{{user}}"></my-teacher></neon-animatable>                 <neon-animatable><my-research user="{{user}}"></my-research></neon-animatable>                 <neon-animatable><my-contact user="{{user}}"></my-contact></neon-animatable>             </neon-animated-pages>         </div>          <simple-overlay id="login" with-backdrop>             <my-login user="{{user}}"></my-login>         </simple-overlay>     </paper-scroll-header-panel> </template>  <script>     (function () {         polymer({             is: 'my-app'         });     })(); </script>