feat: OAuth2 - UI for OAuth2 Credentials independent of the Request Output pane

fix: typo - rename OAuth2PasswordCredentials component fix: typo - Use the same name for AuthMode - OAuth 2.0 in collection and request level
2026-06-28 07:04:10 +00:00 · 2024-05-05 21:40:26 +02:00
parent 2064cc88ab
commit dd9cb21f8c
13 changed files with 126 additions and 128 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@@ -86,7 +86,7 @@ const AuthMode = ({ collection }) => {
              onModeChange('oauth2');
            }}
          >
-            Oauth2
+            OAuth 2.0
          </div>
          <div
            className="dropdown-item"
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/AuthorizationCode/index.js
@@ -7,8 +7,6 @@ import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/Redux
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { clearOauth2Cache } from 'utils/network/index';
-import toast from 'react-hot-toast';

 const OAuth2AuthorizationCode = ({ collection }) => {
  const dispatch = useDispatch();
@@ -64,17 +62,6 @@ const OAuth2AuthorizationCode = ({ collection }) => {
      })
    );
  };
-
-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -105,14 +92,6 @@ const OAuth2AuthorizationCode = ({ collection }) => {
          onChange={handlePKCEToggle}
        />
      </div>
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/ClientCredentials/index.js
@@ -7,8 +7,6 @@ import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/Redux
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { clearOauth2Cache } from 'utils/network';
-import toast from 'react-hot-toast';

 const OAuth2ClientCredentials = ({ collection }) => {
  const dispatch = useDispatch();
@@ -41,16 +39,6 @@ const OAuth2ClientCredentials = ({ collection }) => {
    );
  };

-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -72,14 +60,6 @@ const OAuth2ClientCredentials = ({ collection }) => {
          </div>
        );
      })}
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js
@@ -6,11 +6,9 @@ import SingleLineEditor from 'components/SingleLineEditor';
 import { saveCollectionRoot, sendCollectionOauth2Request } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections/index';
-import { clearOauth2Cache } from 'utils/network';
-import toast from 'react-hot-toast';
+import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';

-const OAuth2AuthorizationCode = ({ item, collection }) => {
+const OAuth2PasswordCredentials = ({ collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();

@@ -43,16 +41,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
    );
  };

-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -74,16 +62,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
          </div>
        );
      })}
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };

-export default OAuth2AuthorizationCode;
+export default OAuth2PasswordCredentials;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/index.js
@@ -5,6 +5,7 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
+import CredentialsPreview from 'components/RequestPane/Auth/OAuth2/CredentialsPreview';

 const grantTypeComponentMap = (grantType, collection) => {
  switch (grantType) {
@@ -30,6 +31,7 @@ const OAuth2 = ({ collection }) => {
    <StyledWrapper className="mt-2 w-full">
      <GrantTypeSelector collection={collection} />
      {grantTypeComponentMap(oAuth?.grantType, collection)}
+      <CredentialsPreview collection={collection} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -7,8 +7,6 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { clearOauth2Cache } from 'utils/network/index';
-import toast from 'react-hot-toast';

 const OAuth2AuthorizationCode = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -67,16 +65,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
    );
  };

-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -108,14 +96,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
          onChange={handlePKCEToggle}
        />
      </div>
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
@@ -7,8 +7,6 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { clearOauth2Cache } from 'utils/network';
-import toast from 'react-hot-toast';

 const OAuth2ClientCredentials = ({ item, collection }) => {
  const dispatch = useDispatch();
@@ -42,16 +40,6 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
    );
  };

-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -74,14 +62,6 @@ const OAuth2ClientCredentials = ({ item, collection }) => {
          </div>
        );
      })}
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/StyledWrapper.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  label {
+    display: block;
+    font-size: 0.8125rem;
+  }
+
+  textarea {
+    height: fit-content;
+    max-width: 400px;
+    border: solid 1px ${(props) => props.theme.input.border};
+    background-color: ${(props) => props.theme.input.bg};
+  }
+`;
+
+export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/CredentialsPreview/index.js
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { clearOauth2Cache, readOauth2CachedCredentials } from 'utils/network';
+import { sendCollectionOauth2Request, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import toast from 'react-hot-toast';
+import { useDispatch } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+
+const CredentialsPreview = ({ item, collection }) => {
+  const oauth2CredentialsAreaRef = React.createRef();
+  const [oauth2Credentials, setOauth2Credentials] = useState({});
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    oauth2CredentialsAreaRef.current.value = oauth2Credentials;
+    readOauth2CachedCredentials(collection.uid).then((credentials) => setOauth2Credentials(credentials));
+  }, [oauth2CredentialsAreaRef]);
+
+  const handleRun = async () => {
+    if (item) {
+      dispatch(sendRequest(item, collection.uid));
+    } else {
+      dispatch(sendCollectionOauth2Request(collection.uid));
+    }
+  };
+
+  const handleClearCache = (e) => {
+    clearOauth2Cache(collection?.uid)
+      .then(() => {
+        readOauth2CachedCredentials(collection.uid).then((credentials) => {
+          setOauth2Credentials(credentials);
+          toast.success('Cleared cache successfully');
+        });
+      })
+      .catch((err) => {
+        toast.error(err.message);
+      });
+  };
+
+  const sortedFields = () => {
+    const tokens = {};
+    const extras = {};
+    Object.entries(oauth2Credentials).forEach(([key, value]) => {
+      if (key.endsWith('_token')) {
+        tokens[key] = value;
+      } else {
+        extras[key] = value;
+      }
+    });
+    return { ...tokens, ...extras };
+  };
+
+  return (
+    <StyledWrapper className="flex flex-col w-full gap-1 mt-4">
+      <div className="credential-item-wrapper" ref={oauth2CredentialsAreaRef}>
+        {Object.entries(oauth2Credentials).length > 0 ? (
+          <>
+            <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+              Clear Access Token Cache
+            </button>
+            <details className="cursor-pointer flex flex-row w-full mt-2 gap-2">
+              <summary>Cached OAuth2 Credentials</summary>
+              {Object.entries(sortedFields()).map(([field, value]) => (
+                <div key={field}>
+                  <label className="text-xs">{field}</label>
+                  <textarea className="w-full h-24 p-2 text-xs border rounded" value={value} readOnly />
+                </div>
+              ))}
+            </details>
+          </>
+        ) : (
+          <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
+            Get Access Token
+          </button>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default CredentialsPreview;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
@@ -7,10 +7,8 @@ import { updateAuth } from 'providers/ReduxStore/slices/collections';
 import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import { clearOauth2Cache } from 'utils/network';
-import toast from 'react-hot-toast';

-const OAuth2AuthorizationCode = ({ item, collection }) => {
+const OAuth2PasswordCredentials = ({ item, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();

@@ -44,16 +42,6 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
    );
  };

-  const handleClearCache = (e) => {
-    clearOauth2Cache(collection?.uid)
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      {inputsConfig.map((input) => {
@@ -76,16 +64,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
          </div>
        );
      })}
-      <div className="flex flex-row gap-4">
-        <button onClick={handleRun} className="submit btn btn-sm btn-secondary w-fit">
-          Get Access Token
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
    </StyledWrapper>
  );
 };

-export default OAuth2AuthorizationCode;
+export default OAuth2PasswordCredentials;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/index.js
@@ -5,6 +5,7 @@ import GrantTypeSelector from './GrantTypeSelector/index';
 import OAuth2PasswordCredentials from './PasswordCredentials/index';
 import OAuth2AuthorizationCode from './AuthorizationCode/index';
 import OAuth2ClientCredentials from './ClientCredentials/index';
+import CredentialsPreview from './CredentialsPreview';

 const grantTypeComponentMap = (grantType, item, collection) => {
  switch (grantType) {
@@ -30,6 +31,7 @@ const OAuth2 = ({ item, collection }) => {
    <StyledWrapper className="mt-2 w-full">
      <GrantTypeSelector item={item} collection={collection} />
      {grantTypeComponentMap(oAuth?.grantType, item, collection)}
+      <CredentialsPreview item={item} collection={collection} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/utils/network/index.js
+++ b/packages/bruno-app/src/utils/network/index.js
@@ -50,6 +50,13 @@ export const clearOauth2Cache = async (uid) => {
  });
 };

+export const readOauth2CachedCredentials = async (uid) => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('read-oauth2-cached-credentials', uid).then(resolve).catch(reject);
+  });
+};
+
 export const fetchGqlSchema = async (endpoint, environment, request, collection) => {
  return new Promise((resolve, reject) => {
    const { ipcRenderer } = window;
--- a/packages/bruno-electron/src/ipc/network/index.js
+++ b/packages/bruno-electron/src/ipc/network/index.js
@@ -787,6 +787,17 @@ const registerNetworkIpc = (mainWindow) => {
    });
  });

+  ipcMain.handle('read-oauth2-cached-credentials', async (event, uid) => {
+    return new Promise((resolve, reject) => {
+      try {
+        const oauth2Store = new Oauth2Store();
+        return resolve(oauth2Store.getOauth2DataOfCollection(uid).credentials ?? {});
+      } catch (err) {
+        reject(new Error('Could not read cached oauth2 credentials'));
+      }
+    });
+  });
+
  ipcMain.handle('cancel-http-request', async (event, cancelTokenUid) => {
    return new Promise((resolve, reject) => {
      if (cancelTokenUid && cancelTokens[cancelTokenUid]) {