github-starred/yaak
2
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-11 17:46:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add external browser support for OAuth2 authorization (#375)

Browse Source 
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Gregory Schier
2026-01-30 10:29:49 -08:00
committed by GitHub
parent eec2d6bc38
commit c2f068970b
10 changed files with 834 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src-web/components/DynamicForm.tsx
View File

@@ -83,7 +83,7 @@ export function DynamicForm<T extends Record<string, JsonPrimitive>>({
function FormInputsStack<T extends Record<string, JsonPrimitive>>({
className,
...props
}: FormInputsProps<T> & { className?: string}) {
}: FormInputsProps<T> & { className?: string }) {
return (
<VStack
space={3}
@@ -198,6 +198,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
/>
);
case 'accordion':
if (!hasVisibleInputs(input.inputs)) {
return null;
}
return (
<div key={i + stateKey}>
<DetailsBanner
@@ -219,6 +222,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
</div>
);
case 'h_stack':
if (!hasVisibleInputs(input.inputs)) {
return null;
}
return (
<div className="flex flex-wrap sm:flex-nowrap gap-3 items-end" key={i + stateKey}>
<FormInputs
@@ -233,6 +239,9 @@ function FormInputs<T extends Record<string, JsonPrimitive>>({
</div>
);
case 'banner':
if (!hasVisibleInputs(input.inputs)) {
return null;
}
return (
<Banner
key={i + stateKey}
@@ -603,3 +612,8 @@ function KeyValueArg({
</div>
);
}
function hasVisibleInputs(inputs: FormInput[] | undefined): boolean {
if (!inputs) return false;
return inputs.some((i) => !i.hidden);
}

11
src-web/components/HttpAuthenticationEditor.tsx
View File

@@ -62,9 +62,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
<p>
Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
</p>
<Link href="https://yaak.app/docs/using-yaak/request-inheritance">
Documentation
</Link>
<Link href="https://yaak.app/docs/using-yaak/request-inheritance">Documentation</Link>
</EmptyStateText>
);
}
@@ -140,7 +138,12 @@ export function HttpAuthenticationEditor({ model }: Props) {
}),
)}
>
<IconButton title="Authentication Actions" icon="settings" size="xs" />
<IconButton
title="Authentication Actions"
icon="settings"
size="xs"
className="!text-secondary"
/>
</Dropdown>
)}
</HStack>

4
src-web/components/core/Icon.tsx
View File

@@ -44,6 +44,7 @@ import {
CookieIcon,
CopyCheck,
CopyIcon,
CornerRightDownIcon,
CornerRightUpIcon,
CreditCardIcon,
CrosshairIcon,
@@ -63,6 +64,7 @@ import {
FlaskConicalIcon,
FolderCodeIcon,
FolderCogIcon,
FolderDownIcon,
FolderGitIcon,
FolderIcon,
FolderInputIcon,
@@ -179,6 +181,7 @@ const icons = {
cookie: CookieIcon,
copy: CopyIcon,
copy_check: CopyCheck,
corner_right_down: CornerRightDownIcon,
corner_right_up: CornerRightUpIcon,
credit_card: CreditCardIcon,
crosshair: CrosshairIcon,
@@ -205,6 +208,7 @@ const icons = {
folder_output: FolderOutputIcon,
folder_symlink: FolderSymlinkIcon,
folder_sync: FolderSyncIcon,
folder_down: FolderDownIcon,
folder_up: FolderUpIcon,
gift: GiftIcon,
git_branch: GitBranchIcon,

138
src-web/hooks/useAuthTab.tsx
View File

@@ -1,5 +1,5 @@
import type { Folder } from '@yaakapp-internal/models';
import { patchModel } from '@yaakapp-internal/models';
import { modelTypeLabel, patchModel } from '@yaakapp-internal/models';
import { useMemo } from 'react';
import { openFolderSettings } from '../commands/openFolderSettings';
import { openWorkspaceSettings } from '../commands/openWorkspaceSettings';
@@ -57,49 +57,103 @@ export function useAuthTab<T extends string>(tabValue: T, model: AuthenticatedMo
},
{ label: 'No Auth', shortLabel: 'No Auth', value: 'none' },
],
itemsAfter:
parentModel &&
model.authenticationType &&
model.authenticationType !== 'none' &&
(parentModel.authenticationType == null || parentModel.authenticationType === 'none')
? [
{ type: 'separator', label: 'Actions' },
{
label: `Promote to ${capitalize(parentModel.model)}`,
leftSlot: (
<Icon
icon={parentModel.model === 'workspace' ? 'corner_right_up' : 'folder_up'}
/>
),
onSelect: async () => {
const confirmed = await showConfirm({
id: 'promote-auth-confirm',
title: 'Promote Authentication',
confirmText: 'Promote',
description: (
<>
Move authentication config to{' '}
<InlineCode>{resolvedModelName(parentModel)}</InlineCode>?
</>
),
});
if (confirmed) {
await patchModel(model, { authentication: {}, authenticationType: null });
await patchModel(parentModel, {
authentication: model.authentication,
authenticationType: model.authenticationType,
});
itemsAfter: (() => {
const actions: (
| { type: 'separator'; label: string }
| { label: string; leftSlot: React.ReactNode; onSelect: () => Promise<void> }
)[] = [];
if (parentModel.model === 'folder') {
openFolderSettings(parentModel.id, 'auth');
} else {
openWorkspaceSettings('auth');
}
// Promote: move auth from current model up to parent
if (
parentModel &&
model.authenticationType &&
model.authenticationType !== 'none' &&
(parentModel.authenticationType == null || parentModel.authenticationType === 'none')
) {
actions.push(
{ type: 'separator', label: 'Actions' },
{
label: `Promote to ${capitalize(parentModel.model)}`,
leftSlot: (
<Icon
icon={parentModel.model === 'workspace' ? 'corner_right_up' : 'folder_up'}
/>
),
onSelect: async () => {
const confirmed = await showConfirm({
id: 'promote-auth-confirm',
title: 'Promote Authentication',
confirmText: 'Promote',
description: (
<>
Move authentication config to{' '}
<InlineCode>{resolvedModelName(parentModel)}</InlineCode>?
</>
),
});
if (confirmed) {
await patchModel(model, { authentication: {}, authenticationType: null });
await patchModel(parentModel, {
authentication: model.authentication,
authenticationType: model.authenticationType,
});
if (parentModel.model === 'folder') {
openFolderSettings(parentModel.id, 'auth');
} else {
openWorkspaceSettings('auth');
}
},
}
},
]
: undefined,
},
);
}
// Copy from ancestor: copy auth config down to current model
const ancestorWithAuth = ancestors.find(
(a) => a.authenticationType != null && a.authenticationType !== 'none',
);
if (ancestorWithAuth) {
if (actions.length === 0) {
actions.push({ type: 'separator', label: 'Actions' });
}
actions.push({
label: `Copy from ${modelTypeLabel(ancestorWithAuth)}`,
leftSlot: (
<Icon
icon={
ancestorWithAuth.model === 'workspace' ? 'corner_right_down' : 'folder_down'
}
/>
),
onSelect: async () => {
const confirmed = await showConfirm({
id: 'copy-auth-confirm',
title: 'Copy Authentication',
confirmText: 'Copy',
description: (
<>
Copy{' '}
{authentication.find((a) => a.name === ancestorWithAuth.authenticationType)
?.label ?? 'authentication'}{' '}
config from <InlineCode>{resolvedModelName(ancestorWithAuth)}</InlineCode>?
This will override the current authentication but will not affect the{' '}
{modelTypeLabel(ancestorWithAuth).toLowerCase()}.
</>
),
});
if (confirmed) {
await patchModel(model, {
authentication: { ...ancestorWithAuth.authentication },
authenticationType: ancestorWithAuth.authenticationType,
});
}
},
});
}
return actions.length > 0 ? actions : undefined;
})(),
onChange: async (authenticationType) => {
let authentication: Folder['authentication'] = model.authentication;
if (model.authenticationType !== authenticationType) {
@@ -113,5 +167,5 @@ export function useAuthTab<T extends string>(tabValue: T, model: AuthenticatedMo
};
return [tab];
}, [authentication, inheritedAuth, model, parentModel, tabValue]);
}, [authentication, inheritedAuth, model, parentModel, tabValue, ancestors]);
}