feat: Add OIDC debug mode

client/src/components/common/Login/Content.jsx

@@ -8,7 +8,8 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation, Trans } from 'react-i18next';
-import { Button, Divider, Form, Grid, Header, Message } from 'semantic-ui-react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Divider, Form, Grid, Header, Message, TextArea } from 'semantic-ui-react';
 import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
 import { Input } from '../../../lib/custom-ui';
 
@@ -23,7 +24,7 @@ import logo from '../../../assets/images/logo.png';
 
 import styles from './Content.module.scss';
 
-const createMessage = (error) => {
+const createMessage = (error, isDebug) => {
   if (!error) {
     return error;
   }
@@ -82,7 +83,7 @@ const createMessage = (error) => {
     default:
       return {
         type: 'warning',
-        content: 'common.unknownError',
+        content: isDebug ? error.message : 'common.unknownError',
       };
   }
 };
@@ -95,6 +96,7 @@ const Content = React.memo(() => {
     isSubmitting,
     isSubmittingWithOidc,
     error,
+    debugLogs,
     step,
   } = useSelector(selectors.selectAuthenticateForm);
 
@@ -124,7 +126,11 @@ const Content = React.memo(() => {
     return initialData;
   });
 
-  const message = useMemo(() => createMessage(error), [error]);
+  const withOidc = !!bootstrap.oidc;
+  const isOidcEnforced = withOidc && bootstrap.oidc.isEnforced;
+  const isOidcDebug = withOidc && bootstrap.oidc.debug;
+
+  const message = useMemo(() => createMessage(error, isOidcDebug), [error, isOidcDebug]);
   const [focusPasswordFieldState, focusPasswordField] = useToggle();
 
   const [emailOrUsernameFieldRef, handleEmailOrUsernameFieldRef] = useNestedRef('inputRef');
@@ -157,14 +163,11 @@ const Content = React.memo(() => {
     dispatch(entryActions.clearAuthenticateError());
   }, [dispatch]);
 
-  const withOidc = !!bootstrap.oidc;
-  const isOidcEnforced = withOidc && bootstrap.oidc.isEnforced;
-
   useEffect(() => {
     if (!isOidcEnforced) {
       emailOrUsernameFieldRef.current.focus();
     }
-  }, [emailOrUsernameFieldRef, isOidcEnforced]);
+  }, [isOidcEnforced, emailOrUsernameFieldRef]);
 
   useDidUpdate(() => {
     if (wasSubmitting && !isSubmitting && error) {
@@ -269,16 +272,27 @@ const Content = React.memo(() => {
                 </>
               )}
               {withOidc && (
-                <Button
-                  fluid
-                  primary={isOidcEnforced}
-                  icon={isOidcEnforced ? 'right arrow' : undefined}
-                  labelPosition={isOidcEnforced ? 'right' : undefined}
-                  content={t('action.logInWithSso')}
-                  loading={isSubmittingWithOidc}
-                  disabled={isSubmitting || isSubmittingWithOidc}
-                  onClick={handleAuthenticateWithOidcClick}
-                />
+                <>
+                  <Button
+                    fluid
+                    primary={isOidcDebug ? undefined : isOidcEnforced}
+                    color={isOidcDebug ? 'orange' : undefined}
+                    icon={isOidcEnforced ? 'right arrow' : undefined}
+                    labelPosition={isOidcEnforced ? 'right' : undefined}
+                    content={isOidcDebug ? t('action.debugSso') : t('action.logInWithSso')}
+                    loading={isSubmittingWithOidc}
+                    disabled={isSubmitting || isSubmittingWithOidc}
+                    onClick={handleAuthenticateWithOidcClick}
+                  />
+                  {debugLogs && (
+                    <TextArea
+                      readOnly
+                      as={TextareaAutosize}
+                      value={debugLogs.join('\n')}
+                      className={styles.debugLog}
+                    />
+                  )}
+                </>
               )}
             </div>
             <div className={styles.poweredBy}>

client/src/components/common/Login/Content.module.scss

@@ -19,6 +19,16 @@
     width: 100%;
   }
 
+  .debugLog {
+    border: 1px solid rgba(9, 30, 66, 0.13);
+    border-radius: 3px;
+    color: #333;
+    line-height: 1.4;
+    margin-top: 16px;
+    padding: 8px 12px;
+    width: 100%;
+  }
+
   .divider {
     font-weight: normal;
   }