authentication - How to stop page content load until authenticated using Firebase and Polymer -

i starting polymer , firebase , have implemented google oauth authentication.

i have notice page loads before authentication , if click can page without authorization, albeit not able use firebase api , therefore page not usable.

my issue not want javascript loaded until authenticated.

how done.

many thanks

it depends if using firebase or polymer wrapper, polymerfire.

create document imports want conditionally loaded

// user-scripts-lazy.html <link rel="import" href="user-script-one.html"> <script src="script.js"></script> // etc 

using polymerfire in element hosts <firebase-auth> create observer , you'll expose variables firebase-auth.

<firebase-auth      user="{{user}}"       status-known="{{statusknown}}"></firebase-auth> 

in observer, watch user element , status known

statusknown: when true, login status can determined checking user property

user: currently-authenticated user user-related metadata. see firebase.user documentation spec.

observers:[ '_userstateknown(user, statusknown)' ]  _userstateknown: function(user, status) {  if(status && user) {   // status known , user has logged in   // load files here - using lazy load method   var resolvedpageurl = this.resolveurl('user-scripts-lazy.html.html');   this.importhref(resolvedpageurl, null, this.onerror, true);  } } 

to state without using polymerfire can use onauthstatechange

properties: {   user: {     type: object,     value: null // important initialise null   } }  ..  ready: function() {  firebase.auth().onauthstatechagned(function(user) {   if(user)      this.set('user', user); // when user logged in set firebase user variable ser   else      this.set('user', false); // when no user logged in set user false    }.bind(this)); // bind polymer scope onauthstatechanged function  }  // set observer in element observers: [  '_userchanged(user)' ],  _userchanged: function(user) {  if(user === null) {   // authstatus false, authstatechagned function hasn't returned yet. nothing   return;  }  if(user) {   // user has been signed in   // lazy load same before  } else {   // no user signed in  } } 

i haven't tested code while writing here, i've implemented same thing various times.