Let auth credentials autorefresh and fix new tab

appengine/swarming/elements/res/imp/common/auth-signin.html

 <!--
   Copyright 2016 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 
   The `auth-signin` element displays sign-in/sign-out button, user email and
   avatar.
   It has a google-signin/google-signin-aware element under the hood that handles
   the actual OAuth logic.
 
@@ skipping 73 matching lines @@
         },
         profile: {
           type: Object,
           readOnly: true
         },
         signed_in: {
           type: Boolean,
           readOnly: true,
           value: false,
           notify: true,
+        },
+
+        _signingIn: {

[jcgregorio, 2016/09/20 12:58:18]

_signingIn seems to be needed because you are using setInterval.

If you switch to setTimeout and recall setTimeout within then you won't have to
worry about calling _onSignin() more than once, and can drop _signingIn.

[kjlubick, 2016/09/20 13:24:02]

Excellent suggestion.  Done.

+          type: Boolean,
+          value: false,
         }
       },
 
-      _onSignin: function(e) {
-        this._setSigned_in(true);
+      attached: function() {
+        if (!this.client_id) {
+          return;
+        }
+        // If a page is opened in a new tab, we are (likely) already logged in
+        // so we wait for the gapi and auth2 to be loaded and re-extract our
+        // access_token.
+        var trySignin = window.setInterval(function(){
+          if (this.signed_in) {
+            window.clearInterval(trySignin);
+            return;
+          }
+          // The 'gapi' checks are the same that signin-aware does. We do them
+          // to avoid extraneous errors in the console.
+          if (('gapi' in window) && ('auth2' in window.gapi) &&
+              !this.signed_in && !this._signingIn) {
+            this._signingIn = true;
+            var user = gapi.auth2.getAuthInstance().currentUser.get();
+            if (user && user.getAuthResponse().access_token) {
+              // User is already logged in, can use the access_token.
+              this._onSignin();
+            } else {
+              this.$.aware.signIn();
+            }
+          }
+        }.bind(this),
+        // 300 ms is chosen because this seems to be long enough for the signin
+        // to happen normally on a "visible" page and avoid the popup that
+        // always happens when signIn() is manually called. It is also short
+        // enough such that when the page is opened in a new tab, it seems to
+        // happen automatically.
+        300);
+

[jcgregorio, 2016/09/20 12:58:18]

No blank line here.

[kjlubick, 2016/09/20 13:24:02]

Done.

+      },
+
+      _onSignin: function() {
+        this._signingIn = true;
         var user = gapi.auth2.getAuthInstance().currentUser.get();
         var profile = user.getBasicProfile();
         this._setProfile({
           email: profile.getEmail(),
           imageUrl: profile.getImageUrl()
         });
         this.set("auth_response", user.getAuthResponse());
         this._setSigned_in(true);
         this.fire("auth-signin");
+        // The credential will expire after a while (usually an hour)
+        // so we need to reload it.
+        this.async(function(){
+          console.log("reloading credentials");

[jcgregorio, 2016/09/20 12:58:18]

Is the console.log needed?

[kjlubick, 2016/09/20 13:24:02]

I would like to keep it in, so if it doesn't work as well in prod, or there is
some corner case, I might have an inkling as to what is going on.  I can remove
it later, once things have stabilized.

+          user.reloadAuthResponse();
+          this._onSignin();
+        }, this.auth_response.expires_in * 1000);  // convert seconds to ms
+        this._signingIn = false;
       },
 
       _onSignout: function(e) {
         this._setSigned_in(false);
         this._setProfile(null);
       },
 
       _makeHeader: function(auth_response) {
         if (!auth_response) {
           return {};
         }
         return {
           "authorization": auth_response.token_type + " " + auth_response.access_token
         };
       },
 
       signIn: function() {
         this.$.aware.signIn();
       },
 
       signOut: function() {
         this.$.aware.signOut();
       }
     });
   </script>
 </dom-module>