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

Question

I am starting with Polymer and Firebase and have implemented the Google OAuth authentication.

I have notice the page loads before authentication and if you click back you can get to the page without authorization, albeit that you are not able to use the firebase api and therefore the page is not usable.

My issue is that I do not want my javascript loaded until authenticated.

How could this be done.

Many thanks

Answer 1

It depends if your using firebase or their polymer wrapper, polymerfire.

Create a document for all the imports that you want to be conditionally loaded

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

Using Polymerfire In the element that hosts <firebase-auth> create a observer and you'll expose some variables from firebase-auth.

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

In the observer, watch the user element and the status known

statusKnown: When true, login status can be determined by checking user property

user: The currently-authenticated user with user-related metadata. See the firebase.User documentation for the spec.

observers:[
'_userStateKnown(user, statusKnown)'
]

_userStateKnown: function(user, status) {
 if(status && user) {
  // The status is known and the user has logged in
  // so load the files here - using the lazy load method
  var resolvedPageUrl = this.resolveUrl('user-scripts-lazy.html.html');
  this.importHref(resolvedPageUrl, null, this.onError, true);
 }
}

To get the state without using polymerfire you can use onAuthStateChange

properties: {
  user: {
    type: Object,
    value: null // important to initialise to null
  }
}

..

ready: function() {
 firebase.auth().onAuthStateChagned(function(user) {
  if(user) 
    this.set('user', user); // when a user is logged in set their firebase user variable to ser
  else 
    this.set('user', false); // when no user is logged in set user to false


 }.bind(this)); // bind the Polymer scope to the onAuthStateChanged function 
}

// set an observer in the element
observers: [
 '_userChanged(user)'
],

_userChanged: function(user) {
 if(user === null) {
  // authStatus is false, the authStateChagned function hasn't returned yet. Do nothing
  return;
 }
 if(user) {
  // user has been signed in
  // lazy load the same as before
 } else {
  // no user is signed in
 }
}

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

Answer 2

There are a couple of options.

1. Put content you don't want loaded behind a dom-if template with "[[user]]" as its driver. This could include your firebase element, so the database isn't even considered until after log on.
2. Put a modal dialog box up if the user is not logged on. I do this with a custom session element . Whilst the overlay is showing then the rest of the page is unresponsive to anything.

Answer 3

If it is simply an aesthetic issue of removing the non-logged-in page from view, could you either hide the page (or display some kind of overlay) while the user isn't authenticated?

I currently have this in an current project for some elements: hidden$="{{!user}}"

Answer 4

I have identified the solution for my purpose ...

1. Add storage role based authorization (see is there a way to authenticate user role in firebase storage rules?)
   • This does have a limitation currently of hard coded uid's
2. In the page, request storage resource and if successful include it in the dom (i.e. add script element with src pointing to storage url)
3. Call javascript as normal