diff --git a/doc/source/howtos/admin.rst b/doc/source/howtos/admin.rst
index 9fd4933f27..c4301f97ea 100644
--- a/doc/source/howtos/admin.rst
+++ b/doc/source/howtos/admin.rst
@@ -6,5 +6,6 @@ Admin How-to Guides
 
    installation
    zuul-from-scratch
+   openid-connect-examples
    troubleshooting
    zookeeper
diff --git a/doc/source/howtos/openid-connect-examples.rst b/doc/source/howtos/openid-connect-examples.rst
new file mode 100644
index 0000000000..a4fedc43d3
--- /dev/null
+++ b/doc/source/howtos/openid-connect-examples.rst
@@ -0,0 +1,21 @@
+OpenID Connect Integration Examples
+===================================
+
+This document lists simple How-Tos to help administrators enable OpenID
+Connect authentication in Zuul and Zuul's Web UI.
+
+.. toctree::
+   :maxdepth: 1
+
+   openid-with-google
+   openid-with-keycloak
+
+Debugging
+---------
+
+If problems appear:
+
+* Make sure your configuration is correct, especially callback URIs.
+* More information can be found in Zuul's web service logs.
+* From the user's side, activating the web console in the browser can be helpful
+  to debug API calls.
diff --git a/doc/source/howtos/openid-with-google.rst b/doc/source/howtos/openid-with-google.rst
new file mode 100644
index 0000000000..4b25337ef3
--- /dev/null
+++ b/doc/source/howtos/openid-with-google.rst
@@ -0,0 +1,65 @@
+Configuring Google Authentication
+=================================
+
+This document explains how to configure Zuul in order to enable authentication
+with Google.
+
+Prerequisites
+-------------
+
+* The Zuul instance must be able to query Google's OAUTH API servers. This
+  simply generally means that the Zuul instance must be able to send and
+  receive HTTPS data to and from the Internet.
+* You must set up a project in `Google's developers console <https://console.developers.google.com/>`_.
+
+Setting up credentials with Google
+----------------------------------
+
+In the developers console, choose your project and click `APIs & Services`.
+
+Choose `Credentials` in the menu on the left, then click `Create Credentials`.
+
+Choose `Create OAuth client ID`. You might need to configure a consent screen first.
+
+Create OAuth client ID
+......................
+
+Choose `Web application` as Application Type.
+
+In `Authorized JavaScript Origins`, add the base URL of Zuul's Web UI. For example,
+if you are running a yarn development server on your computer, it would be
+`http://localhost:3000` .
+
+In `Authorized redirect URIs`, write down the base URL of Zuul's Web UI followed
+by "/t/<tenant>/auth_callback", for each tenant on which you want to enable
+authentication. For example, if you are running a yarn development server on
+your computer and want to set up authentication for tenant "local",
+write `http://localhost:3000/t/local/auth_callback` .
+
+Click Save. Google will generate a Client ID and a Client secret for your new
+credentials; we will only need the Client ID for the rest of this How-To.
+
+Configure Zuul
+..............
+
+Edit the ``/etc/zuul/zuul.conf`` to add the google authenticator:
+
+.. code-block:: ini
+
+   [auth google_auth]
+   default=true
+   driver=OpenIDConnect
+   realm=my_realm
+   issuer_id=https://accounts.google.com
+   client_id=<your Google Client ID>
+
+
+Restart Zuul services (scheduler, web).
+
+Head to your tenant's status page. If all went well, you should see a "Sign in"
+button in the upper right corner of the page. Congratulations!
+
+Further Reading
+---------------
+
+This How-To is based on `Google's documentation on their implementation of OpenID Connect <https://developers.google.com/identity/protocols/oauth2/openid-connect>`_.
diff --git a/doc/source/howtos/openid-with-keycloak.rst b/doc/source/howtos/openid-with-keycloak.rst
new file mode 100644
index 0000000000..e803768010
--- /dev/null
+++ b/doc/source/howtos/openid-with-keycloak.rst
@@ -0,0 +1,110 @@
+Configuring Keycloak Authentication
+===================================
+
+This document explains how to configure Zuul and Keycloak in order to enable
+authentication in Zuul with Keycloak.
+
+Prerequisites
+-------------
+
+* The Zuul instance must be able to query Keycloak over HTTPS.
+* Authenticating users must be able to reach Keycloak's web UI.
+* Have a realm set up in Keycloak.
+  `Instructions on how to do so can be found here <https://www.keycloak.org/docs/latest/getting_started/index.html#creating-a-realm-and-user>`_ .
+
+By convention, we will assume the Keycloak server's FQDN is ``keycloak``, and
+Zuul's Web UI's base URL is ``https://zuul/``. We will use the realm ``my_realm``.
+
+Most operations below regarding the configuration of Keycloak can be performed through
+Keycloak's admin CLI. The following steps must be performed as an admin on Keycloak's
+GUI.
+
+Setting up Keycloak
+-------------------
+
+Create a client
+...............
+
+Choose the realm ``my_realm``, then click ``clients`` in the Configure panel.
+Click ``Create``.
+
+Name your client as you please. We will pick ``zuul`` for this example. Make sure
+to fill the following fields:
+
+* Client Protocol: ``openid-connect``
+* Access Type: ``public``
+* Implicit Flow Enabled: ``ON``
+* Valid Redirect URIs: ``https://zuul/*``
+* Web Origins: ``https://zuul/``
+
+Click "Save" when done.
+
+Create a client scope
+......................
+
+Keycloak maps the client ID to a specific claim, instead of the usual `aud` claim.
+We need to configure Keycloak to add our client ID to the `aud` claim by creating
+a custom client scope for our client.
+
+Choose the realm ``my_realm``, then click ``client scopes`` in the Configure panel.
+Click ``Create``.
+
+Name your scope as you please. We will name it ``zuul_aud`` for this example.
+Make sure you fill the following fields:
+
+* Protocol: ``openid-connect``
+* Include in Token Scope: ``ON``
+
+Click "Save" when done.
+
+On the Client Scopes page, click on ``zuul_aud`` to configure it; click on
+``Mappers`` then ``create``.
+
+Make sure to fill the following:
+
+* Mapper Type: ``Audience``
+* Included Client Audience: ``zuul``
+* Add to ID token: ``ON``
+* Add to access token: ``ON``
+
+Then save.
+
+Finally, go back to the clients list and pick the ``zuul`` client again. Click
+on ``Client Scopes``, and add the ``zuul_aud`` scope to the ``Assigned Default
+Client Scopes``.
+
+(Optional) Set up a social identity provider
+............................................
+
+Keycloak can delegate authentication to predefined social networks. Follow
+`these steps to find out how. <https://www.keycloak.org/docs/latest/server_admin/index.html#social-identity-providers>`_
+
+If you don't set up authentication delegation, make sure to create at least one
+user in your realm, or allow self-registration. See Keycloak's documentation section
+on `user management <https://www.keycloak.org/docs/latest/server_admin/index.html#user-management>`_
+for more details on how to do so.
+
+Setting up Zuul
+---------------
+
+Edit the ``/etc/zuul/zuul.conf`` to add the keycloak authenticator:
+
+.. code-block:: ini
+
+   [auth keycloak]
+   default=true
+   driver=OpenIDConnect
+   realm=my_realm
+   issuer_id=https://keycloak/auth/realms/my_realm
+   client_id=zuul
+
+Restart Zuul services (scheduler, web).
+
+Head to your tenant's status page. If all went well, you should see a "Sign in"
+button in the upper right corner of the page. Congratulations!
+
+Further Reading
+---------------
+
+This How-To is based on `Keycloak's documentation <https://www.keycloak.org/documentation.html>`_,
+specifically `the documentation about clients <https://www.keycloak.org/docs/latest/server_admin/#_clients>`_.
diff --git a/releasenotes/notes/webui-openidconnect-514c09b26f7fd15e.yaml b/releasenotes/notes/webui-openidconnect-514c09b26f7fd15e.yaml
new file mode 100644
index 0000000000..030eacf452
--- /dev/null
+++ b/releasenotes/notes/webui-openidconnect-514c09b26f7fd15e.yaml
@@ -0,0 +1,5 @@
+---
+features:
+  - |
+    Add authentication in the web UI. Zuul's web UI can be configured to authenticate
+    users against an Identity Provider supporting the OpenID Connect protocol.
diff --git a/web/package.json b/web/package.json
index e13a7d9c3b..16c3e88c14 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,8 @@
     "moment": "^2.22.2",
     "moment-duration-format": "2.3.2",
     "moment-timezone": "^0.5.28",
+    "oidc-client": "^1.10.1",
+    "oidc-react": "^1.5.1",
     "patternfly-react": "^2.39.16",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
diff --git a/web/src/App.jsx b/web/src/App.jsx
index c64f09ccf2..68e7ca3790 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -58,6 +58,7 @@ import {
   UsersIcon,
 } from '@patternfly/react-icons'
 
+import AuthContainer from './containers/auth/Auth'
 import ErrorBoundary from './containers/ErrorBoundary'
 import { Fetching } from './containers/Fetching'
 import SelectTz from './containers/timezone/SelectTz'
@@ -67,6 +68,7 @@ import { clearError } from './actions/errors'
 import { fetchConfigErrorsAction } from './actions/configErrors'
 import { routes } from './routes'
 import { setTenantAction } from './actions/tenant'
+import { configureAuthFromTenant, configureAuthFromInfo } from './actions/auth'
 
 class App extends React.Component {
   static propTypes = {
@@ -79,6 +81,7 @@ class App extends React.Component {
     history: PropTypes.object,
     dispatch: PropTypes.func,
     isKebabDropdownOpen: PropTypes.bool,
+    user: PropTypes.object,
   }
 
   state = {
@@ -106,7 +109,7 @@ class App extends React.Component {
       )
     } else {
       // Return an empty navigation bar in case we don't have an active tenant
-      return <Nav aria-label="Nav" variant="horizontal"/>
+      return <Nav aria-label="Nav" variant="horizontal" />
     }
   }
 
@@ -165,7 +168,7 @@ class App extends React.Component {
         whiteLabel = false
 
         const match = matchPath(
-          this.props.location.pathname, {path: '/t/:tenant'})
+          this.props.location.pathname, { path: '/t/:tenant' })
 
         if (match) {
           tenantName = match.params.tenant
@@ -177,6 +180,14 @@ class App extends React.Component {
         this.props.dispatch(tenantAction)
         if (tenantName) {
           this.props.dispatch(fetchConfigErrorsAction(tenantAction.tenant))
+          if (whiteLabel) {
+            // The app info endpoint was already a tenant info
+            // endpoint, so auth info was already provided.
+            this.props.dispatch(configureAuthFromInfo(info))
+          } else {
+            // Query the tenant info endpoint for auth info.
+            this.props.dispatch(configureAuthFromTenant(tenantName))
+          }
         }
       }
     }
@@ -231,7 +242,7 @@ class App extends React.Component {
           <TimedToastNotification
             key={error.id}
             type='error'
-            onDismiss={() => {this.props.dispatch(clearError(error.id))}}
+            onDismiss={() => { this.props.dispatch(clearError(error.id)) }}
           >
             <span title={moment.utc(error.date).tz(this.props.timezone).format()}>
               <strong>{error.text}</strong> ({error.status})&nbsp;
@@ -263,14 +274,14 @@ class App extends React.Component {
           variant="danger"
           onClick={() => {
             history.push(this.props.tenant.linkPrefix + '/config-errors')
-            this.setState({showErrors: false})
+            this.setState({ showErrors: false })
           }}
         >
           <NotificationDrawerListItemHeader
             title={item.source_context.project + ' | ' + ctxPath}
             variant="danger" />
           <NotificationDrawerListItemBody>
-            <pre style={{whiteSpace: 'pre-wrap'}}>
+            <pre style={{ whiteSpace: 'pre-wrap' }}>
               {error}
             </pre>
           </NotificationDrawerListItemBody>
@@ -402,14 +413,16 @@ class App extends React.Component {
             aria-label="Notifications"
             onClick={(e) => {
               e.preventDefault()
-              this.setState({showErrors: !this.state.showErrors})
+              this.setState({ showErrors: !this.state.showErrors })
             }}
           >
             <BellIcon />
           </NotificationBadge>
         }
-        <SelectTz/>
-        <ConfigModal/>
+        <SelectTz />
+        <ConfigModal />
+
+        {tenant.name && (<AuthContainer />)}
       </PageHeaderTools>
     )
 
@@ -418,7 +431,7 @@ class App extends React.Component {
     const pageHeader = (
       <PageHeader
         logo={<Brand src={logo} alt='Zuul logo' className="zuul-brand" />}
-        logoProps={{to: logoUrl}}
+        logoProps={{ to: logoUrl }}
         logoComponent={Link}
         headerTools={pageHeaderTools}
         topNav={nav}
@@ -446,6 +459,7 @@ export default withRouter(connect(
     configErrors: state.configErrors,
     info: state.info,
     tenant: state.tenant,
-    timezone: state.timezone
+    timezone: state.timezone,
+    user: state.user
   })
 )(App))
diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx
index e4f093d51d..d3f168c644 100644
--- a/web/src/App.test.jsx
+++ b/web/src/App.test.jsx
@@ -23,6 +23,7 @@ import configureStore from './store'
 import App from './App'
 import TenantsPage from './pages/Tenants'
 import StatusPage from './pages/Status'
+import ZuulAuthProvider from './ZuulAuthProvider'
 import * as api from './api'
 
 api.fetchInfo = jest.fn()
@@ -35,7 +36,10 @@ api.fetchConfigErrors.mockImplementation(() => Promise.resolve({data: []}))
 it('renders without crashing', () => {
   const store = configureStore()
   const div = document.createElement('div')
-  ReactDOM.render(<Provider store={store}><Router><App /></Router></Provider>,
+  ReactDOM.render(
+    <Provider store={store}>
+      <ZuulAuthProvider><Router><App /></Router></ZuulAuthProvider>
+    </Provider>,
     div)
   ReactDOM.unmountComponentAtNode(div)
 })
@@ -52,7 +56,9 @@ it('renders multi tenant', async () => {
   )
 
   const application = create(
-    <Provider store={store}><Router><App /></Router></Provider>
+    <Provider store={store}>
+      <ZuulAuthProvider><Router><App /></Router></ZuulAuthProvider>
+    </Provider>
   )
 
   await act(async () => {
@@ -88,7 +94,9 @@ it('renders single tenant', async () => {
   )
 
   const application = create(
-    <Provider store={store}><Router><App /></Router></Provider>
+    <Provider store={store}>
+      <ZuulAuthProvider><Router><App /></Router></ZuulAuthProvider>
+    </Provider>
   )
 
   await act(async () => {
diff --git a/web/src/ZuulAuthProvider.jsx b/web/src/ZuulAuthProvider.jsx
new file mode 100644
index 0000000000..a314605174
--- /dev/null
+++ b/web/src/ZuulAuthProvider.jsx
@@ -0,0 +1,76 @@
+// Copyright 2020 Red Hat, Inc
+// 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.
+
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+import { AuthProvider } from 'oidc-react'
+import { userLoggedIn, userLoggedOut } from './actions/user'
+
+
+class ZuulAuthProvider extends React.Component {
+  /*
+    This wraps the oidc-react AuthProvider and supplies the necessary
+    information as props.
+
+    The oidc-react AuthProvider is not really meant to be reconstructed
+    frequently. Calling render multiple times (even if nothing actually
+    changes) during a login can cause multiple AuthProviders to be created
+    which can interfere with the login process.
+
+    We connect this class to state.auth.auth_params, so make sure that isn't
+    updated unless the OIDC parameters are actually changed.
+
+    If they are changed, then we will create a new AuthProvider with the
+    new parameters.  Save those parameters in local storage so that when
+    we return from the IDP redirect, an AuthProvider with the same
+    configuration is created.
+   */
+  static propTypes = {
+    auth_params: PropTypes.object,
+    dispatch: PropTypes.func,
+    children: PropTypes.any,
+  }
+
+  render() {
+    const { auth_params } = this.props
+
+    console.debug('ZuulAuthProvider rendering with params', auth_params)
+
+    const oidcConfig = {
+      onSignIn: async (user) => {
+        this.props.dispatch(userLoggedIn(user))
+      },
+      onSignOut: async () => {
+        this.props.dispatch(userLoggedOut())
+      },
+      responseType: 'token id_token',
+      autoSignIn: false,
+      ...auth_params,
+    }
+    return (
+      <React.Fragment>
+        <AuthProvider {...oidcConfig} key={JSON.stringify(auth_params)}>
+          {this.props.children}
+        </AuthProvider>
+      </React.Fragment>
+    )
+  }
+}
+
+export default connect(state => ({
+  auth_params: state.auth.auth_params,
+}))(ZuulAuthProvider)
diff --git a/web/src/actions/auth.js b/web/src/actions/auth.js
new file mode 100644
index 0000000000..222ab05c1a
--- /dev/null
+++ b/web/src/actions/auth.js
@@ -0,0 +1,85 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+
+import * as API from '../api'
+
+export const AUTH_CONFIG_REQUEST = 'AUTH_CONFIG_REQUEST'
+export const AUTH_CONFIG_SUCCESS = 'AUTH_CONFIG_SUCCESS'
+export const AUTH_CONFIG_FAIL = 'AUTH_CONFIG_FAIL'
+
+export const USER_ACL_REQUEST = 'USER_ACL_REQUEST'
+export const USER_ACL_SUCCESS = 'USER_ACL_SUCCESS'
+export const USER_ACL_FAIL = 'USER_ACL_FAIL'
+
+export const AUTH_START = 'AUTH_START'
+
+const authConfigRequest = () => ({
+  type: AUTH_CONFIG_REQUEST
+})
+
+function createAuthParamsFromJson(json) {
+  let auth_info = json.info.capabilities.auth
+
+  let auth_params = {
+    authority: '',
+    clientId: '',
+    scope: '',
+  }
+  if (!auth_info) {
+    console.log('No auth config')
+    return auth_params
+  }
+  const realm = auth_info.default_realm
+  const client_config = auth_info.realms[realm]
+  if (client_config.driver === 'OpenIDConnect') {
+    auth_params.clientId = client_config.client_id
+    auth_params.scope = client_config.scope
+    auth_params.authority = client_config.authority
+    return auth_params
+  } else {
+    console.log('No OpenIDConnect provider found')
+    return auth_params
+  }
+}
+
+const authConfigSuccess = (json, auth_params) => ({
+  type: AUTH_CONFIG_SUCCESS,
+  info: json.info,
+  auth_params: auth_params,
+})
+
+const authConfigFail = error => ({
+    type: AUTH_CONFIG_FAIL,
+    error
+})
+
+export const configureAuthFromTenant = (tenantName) => (dispatch) => {
+  dispatch(authConfigRequest())
+  return API.fetchTenantInfo('tenant/' + tenantName + '/')
+    .then(response => {
+      dispatch(authConfigSuccess(
+        response.data,
+        createAuthParamsFromJson(response.data)))
+    })
+    .catch(error => {
+      dispatch(authConfigFail(error))
+    })
+}
+
+export const configureAuthFromInfo = (info) => (dispatch) => {
+  dispatch(authConfigSuccess(
+    {info: info},
+    createAuthParamsFromJson({info: info})))
+}
diff --git a/web/src/actions/info.js b/web/src/actions/info.js
index a28c62651c..9024ab550a 100644
--- a/web/src/actions/info.js
+++ b/web/src/actions/info.js
@@ -25,6 +25,7 @@ export const fetchInfoRequest = () => ({
 export const fetchInfoSuccess = json => ({
   type: INFO_FETCH_SUCCESS,
   tenant: json.info.tenant,
+  capabilities: json.info.capabilities,
 })
 
 const fetchInfoFail = error => ({
@@ -35,7 +36,9 @@ const fetchInfoFail = error => ({
 const fetchInfo = () => dispatch => {
   dispatch(fetchInfoRequest())
   return API.fetchInfo()
-    .then(response => dispatch(fetchInfoSuccess(response.data)))
+    .then(response => {
+      dispatch(fetchInfoSuccess(response.data))
+    })
     .catch(error => {
       dispatch(fetchInfoFail(error))
       setTimeout(() => {dispatch(fetchInfo())}, 5000)
diff --git a/web/src/actions/user.js b/web/src/actions/user.js
new file mode 100644
index 0000000000..9b3261c9fe
--- /dev/null
+++ b/web/src/actions/user.js
@@ -0,0 +1,72 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+
+import * as API from '../api'
+import { USER_ACL_FAIL, USER_ACL_REQUEST, USER_ACL_SUCCESS } from './auth'
+
+export const USER_LOGGED_IN = 'USER_LOGGED_IN'
+export const USER_LOGGED_OUT = 'USER_LOGGED_OUT'
+
+// Access tokens are not necessary JWTs (Google OAUTH uses a custom format)
+// check the access token, if it isn't a JWT, use the ID token
+
+export function getToken(user) {
+  try {
+    JSON.parse(atob(user.access_token.split('.')[1]))
+    return user.access_token
+  } catch (e) {
+    return user.id_token
+  }
+}
+
+export const fetchUserACLRequest = (tenant) => ({
+  type: USER_ACL_REQUEST,
+  tenant: tenant,
+})
+
+export const userLoggedIn = (user) => (dispatch) => {
+  dispatch({
+    type: USER_LOGGED_IN,
+    user: user,
+    token: getToken(user),
+  })
+}
+
+export const userLoggedOut = () => (dispatch) => {
+  dispatch({
+    type: USER_LOGGED_OUT,
+  })
+}
+
+const fetchUserACLSuccess = (json) => ({
+  type: USER_ACL_SUCCESS,
+  isAdmin: json.zuul.admin,
+  scope: json.zuul.scope,
+})
+
+const fetchUserACLFail = error => ({
+  type: USER_ACL_FAIL,
+  error
+})
+
+export const fetchUserACL = (tenant, user) => (dispatch) => {
+  dispatch(fetchUserACLRequest(tenant))
+  let apiPrefix = 'tenant/' + tenant + '/'
+  return API.fetchUserAuthorizations(apiPrefix, user.token)
+    .then(response => dispatch(fetchUserACLSuccess(response.data)))
+    .catch(error => {
+      dispatch(fetchUserACLFail(error))
+    })
+}
diff --git a/web/src/api.js b/web/src/api.js
index c29ba38052..c032aa75e4 100644
--- a/web/src/api.js
+++ b/web/src/api.js
@@ -14,7 +14,7 @@
 
 import Axios from 'axios'
 
-function getHomepageUrl (url) {
+function getHomepageUrl(url) {
   //
   // Discover serving location from href.
   //
@@ -64,14 +64,14 @@ function getHomepageUrl (url) {
   if (baseUrl.includes('/t/')) {
     baseUrl = baseUrl.slice(0, baseUrl.lastIndexOf('/t/') + 1)
   }
-  if (! baseUrl.endsWith('/')) {
+  if (!baseUrl.endsWith('/')) {
     baseUrl = baseUrl + '/'
   }
   // console.log('Homepage url is ', baseUrl)
   return baseUrl
 }
 
-function getZuulUrl () {
+function getZuulUrl() {
   // Return the zuul root api absolute url
   const ZUUL_API = process.env.REACT_APP_ZUUL_API
   let apiUrl
@@ -81,12 +81,12 @@ function getZuulUrl () {
     apiUrl = ZUUL_API
   } else {
     // Api url is relative to homepage path
-    apiUrl = getHomepageUrl () + 'api/'
+    apiUrl = getHomepageUrl() + 'api/'
   }
-  if (! apiUrl.endsWith('/')) {
+  if (!apiUrl.endsWith('/')) {
     apiUrl = apiUrl + '/'
   }
-  if (! apiUrl.endsWith('/api/')) {
+  if (!apiUrl.endsWith('/api/')) {
     apiUrl = apiUrl + 'api/'
   }
   // console.log('Api url is ', apiUrl)
@@ -95,7 +95,7 @@ function getZuulUrl () {
 const apiUrl = getZuulUrl()
 
 
-function getStreamUrl (apiPrefix) {
+function getStreamUrl(apiPrefix) {
   const streamUrl = (apiUrl + apiPrefix)
     .replace(/(http)(s)?:\/\//, 'ws$2://') + 'console-stream'
   // console.log('Stream url is ', streamUrl)
@@ -103,7 +103,7 @@ function getStreamUrl (apiPrefix) {
 }
 
 // Direct APIs
-function fetchInfo () {
+function fetchInfo() {
   return Axios.get(apiUrl + 'info')
 }
 
@@ -111,60 +111,76 @@ function fetchComponents() {
   return Axios.get(apiUrl + 'components')
 }
 
-function fetchOpenApi () {
-  return Axios.get(getHomepageUrl () + 'openapi.yaml')
+function fetchTenantInfo(apiPrefix) {
+  return Axios.get(apiUrl + apiPrefix + 'info')
 }
-function fetchTenants () {
+function fetchOpenApi() {
+  return Axios.get(getHomepageUrl() + 'openapi.yaml')
+}
+function fetchTenants() {
   return Axios.get(apiUrl + 'tenants')
 }
-function fetchConfigErrors (apiPrefix) {
+function fetchConfigErrors(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'config-errors')
 }
-function fetchStatus (apiPrefix) {
+function fetchStatus(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'status')
 }
-function fetchChangeStatus (apiPrefix, changeId) {
+function fetchChangeStatus(apiPrefix, changeId) {
   return Axios.get(apiUrl + apiPrefix + 'status/change/' + changeId)
 }
-function fetchBuild (apiPrefix, buildId) {
+function fetchBuild(apiPrefix, buildId) {
   return Axios.get(apiUrl + apiPrefix + 'build/' + buildId)
 }
-function fetchBuilds (apiPrefix, queryString) {
+function fetchBuilds(apiPrefix, queryString) {
   let path = 'builds'
   if (queryString) {
     path += '?' + queryString.slice(1)
   }
   return Axios.get(apiUrl + apiPrefix + path)
 }
-function fetchBuildset (apiPrefix, buildsetId) {
+function fetchBuildset(apiPrefix, buildsetId) {
   return Axios.get(apiUrl + apiPrefix + 'buildset/' + buildsetId)
 }
-function fetchBuildsets (apiPrefix, queryString) {
+function fetchBuildsets(apiPrefix, queryString) {
   let path = 'buildsets'
   if (queryString) {
     path += '?' + queryString.slice(1)
   }
   return Axios.get(apiUrl + apiPrefix + path)
 }
-function fetchProject (apiPrefix, projectName) {
+function fetchProject(apiPrefix, projectName) {
   return Axios.get(apiUrl + apiPrefix + 'project/' + projectName)
 }
-function fetchProjects (apiPrefix) {
+function fetchProjects(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'projects')
 }
-function fetchJob (apiPrefix, jobName) {
+function fetchJob(apiPrefix, jobName) {
   return Axios.get(apiUrl + apiPrefix + 'job/' + jobName)
 }
-function fetchJobs (apiPrefix) {
+function fetchJobs(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'jobs')
 }
-function fetchLabels (apiPrefix) {
+function fetchLabels(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'labels')
 }
-function fetchNodes (apiPrefix) {
+function fetchNodes(apiPrefix) {
   return Axios.get(apiUrl + apiPrefix + 'nodes')
 }
 
+// token-protected API
+function fetchUserAuthorizations(apiPrefix, token) {
+  // Axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+  const instance = Axios.create({
+    baseURL: apiUrl
+  })
+  instance.defaults.headers.common['Authorization'] = 'Bearer ' + token
+  let res = instance.get(apiPrefix + 'authorizations')
+    .catch(err => { console.log('An error occurred', err) })
+  // Axios.defaults.headers.common['Authorization'] = ''
+  return res
+}
+
 export {
   apiUrl,
   getHomepageUrl,
@@ -186,4 +202,6 @@ export {
   fetchTenants,
   fetchInfo,
   fetchComponents,
+  fetchTenantInfo,
+  fetchUserAuthorizations,
 }
diff --git a/web/src/containers/auth/Auth.jsx b/web/src/containers/auth/Auth.jsx
new file mode 100644
index 0000000000..70a1753c6c
--- /dev/null
+++ b/web/src/containers/auth/Auth.jsx
@@ -0,0 +1,242 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionToggle,
+  AccordionContent,
+  Button,
+  ButtonVariant,
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  Modal,
+  ModalVariant
+} from '@patternfly/react-core'
+import {
+  UserIcon,
+  SignInAltIcon,
+  SignOutAltIcon,
+  HatWizardIcon
+} from '@patternfly/react-icons'
+
+import * as moment from 'moment'
+
+import { apiUrl } from '../../api'
+import { fetchUserACL } from '../../actions/user'
+import { withAuth } from 'oidc-react'
+import { getHomepageUrl } from '../../api'
+import { userLoggedIn, userLoggedOut } from '../../actions/user'
+
+
+class AuthContainer extends React.Component {
+  static propTypes = {
+    user: PropTypes.object,
+    tenant: PropTypes.object,
+    dispatch: PropTypes.func.isRequired,
+    timezone: PropTypes.string.isRequired,
+    info: PropTypes.object,
+    auth: PropTypes.object,
+    // Props coming from withAuth
+    signIn: PropTypes.func,
+    signOut: PropTypes.func,
+    userData: PropTypes.object,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      isModalOpen: false,
+      showZuulClientConfig: false,
+    }
+    this.handleModalToggle = () => {
+      this.setState(({ isModalOpen }) => ({
+        isModalOpen: !isModalOpen
+      }))
+    }
+    this.handleConfigToggle = () => {
+      this.setState(({ showZuulClientConfig }) => ({
+        showZuulClientConfig: !showZuulClientConfig
+      }))
+    }
+  }
+
+  componentDidMount() {
+    const { user, userData } = this.props
+
+    // Make sure redux is synced with the userManager
+    const now = Date.now() / 1000
+    if (userData && userData.expires_at < now) {
+      console.log('Token expired, logging out')
+      this.props.signOut()
+      this.props.dispatch(userLoggedOut())
+    } else if (user.data !== userData) {
+      console.log('Restoring login from userManager')
+      this.props.dispatch(userLoggedIn(userData))
+    }
+  }
+
+  componentDidUpdate() {
+    const { user, tenant } = this.props
+
+    // Make sure the token is current and the tenant is up to date.
+    const now = Date.now() / 1000
+    if (user.data && user.data.expires_at < now) {
+      console.log('Token expired, logging out')
+      this.props.signOut()
+    } else if (user.data && user.tenant !== tenant.name) {
+      console.log('Refreshing ACL', user.tenant, tenant.name)
+      this.props.dispatch(fetchUserACL(tenant.name, user))
+    }
+  }
+
+  ZuulClientConfig() {
+    const { user, tenant } = this.props
+
+    let ZCconfig
+    ZCconfig = '[' + tenant.name + ']\n'
+    ZCconfig = ZCconfig + 'url=' + apiUrl.slice(0, -4) + '\n'
+    ZCconfig = ZCconfig + 'tenant=' + tenant.name + '\n'
+    ZCconfig = ZCconfig + 'auth_token=' + user.token + '\n'
+
+    return ZCconfig
+  }
+
+  renderModal() {
+    const { user, tenant, timezone } = this.props
+    const { isModalOpen, showZuulClientConfig } = this.state
+    let config = this.ZuulClientConfig(tenant, user.data)
+    let valid_until = moment.unix(user.data.expires_at).tz(timezone).format('YYYY-MM-DD HH:mm:ss')
+    return (
+      <React.Fragment>
+        <Modal
+          variant={ModalVariant.small}
+          title="User Info"
+          isOpen={isModalOpen}
+          onClose={this.handleModalToggle}
+          actions={[
+            <Button
+              key="SignOut"
+              variant="primary"
+              onClick={() => {
+                this.props.signOut()
+              }}
+              title="Note that you will be logged out of Zuul, but not out of your identity provider.">
+              Sign Out &nbsp;
+              <SignOutAltIcon title='Sign Out' />
+            </Button>
+          ]}
+        >
+          <div>
+            <p key="user">Name: <strong>{user.data.profile.name}</strong></p>
+            <p key="preferred_username">Logged in as: <strong>{user.data.profile.preferred_username}</strong>&nbsp;
+              {(user.isAdmin && user.scope.indexOf(tenant.name) !== -1) && (
+                <HatWizardIcon title='This user can perform admin tasks' />
+              )}</p>
+            <Accordion asDefinitionList>
+              <AccordionItem>
+                <AccordionToggle
+                  onClick={this.handleConfigToggle}
+                  isExpanded={showZuulClientConfig}
+                  title='Configuration parameters that can be used to perform tasks with the CLI'
+                  id="ZCConfig">
+                  Show Zuul Client Config
+                </AccordionToggle>
+                <AccordionContent
+                  isHidden={!showZuulClientConfig}>
+                  <ClipboardCopy isCode isReadOnly variant={ClipboardCopyVariant.expansion}>{config}</ClipboardCopy>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+            <p key="valid_until">Token expiry date: <strong>{valid_until}</strong></p>
+            <p key="footer">
+              Zuul stores and uses information such as your username
+              and your email to provide some features. This data is
+              stored <strong>in your browser only</strong> and is
+              discarded once you log out.
+            </p>
+          </div>
+        </Modal>
+      </React.Fragment>
+    )
+  }
+
+  renderButton(containerStyles) {
+
+    const { user } = this.props
+    if (!user.data) {
+      return (
+        <div style={containerStyles}>
+          <Button
+            key="SignIn"
+            variant={ButtonVariant.plain}
+            onClick={() => {
+              const redirect_target = window.location.href.slice(getHomepageUrl().length)
+              localStorage.setItem('zuul_auth_redirect', redirect_target)
+              this.props.signIn({ redirect_uri: getHomepageUrl() + 'auth_callback' })
+            }}>
+            Sign in &nbsp;
+            <SignInAltIcon title='Sign In' />
+          </Button>
+        </div>
+      )
+    } else {
+      return (user.data.isFetching ? <div style={containerStyles}>Loading...</div> :
+        <div style={containerStyles}>
+          {this.renderModal()}
+          <Button
+            variant={ButtonVariant.plain}
+            key="userinfo"
+            onClick={this.handleModalToggle}>
+            <UserIcon title='User details' />
+            &nbsp;{user.data.profile.preferred_username}&nbsp;
+          </Button>
+        </div>
+      )
+    }
+  }
+
+  render() {
+    const { info, auth } = this.props
+    const textColor = '#d1d1d1'
+    const containerStyles = {
+      color: textColor,
+      border: 'solid #2b2b2b',
+      borderWidth: '0 0 0 1px',
+      display: 'initial',
+      padding: '6px'
+    }
+
+    if (info.isFetching) {
+      return (<><div style={containerStyles}>Fetching auth info ...</div></>)
+    }
+    if (auth.info) {
+      return this.renderButton(containerStyles)
+    } else {
+      return (<div style={containerStyles} title="Authentication disabled">-</div>)
+    }
+  }
+}
+
+export default connect(state => ({
+  auth: state.auth,
+  user: state.user,
+  tenant: state.tenant,
+  timezone: state.timezone,
+  info: state.info,
+}))(withAuth(AuthContainer))
diff --git a/web/src/containers/config/Config.jsx b/web/src/containers/config/Config.jsx
index 7c21229cba..3d402a116c 100644
--- a/web/src/containers/config/Config.jsx
+++ b/web/src/containers/config/Config.jsx
@@ -90,7 +90,7 @@ class ConfigModal extends React.Component {
           ]}
         >
           <div>
-            <p key="info">User configurable settings are saved in browser local storage only.</p>
+            <p key="info">Application settings are saved in browser local storage only. They are applied whether authenticated or not.</p>
             <Switch
               key="autoreload"
               id="autoreload"
diff --git a/web/src/index.js b/web/src/index.js
index 15b24dd59e..c1f90fa287 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -46,6 +46,7 @@ import App from './App'
 // style attributes of PF4 component (as their CSS is loaded when the component
 // is imported within the App).
 import './index.css'
+import ZuulAuthProvider from './ZuulAuthProvider'
 
 const store = configureStore()
 
@@ -54,6 +55,8 @@ store.dispatch(fetchInfoIfNeeded())
 
 ReactDOM.render(
   <Provider store={store}>
-    <Router basename={new URL(getHomepageUrl()).pathname}><App /></Router>
+    <ZuulAuthProvider>
+      <Router basename={new URL(getHomepageUrl()).pathname}><App /></Router>
+    </ZuulAuthProvider>
   </Provider>, document.getElementById('root'))
 registerServiceWorker()
diff --git a/web/src/pages/AuthCallback.jsx b/web/src/pages/AuthCallback.jsx
new file mode 100644
index 0000000000..c31f1d222c
--- /dev/null
+++ b/web/src/pages/AuthCallback.jsx
@@ -0,0 +1,41 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+import React, { useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+
+import { Fetching } from '../containers/Fetching'
+
+// Several pages use the location hash in a way that would be
+// difficult to disentangle from the OIDC callback parameters.  This
+// dedicated callback page accepts the OIDC params and then internally
+// redirects to the page we saved before redirecting to the IDP.
+
+function AuthCallbackPage() {
+  let history = useHistory()
+
+  useEffect(() => {
+    const redirect = localStorage.getItem('zuul_auth_redirect')
+    history.push(redirect)
+  }, [history])
+
+  return (
+    <>
+      <div>Login successful. You will be redirected shortly...</div>
+      <Fetching />
+    </>
+  )
+}
+
+export default AuthCallbackPage
diff --git a/web/src/reducers/auth.js b/web/src/reducers/auth.js
new file mode 100644
index 0000000000..a06bf54125
--- /dev/null
+++ b/web/src/reducers/auth.js
@@ -0,0 +1,76 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+import {
+  AUTH_CONFIG_REQUEST,
+  AUTH_CONFIG_SUCCESS,
+  AUTH_CONFIG_FAIL,
+} from '../actions/auth'
+
+// Load the defaults from local storage if it exists so that we
+// construct the same AuthProvider we had before we navigated to the
+// IDP redirect.
+const stored_params = localStorage.getItem('zuul_auth_params')
+let auth_params = {
+  authority: '',
+  clientId: '',
+  scope: '',
+}
+if (stored_params !== null) {
+  auth_params = JSON.parse(stored_params)
+}
+
+export default (state = {
+  isFetching: false,
+  info: null,
+  auth_params: auth_params,
+}, action) => {
+  const json_params = JSON.stringify(action.auth_params)
+  switch (action.type) {
+    case AUTH_CONFIG_REQUEST:
+      return {
+        ...state,
+        isFetching: true,
+        info: null,
+      }
+    case AUTH_CONFIG_SUCCESS:
+      // Make sure we only update the auth_params object if something actually
+      // changes.  Otherwise, it will re-create the AuthProvider which
+      // may cause errors with auth state if it happens concurrently with
+      // a login.
+      if (json_params === JSON.stringify(state.auth_params)) {
+        return {
+          ...state,
+          isFetching: false,
+          info: action.info,
+        }
+      } else {
+        localStorage.setItem('zuul_auth_params', json_params)
+        return {
+          ...state,
+          isFetching: false,
+          info: action.info,
+          auth_params: action.auth_params,
+        }
+      }
+    case AUTH_CONFIG_FAIL:
+      return {
+        ...state,
+        isFetching: false,
+        info: null,
+      }
+    default:
+      return state
+  }
+}
diff --git a/web/src/reducers/index.js b/web/src/reducers/index.js
index 32b2aa7d4a..2e47320cdf 100644
--- a/web/src/reducers/index.js
+++ b/web/src/reducers/index.js
@@ -14,6 +14,7 @@
 
 import { combineReducers } from 'redux'
 
+import auth from './auth'
 import configErrors from './configErrors'
 import change from './change'
 import component from './component'
@@ -33,8 +34,10 @@ import status from './status'
 import tenant from './tenant'
 import tenants from './tenants'
 import timezone from './timezone'
+import user from './user'
 
 const reducers = {
+  auth,
   build,
   change,
   component,
@@ -54,6 +57,7 @@ const reducers = {
   tenants,
   timezone,
   preferences,
+  user,
 }
 
 export default combineReducers(reducers)
diff --git a/web/src/reducers/info.js b/web/src/reducers/info.js
index 89cadf2753..f29ab46ecd 100644
--- a/web/src/reducers/info.js
+++ b/web/src/reducers/info.js
@@ -21,6 +21,7 @@ import {
 export default (state = {
   isFetching: false,
   tenant: null,
+  capabilities: null,
 }, action) => {
   switch (action.type) {
     case INFO_FETCH_REQUEST:
@@ -33,6 +34,7 @@ export default (state = {
       return {
         isFetching: false,
         tenant: action.tenant,
+        capabilities: action.capabilities,
         ready: true
       }
     default:
diff --git a/web/src/reducers/initialState.js b/web/src/reducers/initialState.js
index 422bf9f3ea..ce74956e9e 100644
--- a/web/src/reducers/initialState.js
+++ b/web/src/reducers/initialState.js
@@ -26,4 +26,6 @@ export default {
     isFetching: false,
     url: null,
   },
+  auth: {},
+  user: {},
 }
diff --git a/web/src/reducers/user.js b/web/src/reducers/user.js
new file mode 100644
index 0000000000..1a36fdae1f
--- /dev/null
+++ b/web/src/reducers/user.js
@@ -0,0 +1,74 @@
+// Copyright 2020 Red Hat, Inc
+//
+// 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.
+
+
+import {
+  USER_LOGGED_IN,
+  USER_LOGGED_OUT,
+} from '../actions/user'
+import {
+  USER_ACL_REQUEST,
+  USER_ACL_SUCCESS,
+  USER_ACL_FAIL,
+} from '../actions/auth'
+
+export default (state = {
+  isFetching: false,
+  data: null,
+  scope: [],
+  isAdmin: false,
+  tenant: null,
+}, action) => {
+  switch (action.type) {
+    case USER_LOGGED_IN: {
+      return {
+        isFetching: false,
+        data: action.user,
+        token: action.token,
+        scope: [],
+        isAdmin: false
+      }
+    }
+    case USER_LOGGED_OUT:
+      return {
+        isFetching: false,
+        data: null,
+        token: null,
+        scope: [],
+        isAdmin: false
+      }
+    case USER_ACL_REQUEST:
+      return {
+        ...state,
+        tenant: action.tenant,
+        isFetching: true
+      }
+    case USER_ACL_FAIL:
+      return {
+        ...state,
+        isFetching: false,
+        scope: [],
+        isAdmin: false
+      }
+    case USER_ACL_SUCCESS:
+      return {
+        ...state,
+        isFetching: false,
+        scope: action.scope,
+        isAdmin: action.isAdmin
+      }
+    default:
+      return state
+  }
+}
diff --git a/web/src/routes.js b/web/src/routes.js
index 90a06bc3b7..efbef2d040 100644
--- a/web/src/routes.js
+++ b/web/src/routes.js
@@ -29,6 +29,7 @@ import ConfigErrorsPage from './pages/ConfigErrors'
 import TenantsPage from './pages/Tenants'
 import StreamPage from './pages/Stream'
 import OpenApiPage from './pages/OpenApi'
+import AuthCallbackPage from './pages/AuthCallback'
 
 // The Route object are created in the App component.
 // Object with a title are created in the menu.
@@ -89,27 +90,27 @@ const routes = () => [
   {
     to: '/build/:buildId',
     component: BuildPage,
-    props: {'activeTab': 'results'},
+    props: { 'activeTab': 'results' },
   },
   {
     to: '/build/:buildId/artifacts',
     component: BuildPage,
-    props: {'activeTab': 'artifacts'},
+    props: { 'activeTab': 'artifacts' },
   },
   {
     to: '/build/:buildId/logs',
     component: BuildPage,
-    props: {'activeTab': 'logs'},
+    props: { 'activeTab': 'logs' },
   },
   {
     to: '/build/:buildId/console',
     component: BuildPage,
-    props: {'activeTab': 'console'},
+    props: { 'activeTab': 'console' },
   },
   {
     to: '/build/:buildId/log/:file*',
     component: BuildPage,
-    props: {'activeTab': 'logs', 'logfile': true},
+    props: { 'activeTab': 'logs', 'logfile': true },
   },
   {
     to: '/buildset/:buildsetId',
@@ -134,6 +135,11 @@ const routes = () => [
     component: ComponentsPage,
     noTenantPrefix: true,
   },
+  {
+    to: '/auth_callback',
+    component: AuthCallbackPage,
+    noTenantPrefix: true,
+  },
 ]
 
 export { routes }
diff --git a/web/src/store.dev.js b/web/src/store.dev.js
index 2c0f16a96b..6bdb750d90 100644
--- a/web/src/store.dev.js
+++ b/web/src/store.dev.js
@@ -32,7 +32,11 @@ export default function configureStore(initialState) {
         // TODO (felix): Re-enable the status.status path once we know how to
         // solve the weird state mutations that are done somewhere deep within
         // the logic of the status page (or its child components).
-        reduxImmutableStateInvariant({ ignore: ['status.status'] })
+        reduxImmutableStateInvariant({
+          ignore: [
+            'status.status',
+          ]
+        })
       )
     )
   )
diff --git a/web/yarn.lock b/web/yarn.lock
index 98c8c14c29..0c7d45b274 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2415,6 +2415,11 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
   integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
 
+acorn@^7.4.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -3040,6 +3045,11 @@ base64-js@^1.0.2, base64-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
+base64-js@^1.3.0, base64-js@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
@@ -4247,11 +4257,21 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.1, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^2.6.4:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.5.0:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
+core-js@^3.8.3:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
+  integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4396,6 +4416,16 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^3.1.9-1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b"
+  integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==
+
+crypto-js@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
+  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+
 crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
@@ -10277,6 +10307,34 @@ octokit-pagination-methods@^1.1.0:
   resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
   integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
 
+oidc-client@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/oidc-client/-/oidc-client-1.10.1.tgz#fe67ae54924fc1c338062f3fd733be362026192c"
+  integrity sha512-/QB5Nl7c9GmT9ir1E+OVY3+yZZnuk7Qa9ZEAJqSvDq0bAyAU9KAgeKipTEfKjGdGLTeOLy9FRWuNpULMkfZydQ==
+  dependencies:
+    base64-js "^1.3.0"
+    core-js "^2.6.4"
+    crypto-js "^3.1.9-1"
+    uuid "^3.3.2"
+
+oidc-client@^1.11.5:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/oidc-client/-/oidc-client-1.11.5.tgz#020aa193d68a3e1f87a24fcbf50073b738de92bb"
+  integrity sha512-LcKrKC8Av0m/KD/4EFmo9Sg8fSQ+WFJWBrmtWd+tZkNn3WT/sQG3REmPANE9tzzhbjW6VkTNy4xhAXCfPApAOg==
+  dependencies:
+    acorn "^7.4.1"
+    base64-js "^1.5.1"
+    core-js "^3.8.3"
+    crypto-js "^4.0.0"
+    serialize-javascript "^4.0.0"
+
+oidc-react@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/oidc-react/-/oidc-react-1.5.1.tgz#afe83335252b7657835298b80f5e4b8bbb8f5bd1"
+  integrity sha512-rbNfWUBRiqolht9J5tRu5HktDs8yXii1KfOBXtM9uwQNaiY0UgvIzl2h7NNOYA04TFxKtGlXkwrs9cPn28JwEg==
+  dependencies:
+    oidc-client "^1.11.5"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -13271,6 +13329,13 @@ serialize-javascript@^2.1.2:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
   integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
 
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"