Skip to content

Commit ca0bd42

Browse files
code-ashercode-asher
committed
Add user settings page for revoking OAuth2 apps
1 parent cae4e61 commit ca0bd42

File tree

6 files changed

+234
-9
lines changed

6 files changed

+234
-9
lines changed

‎site/src/AppRouter.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,10 @@ const ExternalAuthPage = lazy(
156156
const UserExternalAuthSettingsPage = lazy(
157157
() => import("./pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPage"),
158158
);
159+
const UserOAuth2ProviderSettingsPage = lazy(
160+
() =>
161+
import("./pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPage"),
162+
);
159163
const TemplateVersionPage = lazy(
160164
() => import("./pages/TemplateVersionPage/TemplateVersionPage"),
161165
);
@@ -362,6 +366,10 @@ export const AppRouter: FC = () => {
362366
path="external-auth"
363367
element={<UserExternalAuthSettingsPage />}
364368
/>
369+
<Route
370+
path="oauth2-provider"
371+
element={<UserOAuth2ProviderSettingsPage />}
372+
/>
365373
<Route path="tokens">
366374
<Route index element={<TokensPage />} />
367375
<Route path="new" element={<CreateTokenPage />} />

‎site/src/api/api.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -974,10 +974,13 @@ export const unlinkExternalAuthProvider = async (
974974
return resp.data;
975975
};
976976

977-
export const getOAuth2ProviderApps = async (): Promise<
978-
TypesGen.OAuth2ProviderApp[]
979-
> => {
980-
const resp = await axios.get(`/api/v2/oauth2-provider/apps`);
977+
export const getOAuth2ProviderApps = async (
978+
filter?: TypesGen.OAuth2ProviderAppFilter,
979+
): Promise<TypesGen.OAuth2ProviderApp[]> => {
980+
const params = filter?.user_id
981+
? new URLSearchParams({ user_id: filter.user_id })
982+
: "";
983+
const resp = await axios.get(`/api/v2/oauth2-provider/apps?${params}`);
981984
return resp.data;
982985
};
983986

@@ -1002,6 +1005,7 @@ export const putOAuth2ProviderApp = async (
10021005
const response = await axios.put(`/api/v2/oauth2-provider/apps/${id}`, data);
10031006
return response.data;
10041007
};
1008+
10051009
export const deleteOAuth2ProviderApp = async (id: string): Promise<void> => {
10061010
await axios.delete(`/api/v2/oauth2-provider/apps/${id}`);
10071011
};
@@ -1029,6 +1033,10 @@ export const deleteOAuth2ProviderAppSecret = async (
10291033
);
10301034
};
10311035

1036+
export const revokeOAuth2ProviderApp = async (appId: string): Promise<void> => {
1037+
await axios.delete(`/api/v2/oauth2-provider/apps/${appId}/tokens`);
1038+
};
1039+
10321040
export const getAuditLogs = async (
10331041
options: TypesGen.AuditLogsRequest,
10341042
): Promise<TypesGen.AuditLogResponse> => {

‎site/src/api/queries/oauth2.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import * as API from "api/api";
33
import type * as TypesGen from "api/typesGenerated";
44

55
const appsKey = ["oauth2-provider", "apps"];
6-
const appKey = (id: string) => appsKey.concat(id);
7-
const appSecretsKey = (id: string) => appKey(id).concat("secrets");
6+
const userAppsKey = (userId: string) => appsKey.concat(userId);
7+
const appKey = (appId: string) => appsKey.concat(appId);
8+
const appSecretsKey = (appId: string) => appKey(appId).concat("secrets");
89

9-
export const getApps = () => {
10+
export const getApps = (userId?: string) => {
1011
return {
11-
queryKey: appsKey,
12-
queryFn: () => API.getOAuth2ProviderApps(),
12+
queryKey: userId ? appsKey.concat(userId) : appsKey,
13+
queryFn: () => API.getOAuth2ProviderApps({ user_id: userId }),
1314
};
1415
};
1516

@@ -91,3 +92,14 @@ export const deleteAppSecret = (queryClient: QueryClient) => {
9192
},
9293
};
9394
};
95+
96+
export const revokeApp = (queryClient: QueryClient, userId: string) => {
97+
return {
98+
mutationFn: API.revokeOAuth2ProviderApp,
99+
onSuccess: async () => {
100+
await queryClient.invalidateQueries({
101+
queryKey: userAppsKey(userId),
102+
});
103+
},
104+
};
105+
};

‎site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPage.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { type FC, useState } from "react";
2+
import { useMutation, useQuery, useQueryClient } from "react-query";
3+
import { getErrorMessage } from "api/errors";
4+
import { getApps, revokeApp } from "api/queries/oauth2";
5+
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
6+
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
7+
import { useMe } from "contexts/auth/useMe";
8+
import { Section } from "../Section";
9+
import OAuth2ProviderPageView from "./OAuth2ProviderPageView";
10+
11+
const OAuth2ProviderPage: FC = () => {
12+
const me = useMe();
13+
const queryClient = useQueryClient();
14+
const userOAuth2AppsQuery = useQuery(getApps(me.id));
15+
const revokeAppMutation = useMutation(revokeApp(queryClient, me.id));
16+
const [appIdToRevoke, setAppIdToRevoke] = useState<string>();
17+
const appToRevoke = userOAuth2AppsQuery.data?.find(
18+
(app) => app.id === appIdToRevoke,
19+
);
20+
21+
// This can happen if the app disappears from the query data but a user has
22+
// already started the revoke flow. It is safe to place this directly in the
23+
// render, because it does not run every single time.
24+
if (appToRevoke === undefined && typeof appIdToRevoke === "string") {
25+
setAppIdToRevoke(undefined);
26+
displayError("Application no longer exists.");
27+
}
28+
29+
return (
30+
<Section title="OAuth2 Applications" layout="fluid">
31+
<OAuth2ProviderPageView
32+
isLoading={userOAuth2AppsQuery.isLoading}
33+
error={userOAuth2AppsQuery.error}
34+
apps={userOAuth2AppsQuery.data}
35+
revoke={(app) => {
36+
setAppIdToRevoke(app.id);
37+
}}
38+
/>
39+
{appToRevoke !== undefined && (
40+
<DeleteDialog
41+
title="Revoke Application"
42+
verb="Revoking"
43+
info={`This will invalidate any tokens created by the OAuth2 application "${appToRevoke.name}".`}
44+
label="Name of the application to revoke"
45+
isOpen
46+
confirmLoading={revokeAppMutation.isLoading}
47+
name={appToRevoke.name}
48+
entity="application"
49+
onCancel={() => setAppIdToRevoke(undefined)}
50+
onConfirm={async () => {
51+
try {
52+
await revokeAppMutation.mutateAsync(appToRevoke.id);
53+
displaySuccess(
54+
`You have successfully revoked the OAuth2 application "${appToRevoke.name}"`,
55+
);
56+
setAppIdToRevoke(undefined);
57+
} catch (error) {
58+
displayError(
59+
getErrorMessage(error, "Failed to revoke application."),
60+
);
61+
}
62+
}}
63+
/>
64+
)}
65+
</Section>
66+
);
67+
};
68+
69+
export default OAuth2ProviderPage;

‎site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.stories.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { MockOAuth2ProviderApps } from "testHelpers/entities";
3+
import OAuth2ProviderPageView from "./OAuth2ProviderPageView";
4+
5+
const meta: Meta<typeof OAuth2ProviderPageView> = {
6+
title: "pages/UserSettingsPage/OAuth2ProviderPageView",
7+
component: OAuth2ProviderPageView,
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof OAuth2ProviderPageView>;
12+
13+
export const Loading: Story = {
14+
args: {
15+
isLoading: true,
16+
revoke: () => undefined,
17+
},
18+
};
19+
20+
export const Error: Story = {
21+
args: {
22+
isLoading: false,
23+
error: "some error",
24+
revoke: () => undefined,
25+
},
26+
};
27+
28+
export const Apps: Story = {
29+
args: {
30+
isLoading: false,
31+
apps: MockOAuth2ProviderApps,
32+
revoke: () => undefined,
33+
},
34+
};

‎site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Button from "@mui/material/Button";
2+
import Table from "@mui/material/Table";
3+
import TableBody from "@mui/material/TableBody";
4+
import TableCell from "@mui/material/TableCell";
5+
import TableContainer from "@mui/material/TableContainer";
6+
import TableHead from "@mui/material/TableHead";
7+
import TableRow from "@mui/material/TableRow";
8+
import { type FC } from "react";
9+
import type * as TypesGen from "api/typesGenerated";
10+
import { AvatarData } from "components/AvatarData/AvatarData";
11+
import { Avatar } from "components/Avatar/Avatar";
12+
import { ErrorAlert } from "components/Alert/ErrorAlert";
13+
import { TableLoader } from "components/TableLoader/TableLoader";
14+
15+
export type OAuth2ProviderPageViewProps = {
16+
isLoading: boolean;
17+
error?: unknown;
18+
apps?: TypesGen.OAuth2ProviderApp[];
19+
revoke: (app: TypesGen.OAuth2ProviderApp) => void;
20+
};
21+
22+
const OAuth2ProviderPageView: FC<OAuth2ProviderPageViewProps> = ({
23+
isLoading,
24+
error,
25+
apps,
26+
revoke,
27+
}) => {
28+
return (
29+
<>
30+
{error && <ErrorAlert error={error} />}
31+
32+
<TableContainer>
33+
<Table>
34+
<TableHead>
35+
<TableRow>
36+
<TableCell width="100%">Name</TableCell>
37+
<TableCell width="1%" />
38+
</TableRow>
39+
</TableHead>
40+
<TableBody>
41+
{isLoading && <TableLoader />}
42+
{apps?.map((app) => (
43+
<OAuth2AppRow key={app.id} app={app} revoke={revoke} />
44+
))}
45+
{apps?.length === 0 && (
46+
<TableRow>
47+
<TableCell colSpan={999}>
48+
<div css={{ textAlign: "center" }}>
49+
No OAuth2 applications have been authorized.
50+
</div>
51+
</TableCell>
52+
</TableRow>
53+
)}
54+
</TableBody>
55+
</Table>
56+
</TableContainer>
57+
</>
58+
);
59+
};
60+
61+
type OAuth2AppRowProps = {
62+
app: TypesGen.OAuth2ProviderApp;
63+
revoke: (app: TypesGen.OAuth2ProviderApp) => void;
64+
};
65+
66+
const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app, revoke }) => {
67+
return (
68+
<TableRow key={app.id} data-testid={`app-${app.id}`}>
69+
<TableCell>
70+
<AvatarData
71+
title={app.name}
72+
avatar={
73+
Boolean(app.icon) && (
74+
<Avatar src={app.icon} variant="square" fitImage />
75+
)
76+
}
77+
/>
78+
</TableCell>
79+
80+
<TableCell>
81+
<Button
82+
variant="contained"
83+
size="small"
84+
color="error"
85+
onClick={() => revoke(app)}
86+
>
87+
Revoke&hellip;
88+
</Button>
89+
</TableCell>
90+
</TableRow>
91+
);
92+
};
93+
94+
export default OAuth2ProviderPageView;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy