feat(auth): Add Authorization Code Flow and new Keycloak recipes with new video tutorials (#4234)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

platform/app/src/utils/OpenIdConnectRoutes.tsx

@@ -3,7 +3,8 @@ import { useEffect } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router';
 import CallbackPage from '../routes/CallbackPage';
 import SignoutCallbackComponent from '../routes/SignoutCallbackComponent';
-import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js';
+import LegacyClient from './legacyOIDCClient';
+import NextClient from './nextOIDCClient';
 
 function _isAbsoluteUrl(url) {
   return url.includes('http://') || url.includes('https://');
@@ -43,7 +44,9 @@ const initUserManager = (oidc, routerBasename) => {
     post_logout_redirect_uri: _makeAbsoluteIfNecessary(post_logout_redirect_uri, baseUri),
   });
 
-  return getUserManagerForOpenIdConnectClient(openIdConnectConfiguration);
+  const client = firstOpenIdClient.useAuthorizationCodeFlow ? NextClient: LegacyClient
+
+  return client(openIdConnectConfiguration);
 };
 
 function LogoutComponent(props) {
@@ -147,12 +150,18 @@ function OpenIdConnectRoutes({ oidc, routerBasename, userAuthenticationService }
   const location = useLocation();
   const { pathname, search } = location;
 
-  const redirect_uri = new URL(userManager.settings._redirect_uri).pathname.replace(
+  const redirectURI = userManager.settings._redirect_uri ?? userManager.settings.redirect_uri;
+  const silentRedirectURI =
+    userManager.settings._silent_redirect_uri ?? userManager.settings.silent_redirect_uri;
+  const postLogoutRedirectURI =
+    userManager.settings._post_logout_redirect_uri ?? userManager.settings.post_logout_redirect_uri;
+
+  const redirect_uri = new URL(redirectURI).pathname.replace(
     routerBasename !== '/' ? routerBasename : '',
     ''
   );
-  const silent_refresh_uri = new URL(userManager.settings._silent_redirect_uri).pathname; //.replace(routerBasename,'')
-  const post_logout_redirect_uri = new URL(userManager.settings._post_logout_redirect_uri).pathname; //.replace(routerBasename,'');
+  const silent_refresh_uri = new URL(silentRedirectURI).pathname; //.replace(routerBasename,'')
+  const post_logout_redirect_uri = new URL(postLogoutRedirectURI).pathname; //.replace(routerBasename,'');
 
   // const pathnameRelative = pathname.replace(routerBasename,'');
 

platform/app/src/utils/nextOIDCClient.ts

@@ -0,0 +1,39 @@
+import { UserManager } from 'oidc-client-ts';
+
+/**
+ * Creates a userManager from oidcSettings
+ * LINK: https://github.com/IdentityModel/oidc-client-js/wiki#configuration
+ *
+ * @param {Object} oidcSettings
+ * @param {string} oidcSettings.authServerUrl,
+ * @param {string} oidcSettings.clientId,
+ * @param {string} oidcSettings.authRedirectUri,
+ * @param {string} oidcSettings.postLogoutRedirectUri,
+ * @param {string} oidcSettings.responseType,
+ * @param {string} oidcSettings.extraQueryParams,
+ */
+export default function getUserManagerForOpenIdConnectClient(oidcSettings) {
+  if (!oidcSettings) {
+    return;
+  }
+
+  if (!oidcSettings.authority || !oidcSettings.client_id || !oidcSettings.redirect_uri) {
+    console.error('Missing required oidc settings:  authority, client_id, redirect_uri');
+    return;
+  }
+
+  const settings = {
+    ...oidcSettings,
+    // The next client always use the code flow with PKCE
+    response_type: 'code',
+    revokeTokensOnSignout: oidcSettings.revokeAccessTokenOnSignout ?? true,
+    filterProtocolClaims: true,
+    loadUserInfo: true,
+    // the followings are default values in the lib so no need to set them
+    // automaticSilentRenew: true,
+  };
+
+  const userManager = new UserManager(settings);
+
+  return userManager;
+}