web UI: user login with OpenID Connect

Under the hood, this uses AuthProvider as supplied by oidc-react.
Most of the theory is explained in the comment in ZuulAuthProvider.jsx

The benefit of doing this is that we allow the AuthProvider and
userManager to handle the callback logic, so we don't need to
handle the callback logic ourselves.  A callback page is still required
though in order to deal with the parameters passed in a successful
redirection from the Identity Provider.

The challenge in using these classes as-is is that our authority
endpoints (eg, the IDP itself) may change from one tenant to
the next; these classes aren't set up for that.  So we need to be
careful about how and when we change those authority URLs.

In terms of functionalities: if the default realm's authentication driver
is set to "OpenIDConnect", display a "Sign in" button. If the the user
is logged in, redirect to the last page visited prior to logging in;
fetch user authorizations and add them to the redux store; display the
user's preferred username in the upper right corner. Clicking on the
user icon in the right corner displays a modal with user information
such as the user's zuul-client configuration, and a sign out button.

Clicking on the sign out button removes user information from the
store (note that it does not log the user out from the Identity Provider).

Add some basic documentation explaining how to configure Zuul with
Google's authentication, and with a Keycloak server.

(This squashes https://review.opendev.org/c/zuul/zuul/+/816208 into
https://review.opendev.org/c/zuul/zuul/+/734082 )

Co-authored-by: James E. Blair <jim@acmegating.com>

Change-Id: I31e71f2795f3f7c4253d0d5b8ed309bfd7d4f98e

1 files changed, 11 insertions, 5 deletions

diff --git a/web/src/routes.js b/web/src/routes.js
index 90a06bc3b..efbef2d04 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 }