Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OAuth2 Revamp #3867

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

OAuth2 Revamp #3867

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
22a9502
fix: OAuth2 - auth is successful but token endpoint is returned inste…
pietrygamat Apr 11, 2024
63252d3
feat: OAuth2 - Store authorization information
pietrygamat Apr 11, 2024
4afcd44
feat: OAuth2 - Include resolved authorization details in req object t…
pietrygamat Apr 13, 2024
d982e35
feat: OAuth2 - Do not make axios request when executing collection le…
pietrygamat Apr 13, 2024
2064cc8
feat: OAuth2 - automatically handle Bearer token type only
pietrygamat May 5, 2024
dd9cb21
feat: OAuth2 - UI for OAuth2 Credentials independent of the Request O…
pietrygamat May 5, 2024
3bd8f09
feat: OAuth2 - Supported at the collection level (#1704)
pietrygamat Apr 14, 2024
8f75414
Merge branch 'pr-2077' into feat/oauth2-improvements
helloanoop Jan 23, 2025
f38c7ae
oauth2 ui/ux improvements (#3868)
lohxt1 Jan 23, 2025
1d1e701
oauth2 workflow improvements (#3874)
lohxt1 Jan 24, 2025
c5eeb19
oauth2 updates (#3876)
lohxt1 Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 46 additions & 8 deletions packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu

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

const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, state, pkce, credentialsId, tokenPlacement, tokenPrefix, tokenQueryParamKey, reuseToken } = oAuth;
const { callbackUrl, authorizationUrl, accessTokenUrl, clientId, clientSecret, scope, credentialsPlacement, state, pkce, credentialsId, tokenPlacement, tokenPrefix, tokenQueryKey, reuseToken } = oAuth;

const Icon = forwardRef((props, ref) => {
const TokenPlacementIcon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-end token-placement-label select-none">
{tokenPlacement == 'url' ? 'URL' : 'Headers'}
Expand All @@ -33,6 +33,16 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
);
});

const CredentialsPlacementIcon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-end token-placement-label select-none">
{credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}
<IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
</div>
);
});


const handleFetchOauth2Credentials = async () => {
let requestCopy = cloneDeep(request);
requestCopy.oauth2 = requestCopy?.auth.oauth2;
Expand All @@ -41,11 +51,12 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
try {
await dispatch(fetchOauth2Credentials({ 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!');
}
}

Expand All @@ -67,10 +78,11 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
state,
scope,
pkce,
credentialsPlacement,
credentialsId,
tokenPlacement,
tokenPrefix,
tokenQueryParamKey,
tokenQueryKey,
reuseToken,
[key]: value
}
Expand All @@ -93,10 +105,11 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
clientSecret,
state,
scope,
credentialsPlacement,
credentialsId,
tokenPlacement,
tokenPrefix,
tokenQueryParamKey,
tokenQueryKey,
reuseToken,
pkce: !Boolean(oAuth?.['pkce'])
}
Expand Down Expand Up @@ -146,6 +159,31 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
</div>
);
})}
<div className="flex items-center gap-4 w-full" key={`input-credentials-placement`}>
<label className="block min-w-[140px]">Add Credentials to</label>
<div className="inline-flex items-center cursor-pointer token-placement-selector">
<Dropdown onCreate={onDropdownCreate} icon={<CredentialsPlacementIcon />} placement="bottom-end">
<div
className="dropdown-item"
onClick={() => {
dropdownTippyRef.current.hide();
handleChange('credentialsPlacement', 'body');
}}
>
Request Body
</div>
<div
className="dropdown-item"
onClick={() => {
dropdownTippyRef.current.hide();
handleChange('credentialsPlacement', 'basic_auth_header');
}}
>
Basic Auth Header
</div>
</Dropdown>
</div>
</div>
<div className="flex flex-row w-full gap-4" key="pkce">
<label className="block">Use PKCE</label>
<input
Expand Down Expand Up @@ -180,7 +218,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
<div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
<label className="block min-w-[140px]">Add token to</label>
<div className="inline-flex items-center cursor-pointer token-placement-selector">
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
<Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
<div
className="dropdown-item"
onClick={() => {
Expand Down Expand Up @@ -222,10 +260,10 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
<label className="block font-medium min-w-[140px]">Query Param Key</label>
<div className="single-line-editor-wrapper flex-1">
<SingleLineEditor
value={oAuth['tokenQueryParamKey'] || ''}
value={oAuth['tokenQueryKey'] || ''}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handleChange('tokenQueryParamKey', val)}
onChange={(val) => handleChange('tokenQueryKey', val)}
onRun={handleRun}
collection={collection}
/>
Expand Down
50 changes: 43 additions & 7 deletions packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu

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

const { accessTokenUrl, clientId, clientSecret, scope, credentialsId, tokenPlacement, tokenPrefix, tokenQueryParamKey, reuseToken } = oAuth;
const { accessTokenUrl, clientId, clientSecret, scope, credentialsPlacement, credentialsId, tokenPlacement, tokenPrefix, tokenQueryKey, reuseToken } = oAuth;

const handleFetchOauth2Credentials = async () => {
let requestCopy = cloneDeep(request);
Expand All @@ -32,24 +32,34 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
try {
await dispatch(fetchOauth2Credentials({ 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 handleSave = () => { save(); };

const Icon = forwardRef((props, ref) => {
const TokenPlacementIcon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-end token-placement-label select-none">
{tokenPlacement == 'url' ? 'URL' : 'Headers'}
{tokenPlacement == 'url' ? 'URL' : 'Headers'}
<IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
</div>
);
});

const CredentialsPlacementIcon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-end token-placement-label select-none">
{credentialsPlacement == 'body' ? 'Request Body' : 'Basic Auth Header'}
<IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
</div>
);
});

const handleChange = (key, value) => {
dispatch(
Expand All @@ -63,10 +73,11 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
clientId,
clientSecret,
scope,
credentialsPlacement,
credentialsId,
tokenPlacement,
tokenPrefix,
tokenQueryParamKey,
tokenQueryKey,
reuseToken,
[key]: value
}
Expand Down Expand Up @@ -116,6 +127,31 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
</div>
);
})}
<div className="flex items-center gap-4 w-full" key={`input-credentials-placement`}>
<label className="block min-w-[140px]">Add Credentials to</label>
<div className="inline-flex items-center cursor-pointer token-placement-selector">
<Dropdown onCreate={onDropdownCreate} icon={<CredentialsPlacementIcon />} placement="bottom-end">
<div
className="dropdown-item"
onClick={() => {
dropdownTippyRef.current.hide();
handleChange('credentialsPlacement', 'body');
}}
>
Request Body
</div>
<div
className="dropdown-item"
onClick={() => {
dropdownTippyRef.current.hide();
handleChange('credentialsPlacement', 'basic_auth_header');
}}
>
Basic Auth Header
</div>
</Dropdown>
</div>
</div>
<div className="flex items-center gap-2.5 mt-2">
<div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
<IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
Expand All @@ -141,7 +177,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
<div className="flex items-center gap-4 w-full" key={`input-token-placement`}>
<label className="block min-w-[140px]">Add token to</label>
<div className="inline-flex items-center cursor-pointer token-placement-selector w-fit">
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
<Dropdown onCreate={onDropdownCreate} icon={<TokenPlacementIcon />} placement="bottom-end">
<div
className="dropdown-item"
onClick={() => {
Expand Down Expand Up @@ -183,10 +219,10 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
<label className="block font-medium min-w-[140px]">Query Param Key</label>
<div className="single-line-editor-wrapper flex-1">
<SingleLineEditor
value={oAuth['tokenQueryParamKey'] || ''}
value={oAuth['tokenQueryKey'] || ''}
theme={storedTheme}
onSave={handleSave}
onChange={(val) => handleChange('tokenQueryParamKey', val)}
onChange={(val) => handleChange('tokenQueryKey', val)}
onRun={handleRun}
collection={collection}
/>
Expand Down
63 changes: 15 additions & 48 deletions packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ import StyledWrapper from './StyledWrapper';
import { IconCaretDown, IconKey } from '@tabler/icons';
import { humanizeGrantType } from 'utils/collections';
import { useEffect } from 'react';
import { useState } from 'react';

const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
const dispatch = useDispatch();
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);

const oAuth = get(request, 'auth.oauth2', {});
const [valuesCache, setValuesCache] = useState({
...oAuth
});
const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);

const Icon = forwardRef((props, ref) => {
return (
Expand All @@ -23,13 +26,19 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
});

const onGrantTypeChange = (grantType) => {
let updatedValues = {
...valuesCache,
...oAuth,
grantType
};
setValuesCache(updatedValues);
dispatch(
updateAuth({
mode: 'oauth2',
collectionUid: collection.uid,
itemUid: item.uid,
content: {
...(defaultValues?.[grantType] || {})
...updatedValues
}
})
);
Expand All @@ -52,10 +61,11 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
clientId: '',
clientSecret: '',
scope: '',
credentialsPlacement: 'body',
credentialsId: 'credentials',
tokenPlacement: 'header',
tokenPrefix: 'Bearer',
tokenQueryParamKey: 'access_token',
tokenQueryKey: 'access_token',
reuseToken: false
}
})
Expand Down Expand Up @@ -106,47 +116,4 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
</StyledWrapper>
);
};
export default GrantTypeSelector;

const defaultValues = {
'authorization_code': {
grantType: 'authorization_code',
accessTokenUrl: '',
username: '',
password: '',
clientId: '',
clientSecret: '',
scope: '',
credentialsId: 'credentials',
tokenPlacement: 'header',
tokenPrefix: 'Bearer',
tokenQueryParamKey: 'access_token',
reuseToken: false
},
'client_credentials': {
grantType: 'client_credentials',
accessTokenUrl: '',
clientId: '',
clientSecret: '',
scope: '',
credentialsId: 'credentials',
tokenPlacement: 'header',
tokenPrefix: 'Bearer',
tokenQueryParamKey: 'access_token',
reuseToken: false
},
'password': {
grantType: 'password',
accessTokenUrl: '',
username: '',
password: '',
clientId: '',
clientSecret: '',
scope: '',
credentialsId: 'credentials',
tokenPlacement: 'header',
tokenPrefix: 'Bearer',
tokenQueryParamKey: 'access_token',
reuseToken: false
}
}
export default GrantTypeSelector;
Loading
Loading