fix(#1003): content type issue for client credentials & password credentials grant types -- missing client id & secret for password grant type (#2051)

* fix(#1003): content type for client_credentials & password grant types
* feature(#1003): added client is & secret for password credentials grant type

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/index.js

@@ -20,7 +20,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 
-  const { accessTokenUrl, username, password, scope } = oAuth;
+  const { accessTokenUrl, username, password, clientId, clientSecret, scope } = oAuth;
 
   const handleChange = (key, value) => {
     dispatch(
@@ -32,6 +32,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
           accessTokenUrl,
           username,
           password,
+          clientId,
+          clientSecret,
           scope,
           [key]: value
         }

packages/bruno-app/src/components/CollectionSettings/Auth/OAuth2/PasswordCredentials/inputsConfig.js

@@ -11,6 +11,14 @@ const inputsConfig = [
     key: 'password',
     label: 'Password'
   },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret'
+  },
   {
     key: 'scope',
     label: 'Scope'

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js

@@ -20,7 +20,7 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
 
   const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
-  const { accessTokenUrl, username, password, scope } = oAuth;
+  const { accessTokenUrl, username, password, clientId, clientSecret, scope } = oAuth;
 
   const handleChange = (key, value) => {
     dispatch(
@@ -33,6 +33,8 @@ const OAuth2AuthorizationCode = ({ item, collection }) => {
           accessTokenUrl,
           username,
           password,
+          clientId,
+          clientSecret,
           scope,
           [key]: value
         }

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/inputsConfig.js

@@ -11,6 +11,14 @@ const inputsConfig = [
     key: 'password',
     label: 'Password'
   },
+  {
+    key: 'clientId',
+    label: 'Client ID'
+  },
+  {
+    key: 'clientSecret',
+    label: 'Client Secret'
+  },
   {
     key: 'scope',
     label: 'Scope'

packages/bruno-electron/src/ipc/network/index.js

@@ -228,6 +228,7 @@ const configureRequest = async (
           requestCopy
         );
         request.method = 'POST';
+        request.headers['content-type'] = 'application/x-www-form-urlencoded';
         request.data = passwordData;
         request.url = passwordAccessTokenUrl;
         break;
@@ -460,6 +461,15 @@ const registerNetworkIpc = (mainWindow) => {
         scriptingConfig
       );
 
+      const axiosInstance = await configureRequest(
+        collectionUid,
+        request,
+        envVars,
+        collectionVariables,
+        processEnvVars,
+        collectionPath
+      );
+
       mainWindow.webContents.send('main:run-request-event', {
         type: 'request-sent',
         requestSent: {
@@ -475,15 +485,6 @@ const registerNetworkIpc = (mainWindow) => {
         cancelTokenUid
       });
 
-      const axiosInstance = await configureRequest(
-        collectionUid,
-        request,
-        envVars,
-        collectionVariables,
-        processEnvVars,
-        collectionPath
-      );
-
       let response, responseTime;
       try {
         /** @type {import('axios').AxiosResponse} */

packages/bruno-electron/src/ipc/network/interpolate-vars.js

@@ -114,15 +114,21 @@ const interpolateVars = (request, envVars = {}, collectionVariables = {}, proces
       case 'password':
         username = _interpolate(request.oauth2.username) || '';
         password = _interpolate(request.oauth2.password) || '';
+        clientId = _interpolate(request.oauth2.clientId) || '';
+        clientSecret = _interpolate(request.oauth2.clientSecret) || '';
         scope = _interpolate(request.oauth2.scope) || '';
         request.oauth2.accessTokenUrl = _interpolate(request.oauth2.accessTokenUrl) || '';
         request.oauth2.username = username;
         request.oauth2.password = password;
+        request.oauth2.clientId = clientId;
+        request.oauth2.clientSecret = clientSecret;
         request.oauth2.scope = scope;
         request.data = {
           grant_type: 'password',
           username,
           password,
+          client_id: clientId,
+          client_secret: clientSecret,
           scope
         };
         break;

packages/bruno-electron/src/ipc/network/oauth2-helper.js

@@ -98,11 +98,13 @@ const transformClientCredentialsRequest = async (request) => {
 const transformPasswordCredentialsRequest = async (request) => {
   let requestCopy = cloneDeep(request);
   const oAuth = get(requestCopy, 'oauth2', {});
-  const { username, password, scope } = oAuth;
+  const { username, password, clientId, clientSecret, scope } = oAuth;
   const data = {
     grant_type: 'password',
     username,
     password,
+    client_id: clientId,
+    client_secret: clientSecret,
     scope
   };
   const url = requestCopy?.oauth2?.accessTokenUrl;

packages/bruno-electron/src/ipc/network/prepare-request.js

@@ -109,6 +109,8 @@ const setAuthHeaders = (axiosRequest, request, collectionRoot) => {
               accessTokenUrl: get(request, 'auth.oauth2.accessTokenUrl'),
               username: get(request, 'auth.oauth2.username'),
               password: get(request, 'auth.oauth2.password'),
+              clientId: get(request, 'auth.oauth2.clientId'),
+              clientSecret: get(request, 'auth.oauth2.clientSecret'),
               scope: get(request, 'auth.oauth2.scope')
             };
             break;

packages/bruno-lang/v2/src/bruToJson.js

@@ -402,6 +402,8 @@ const sem = grammar.createSemantics().addAttribute('ast', {
                 accessTokenUrl: accessTokenUrlKey ? accessTokenUrlKey.value : '',
                 username: usernameKey ? usernameKey.value : '',
                 password: passwordKey ? passwordKey.value : '',
+                clientId: clientIdKey ? clientIdKey.value : '',
+                clientSecret: clientSecretKey ? clientSecretKey.value : '',
                 scope: scopeKey ? scopeKey.value : ''
               }
             : grantTypeKey?.value && grantTypeKey?.value == 'authorization_code'

packages/bruno-lang/v2/src/collectionBruToJson.js

@@ -264,6 +264,8 @@ const sem = grammar.createSemantics().addAttribute('ast', {
                 accessTokenUrl: accessTokenUrlKey ? accessTokenUrlKey.value : '',
                 username: usernameKey ? usernameKey.value : '',
                 password: passwordKey ? passwordKey.value : '',
+                clientId: clientIdKey ? clientIdKey.value : '',
+                clientSecret: clientSecretKey ? clientSecretKey.value : '',
                 scope: scopeKey ? scopeKey.value : ''
               }
             : grantTypeKey?.value && grantTypeKey?.value == 'authorization_code'

packages/bruno-lang/v2/src/jsonToBru.js

@@ -134,6 +134,8 @@ ${indentString(`grant_type: password`)}
 ${indentString(`access_token_url: ${auth?.oauth2?.accessTokenUrl || ''}`)}
 ${indentString(`username: ${auth?.oauth2?.username || ''}`)}
 ${indentString(`password: ${auth?.oauth2?.password || ''}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
 ${indentString(`scope: ${auth?.oauth2?.scope || ''}`)}
 }
 

packages/bruno-lang/v2/src/jsonToCollectionBru.js

@@ -122,6 +122,8 @@ ${indentString(`grant_type: password`)}
 ${indentString(`access_token_url: ${auth?.oauth2?.accessTokenUrl || ''}`)}
 ${indentString(`username: ${auth?.oauth2?.username || ''}`)}
 ${indentString(`password: ${auth?.oauth2?.password || ''}`)}
+${indentString(`client_id: ${auth?.oauth2?.clientId || ''}`)}
+${indentString(`client_secret: ${auth?.oauth2?.clientSecret || ''}`)}
 ${indentString(`scope: ${auth?.oauth2?.scope || ''}`)}
 }
 

packages/bruno-schema/src/collections/index.js

@@ -149,12 +149,12 @@ const oauth2Schema = Yup.object({
     otherwise: Yup.string().nullable().strip()
   }),
   clientId: Yup.string().when('grantType', {
-    is: (val) => ['authorization_code', 'client_credentials'].includes(val),
+    is: (val) => ['client_credentials', 'password', 'authorization_code'].includes(val),
     then: Yup.string().nullable(),
     otherwise: Yup.string().nullable().strip()
   }),
   clientSecret: Yup.string().when('grantType', {
-    is: (val) => ['authorization_code', 'client_credentials'].includes(val),
+    is: (val) => ['client_credentials', 'password', 'authorization_code'].includes(val),
     then: Yup.string().nullable(),
     otherwise: Yup.string().nullable().strip()
   }),