Support auth in multiple tabs

By default the UserManager uses session storage for its authentication
credentials.  That is restricted to a single tab.  In order to support
using the same auth token in multiple tabs, we could switch that to
localStorage which is shared by all tabs of the same domain.  But then
if a user exited the browser, they might be surprised to find that they
were still logged in when restarting.  The typically short lifetime of
OIDC tokens mitigates that somewhat, but it's probably best not to
subvert that expectation anyway.

Instead, we can continue to use session storage by using a BroadcastChannel
to notify other tabs of login/out events and transfer the token info as
well.  This is a standard feature of modern browsers, but we're using
a library that wraps it for two reasons: it supports older browsers
with compatability workarounds if required, and it implements a leader
election protocol.  More on that in a minute.

We would also like to automatically renew tokens shortly before they
expire.  The UserManager has an automatic facility for that, but it
isn't multi-tab aware, so every tab would try to renew at the same time
if we used it.  Instead, we hook into the UserManager timer that fires
about one minute before token expiration and use the leader election to
decide which tab will renew the token.

We renew the token silently in the background with a hidden iframe.  In
this case, instead of using our normal auth callback page, we use a much
simpler "silent callback" which does not render the rest of our application.
This avoids confusion and reduces resource usage.

This also moves any remaining token lifecycle handling out of the Auth
component and into ZuulAuthProvider, so the division of responsibilities
is much simpler.

Change-Id: I17af1a98bf8d704dd7650109aa4979b34086e2fa

1 files changed, 36 insertions, 0 deletions

diff --git a/web/src/pages/SilentCallback.jsx b/web/src/pages/SilentCallback.jsx
new file mode 100644
index 000000000..e110ea658
--- /dev/null
+++ b/web/src/pages/SilentCallback.jsx
@@ -0,0 +1,36 @@
+// Copyright 2021 Acme Gating, LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
+// not use this file except in compliance with the License. You may obtain
+// a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations
+// under the License.
+
+// This is an abbreviated rendering of the app which only renders the
+// AuthProvider.  This is rendered in a hidden iframe during
+// authentication token renewal.  We don't need to render the entire
+// app, and we also don't need to render the AuthProvider with all of
+// our settings.
+
+import React from 'react'
+import { AuthProvider } from 'oidc-react'
+import { UserManager } from 'oidc-client'
+
+class SilentCallback extends React.Component {
+  render() {
+    const oidcConfig = {
+      autoSignIn: false,
+      userManager: new UserManager(),
+    }
+
+    return <AuthProvider {...oidcConfig}/>
+  }
+}
+
+export default SilentCallback