oauth2 fixes

2026-06-24 05:05:39 +00:00 · 2025-03-25 15:42:58 +05:30
parent b795b1c5ce
commit 8e873013a9
9 changed files with 239 additions and 263 deletions
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -1,28 +1,20 @@
-import React, { useRef, forwardRef, useState, useEffect, useMemo } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconLoader2, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { IconCaretDown, IconSettings, IconKey, IconHelp, IconAdjustmentsHorizontal } from '@tabler/icons';
 import Dropdown from 'components/Dropdown';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { clearOauth2Cache, fetchOauth2Credentials, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
-import toast from 'react-hot-toast';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import { cloneDeep, find } from 'lodash';
-import { getAllVariables } from 'utils/collections/index';
-import brunoCommon from '@usebruno/common';
-const { interpolate } = brunoCommon;
+import Oauth2ActionButtons from '../Oauth2ActionButtons/index';

 const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAuth, collection, folder }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const [fetchingToken, toggleFetchingToken] = useState(false);
-  const [refreshingToken, toggleRefreshingToken] = useState(false);
-  const [showRefreshButton, setShowRefreshButton] = useState(false);

  const oAuth = get(request, 'auth.oauth2', {});
  const {
@@ -44,17 +36,9 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
    autoFetchToken
  } = oAuth;

-  const { uid: collectionUid } = collection;
-  
-  const interpolatedAccessTokenUrl = useMemo(() => {
-    const variables = getAllVariables(collection, item);
-    return interpolate(accessTokenUrl, variables);
-  }, [collection, item, accessTokenUrl]);
-
  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;

-
  const TokenPlacementIcon = forwardRef((props, ref) => {
    return (
      <div ref={ref} className="flex items-center justify-end token-placement-label select-none">
@@ -73,46 +57,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
    );
  });

-
-  const handleFetchOauth2Credentials = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleFetchingToken(true);
-    try {
-      await dispatch(fetchOauth2Credentials({ 
-        itemUid: item.uid, 
-        request: requestCopy, 
-        collection,
-        folderUid: folder?.uid || null
-      }));
-      toggleFetchingToken(false);
-      toast.success('token fetched successfully!');
-    }
-    catch (error) {
-      console.error(error);
-      toggleFetchingToken(false);
-      toast.error('An error occured while fetching token!');
-    }
-  }
-
-  const handleRefreshAccessToken = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleRefreshingToken(true);
-    try {
-      await dispatch(refreshOauth2Credentials({ request: requestCopy, collection }));
-      toggleRefreshingToken(false);
-      toast.success('token refreshed successfully!');
-    }
-    catch (error) {
-      console.error(error);
-      toggleRefreshingToken(false);
-      toast.error('An error occured while refreshing token!');
-    }
-  }
-
  const handleSave = () => { save(); };

  const handleChange = (key, value) => {
@@ -172,24 +116,6 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
    );
  };

-  const handleClearCache = (e) => {
-    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
-  const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedAccessTokenUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId);
-  const creds = credentialsData?.credentials || {};
-
-  useEffect(() => {
-    // Update visibility whenever credentials change
-    setShowRefreshButton(Boolean(creds?.refresh_token && creds?.access_token));
-  }, [creds?.refresh_token, creds?.access_token, credentialsData]);
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
@@ -400,19 +326,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
          </div>
        </div>
      </div>
-      <div className="flex flex-row gap-4 mt-4">
-        <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-          Get Access Token{fetchingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        {showRefreshButton && (
-          <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-            Refresh Token{refreshingToken ? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-          </button>
-        )}
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
+      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
    </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
@@ -1,27 +1,20 @@
-import React, { useRef, forwardRef, useState, useMemo } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconLoader2, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
+import { IconCaretDown, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import toast from 'react-hot-toast';
-import { cloneDeep } from 'lodash';
-import { getAllVariables } from 'utils/collections/index';
-import brunoCommon from '@usebruno/common';
-const { interpolate } = brunoCommon;
+import Oauth2ActionButtons from '../Oauth2ActionButtons/index';

 const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const [fetchingToken, toggleFetchingToken] = useState(false);
-  const [refreshingToken, toggleRefreshingToken] = useState(false);

  const oAuth = get(request, 'auth.oauth2', {});

@@ -40,48 +33,9 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
    autoFetchToken
  } = oAuth;

-  const interpolatedAccessTokenUrl = useMemo(() => {
-    const variables = getAllVariables(collection, item);
-    return interpolate(accessTokenUrl, variables);
-  }, [collection, item, accessTokenUrl]);
-
  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;

-  const handleFetchOauth2Credentials = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleFetchingToken(true);
-    try {
-      await dispatch(fetchOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
-      toggleFetchingToken(false);
-      toast.success('Token fetched successfully!');
-    }
-    catch (error) {
-      console.error('could not fetch the token!');
-      console.error(error);
-      toggleFetchingToken(false);
-      toast.error('An error occured while fetching token!');
-    }
-  }
-
-  const handleRefreshAccessToken = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleRefreshingToken(true);
-    try {
-      await dispatch(refreshOauth2Credentials({ request: requestCopy, collection }));
-      toggleRefreshingToken(false);
-      toast.success('token refreshed successfully!');
-    }
-    catch(error) {
-      console.error(error);
-      toggleRefreshingToken(false);
-      toast.error('An error occured while refreshing token!');
-    }
-  };

  const handleSave = () => { save(); };

@@ -129,16 +83,6 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
    );
  };

-  const handleClearCache = (e) => {
-      dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
@@ -352,17 +296,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
        </div>
      </div>

-      <div className="flex flex-row gap-4 mt-4">
-        <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-          Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-          Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
+      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
+
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
@@ -0,0 +1,96 @@
+import { useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
+import toast from 'react-hot-toast';
+import { cloneDeep, find } from 'lodash';
+import { IconLoader2 } from '@tabler/icons';
+import brunoCommon from '@usebruno/common';
+const { interpolate } = brunoCommon;
+import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
+import { getAllVariables } from "utils/collections/index";
+
+const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, credentialsId }) => {
+  const { uid: collectionUid } = collection;
+
+  const dispatch = useDispatch();
+  const [fetchingToken, toggleFetchingToken] = useState(false);
+  const [refreshingToken, toggleRefreshingToken] = useState(false);
+
+  const interpolatedAccessTokenUrl = useMemo(() => {
+    const variables = getAllVariables(collection, item);
+    return interpolate(accessTokenUrl, variables);
+  }, [collection, item, accessTokenUrl]);
+
+  const credentialsData = find(collection?.oauth2Credentials, creds => creds?.url == interpolatedAccessTokenUrl && creds?.collectionUid == collectionUid && creds?.credentialsId == credentialsId);
+  const creds = credentialsData?.credentials || {};
+
+  const handleFetchOauth2Credentials = async () => {
+    let requestCopy = cloneDeep(request);
+    requestCopy.oauth2 = requestCopy?.auth.oauth2;
+    requestCopy.headers = {};
+    toggleFetchingToken(true);
+    try {
+      const credentials = await dispatch(fetchOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
+      toggleFetchingToken(false);
+      if (credentials?.access_token) {
+        toast.success('token fetched successfully!'); 
+      }
+      else {
+        toast.error('An error occured while fetching token!');  
+      }
+    }
+    catch (error) {
+      console.error('could not fetch the token!');
+      console.error(error);
+      toggleFetchingToken(false);
+      toast.error('An error occured while fetching token!');
+    }
+  }
+
+  const handleRefreshAccessToken = async () => {
+    let requestCopy = cloneDeep(request);
+    requestCopy.oauth2 = requestCopy?.auth.oauth2;
+    requestCopy.headers = {};
+    toggleRefreshingToken(true);
+    try {
+      const credentials = await dispatch(refreshOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
+      toggleRefreshingToken(false);
+      if (credentials?.access_token) {
+        toast.success('token refreshed successfully!'); 
+      }
+      else {
+        toast.error('An error occured while refreshing token!');  
+      }
+    }
+    catch(error) {
+      console.error(error);
+      toggleRefreshingToken(false);
+      toast.error('An error occured while refreshing token!');
+    }
+  };
+
+  const handleClearCache = (e) => {
+    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
+    .then(() => {
+      toast.success('cleared cache successfully');
+    })
+    .catch((err) => {
+      toast.error(err.message);
+    });
+  };
+
+  return (
+    <div className="flex flex-row gap-4 mt-4">
+      <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
+        Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+      </button>
+      {creds?.refresh_token ? <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
+        Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
+      </button> : null}
+      <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
+        Clear Cache
+      </button>
+    </div>
+  )
+}
+
+export default Oauth2ActionButtons;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
@@ -140,25 +140,29 @@ const Oauth2TokenViewer = ({ collection, item, url, credentialsId, handleRun })
  return (
    <StyledWrapper className="relative w-auto h-fit mt-2">
      {Object.keys(creds)?.length ? (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
-          <TokenSection title="Access Token" token={creds.access_token} />
-          <TokenSection title="Refresh Token" token={creds.refresh_token} />
-          <TokenSection title="ID Token" token={creds.id_token} />
-          {(creds.token_type || creds.scope) ? <div className="mt-3 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-xs">
-            <div className="grid grid-cols-2 gap-2">
-              {creds.token_type ? <div className="flex items-center space-x-1">
-                <span className="font-medium">Token Type:</span>
-                <span className="text-gray-600 dark:text-gray-300">{creds.token_type}</span>
-              </div> : null}
-              {creds?.scope ? <div className="flex items-center space-x-1 min-w-0">
-                <span className="font-medium flex-shrink-0">Scope:</span>
-                <span className="text-gray-600 dark:text-gray-300 truncate" title={creds.scope}>
-                  {creds.scope}
-                </span>
-              </div> : null}
-            </div>
-          </div> : null}
-        </div>
+        creds?.error ? (
+          <pre className="text-red-600 dark:text-red-400">Error fetching token. Check network logs for more details.</pre>
+        ) : (
+          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
+            <TokenSection title="Access Token" token={creds.access_token} />
+            <TokenSection title="Refresh Token" token={creds.refresh_token} />
+            <TokenSection title="ID Token" token={creds.id_token} />
+            {(creds.token_type || creds.scope) ? <div className="mt-3 p-2 bg-gray-50 dark:bg-gray-800 rounded-lg text-xs">
+              <div className="grid grid-cols-2 gap-2">
+                {creds.token_type ? <div className="flex items-center space-x-1">
+                  <span className="font-medium">Token Type:</span>
+                  <span className="text-gray-600 dark:text-gray-300">{creds.token_type}</span>
+                </div> : null}
+                {creds?.scope ? <div className="flex items-center space-x-1 min-w-0">
+                  <span className="font-medium flex-shrink-0">Scope:</span>
+                  <span className="text-gray-600 dark:text-gray-300 truncate" title={creds.scope}>
+                    {creds.scope}
+                  </span>
+                </div> : null}
+              </div>
+            </div> : null}
+          </div>
+        )     
      ) : (
        <div className="text-sm text-gray-500 dark:text-gray-400">No token found</div>
      )}
--- 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,27 +1,20 @@
-import React, { useRef, forwardRef, useState, useMemo } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
-import { IconCaretDown, IconLoader2, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
+import { IconCaretDown, IconSettings, IconKey, IconAdjustmentsHorizontal, IconHelp } from '@tabler/icons';
 import SingleLineEditor from 'components/SingleLineEditor';
-import { fetchOauth2Credentials, clearOauth2Cache, refreshOauth2Credentials } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
 import { inputsConfig } from './inputsConfig';
 import Dropdown from 'components/Dropdown';
 import Oauth2TokenViewer from '../Oauth2TokenViewer/index';
-import toast from 'react-hot-toast';
-import { cloneDeep } from 'lodash';
-import { getAllVariables } from 'utils/collections/index';
-import brunoCommon from '@usebruno/common';
-const { interpolate } = brunoCommon;
+import Oauth2ActionButtons from '../Oauth2ActionButtons/index';

 const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, updateAuth, collection }) => {
  const dispatch = useDispatch();
  const { storedTheme } = useTheme();
  const dropdownTippyRef = useRef();
  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const [fetchingToken, toggleFetchingToken] = useState(false);
-  const [refreshingToken, toggleRefreshingToken] = useState(false);

  const oAuth = get(request, 'auth.oauth2', {});

@@ -45,45 +38,6 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
  const refreshTokenUrlAvailable = refreshTokenUrl?.trim() !== '';
  const isAutoRefreshDisabled = !refreshTokenUrlAvailable;

-  const interpolatedAccessTokenUrl = useMemo(() => {
-    const variables = getAllVariables(collection, item);
-    return interpolate(accessTokenUrl, variables);
-  }, [collection, item, accessTokenUrl]);
-
-  const handleFetchOauth2Credentials = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleFetchingToken(true);
-    try {
-      await dispatch(fetchOauth2Credentials({ itemUid: item.uid, request: requestCopy, collection }));
-      toggleFetchingToken(false);
-      toast.success('Token fetched successfully!');
-    }
-    catch (error) {
-      console.error(error);
-      toggleFetchingToken(false);
-      toast.error('An error occured while fetching token!');
-    }
-  }
-
-  const handleRefreshAccessToken = async () => {
-    let requestCopy = cloneDeep(request);
-    requestCopy.oauth2 = requestCopy?.auth.oauth2;
-    requestCopy.headers = {};
-    toggleRefreshingToken(true);
-    try {
-      await dispatch(refreshOauth2Credentials({ request: requestCopy, collection }));
-      toggleRefreshingToken(false);
-      toast.success('token refreshed successfully!');
-    }
-    catch(error) {
-      console.error(error);
-      toggleRefreshingToken(false);
-      toast.error('An error occured while refreshing token!');
-    }
-  };
-
  const handleSave = () => { save(); }

  const TokenPlacementIcon = forwardRef((props, ref) => {
@@ -132,16 +86,6 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
    );
  };

-  const handleClearCache = (e) => {
-    dispatch(clearOauth2Cache({ collectionUid: collection?.uid, url: interpolatedAccessTokenUrl, credentialsId }))
-      .then(() => {
-        toast.success('cleared cache successfully');
-      })
-      .catch((err) => {
-        toast.error(err.message);
-      });
-  };
-
  return (
    <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
      <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
@@ -354,18 +298,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
          </div>
        </div>
      </div>
-
-      <div className="flex flex-row gap-4 mt-4">
-        <button onClick={handleFetchOauth2Credentials} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-          Get Access Token{fetchingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        <button onClick={handleRefreshAccessToken} className={`submit btn btn-sm btn-secondary w-fit flex flex-row`}>
-          Refresh Token{refreshingToken? <IconLoader2 className="animate-spin ml-2" size={18} strokeWidth={1.5} /> : ""}
-        </button>
-        <button onClick={handleClearCache} className="submit btn btn-sm btn-secondary w-fit">
-          Clear Cache
-        </button>
-      </div>
+      <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js
@@ -1293,7 +1293,7 @@ export const fetchOauth2Credentials = (payload) => async (dispatch, getState) =>
 };

 export const refreshOauth2Credentials = (payload) => async (dispatch, getState) => {
-  const { request, collection, folderUid, itemId } = payload;
+  const { request, collection, folderUid, itemUid } = payload;
  return new Promise((resolve, reject) => {
    window.ipcRenderer
      .invoke('renderer:refresh-oauth2-credentials', { request, collection })
@@ -1306,7 +1306,7 @@ export const refreshOauth2Credentials = (payload) => async (dispatch, getState)
            credentialsId,
            debugInfo,
            folderUid: folderUid || null,
-            itemId: !folderUid ? itemId : null
+            itemUid: !folderUid ? itemUid : null
          })
        );
        resolve(credentials);
--- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js
@@ -1581,12 +1581,9 @@ export const collectionsSlice = createSlice({
    },
    updateFolderAuth: (state, action) => {
      const collection = findCollectionByUid(state.collections, action.payload.collectionUid);
-      
-      console.log('action.payload.content inside bro', action.payload);
      if (!collection) return;

      const folder = collection ? findItemInCollection(collection, action.payload.itemUid) : null;
-      console.log('folder inside bro', folder);
      if (!folder) return;

      if (folder) {
--- a/packages/bruno-electron/src/ipc/collection.js
+++ b/packages/bruno-electron/src/ipc/collection.js
@@ -1026,8 +1026,8 @@ const registerRendererEventHandlers = (mainWindow, watcher, lastOpenedCollection
            collectionPath
          });
          requestCopy = newRequest
-          let { credentials, url, credentialsId } = await refreshOauth2Token(requestCopy, collectionUid);
-          return { credentials, url, collectionUid, credentialsId };
+          let { credentials, url, credentialsId, debugInfo } = await refreshOauth2Token(requestCopy, collectionUid);
+          return { credentials, url, collectionUid, credentialsId, debugInfo };
        }
    } catch (error) {
      return Promise.reject(error);
--- a/packages/bruno-electron/src/utils/oauth2.js
+++ b/packages/bruno-electron/src/utils/oauth2.js
@@ -8,6 +8,7 @@ const { safeParseJSON, safeStringifyJSON } = require('./common');
 const oauth2Store = new Oauth2Store();

 const persistOauth2Credentials = ({ collectionUid, url, credentials, credentialsId }) => {
+  if (credentials?.error || !credentials?.access_token) return;
  const enhancedCredentials = {
    ...credentials,
    created_at: Date.now(),
@@ -20,8 +21,13 @@ const clearOauth2Credentials = ({ collectionUid, url, credentialsId }) => {
 };

 const getStoredOauth2Credentials = ({ collectionUid, url, credentialsId }) => {
-  const credentials = oauth2Store.getCredentialsForCollection({ collectionUid, url, credentialsId });
-  return credentials;
+  try {
+    const credentials = oauth2Store.getCredentialsForCollection({ collectionUid, url, credentialsId });
+    return credentials;
+  }
+  catch(error) {
+    return null;
+  }
 };

 const isTokenExpired = (credentials) => {
@@ -675,18 +681,109 @@ const refreshOauth2Token = async (requestCopy, collectionUid) => {
    requestCopy.headers['Accept'] = 'application/json';
    requestCopy.data = data;
    requestCopy.url = url;
+    requestCopy.responseType = 'arraybuffer';
+
+        // Initialize variables to hold request and response data for debugging
+    let axiosRequestInfo = null;
+    let axiosResponseInfo = null;
+    let debugInfo = { data: [] };

    const axiosInstance = makeAxiosInstance();
+    axiosInstance.interceptors.request.use((config) => {
+      const requestData = typeof config?.data === 'string' ? config?.data : safeStringifyJSON(config?.data);
+      axiosRequestInfo = {
+        method: config.method.toUpperCase(),
+        url: config.url,
+        headers: config.headers,
+        data: requestData,
+        dataBuffer: Buffer.from(requestData),
+        timestamp: Date.now(),
+      };
+      return config;
+    });
+
+    // Interceptor to capture response data
+    axiosInstance.interceptors.response.use((response) => {
+      axiosResponseInfo = {
+        url: response?.url,
+        status: response.status,
+        statusText: response.statusText,
+        headers: response.headers,
+        data: response.data,
+        timestamp: Date.now(),
+        timeline: response?.timeline
+      };
+      return response;
+    }, (error) => {
+      if (error.response) {
+        axiosResponseInfo = {
+          url: error?.response?.url,
+          status: error.response.status,
+          statusText: error.response.statusText,
+          headers: error.response.headers,
+          data: error.response.data,
+          timestamp: Date.now(),
+          timeline: error?.response?.timeline,
+          error: 'fetching access token failed! check timeline network logs'
+        };
+      }
+      else if(error?.code) {
+        axiosResponseInfo = {
+          status: '-',
+          statusText: error.code,
+          headers: error?.config?.headers,
+          data: safeStringifyJSON(error?.errors),
+          timeline: error?.response?.timeline
+        };
+      }
+      return axiosResponseInfo;
+    });
+    
+    
    try {
      const response = await axiosInstance(requestCopy);
-      const responseData = Buffer.isBuffer(response.data) ? response.data.toString() : response.data;
-      const parsedResponseData = safeParseJSON(responseData);
+      const parsedResponseData = safeParseJSON(
+        Buffer.isBuffer(response.data) ? response.data.toString() : response.data
+      );
+  
+      // Add the axios request and response info as a main request in debugInfo
+      const axiosMainRequest = {
+        requestId: Date.now().toString(),
+        request: {
+          url: axiosRequestInfo?.url,
+          method: axiosRequestInfo?.method,
+          headers: axiosRequestInfo?.headers || {},
+          data: axiosRequestInfo?.data,
+          dataBuffer: axiosRequestInfo?.dataBuffer,
+          error: null
+        },
+        response: {
+          url: axiosResponseInfo?.url,
+          headers: axiosResponseInfo?.headers,
+          data: parsedResponseData,
+          dataBuffer: axiosResponseInfo?.data,
+          status: axiosResponseInfo?.status,
+          statusText: axiosResponseInfo?.statusText,
+          timeline: axiosResponseInfo?.timeline,
+          error: null
+        },
+        fromCache: false,
+        completed: true,
+        requests: [], // No sub-requests in this context
+      };
+  
+      debugInfo.data.push(axiosMainRequest);
+
+      if (parsedResponseData?.error) {
+        clearOauth2Credentials({ collectionUid, url, credentialsId });
+        return { collectionUid, url, credentials: null, credentialsId, debugInfo }; 
+      }
      persistOauth2Credentials({ collectionUid, url, credentials: parsedResponseData, credentialsId });
-      return { collectionUid, url, credentials: parsedResponseData, credentialsId };
+      return { collectionUid, url, credentials: parsedResponseData, credentialsId, debugInfo };
    } catch (error) {
      clearOauth2Credentials({ collectionUid, url, credentialsId });
      // Proceed without token
-      return { collectionUid, url, credentials: null, credentialsId };
+      return { collectionUid, url, credentials: null, credentialsId, debugInfo };
    }
  }
 };