Skip to content

Commit 93f9d45

Browse files
code-ashercode-asher
committed
Add user settings page for revoking OAuth2 apps
1 parent 32afbd6 commit 93f9d45

File tree

6 files changed

+235
-9
lines changed

6 files changed

+235
-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
@@ -967,10 +967,13 @@ export const unlinkExternalAuthProvider = async (
967967
return resp.data;
968968
};
969969

970-
export const getOAuth2ProviderApps = async (): Promise<
971-
TypesGen.OAuth2ProviderApp[]
972-
> => {
973-
const resp = await axios.get(`/api/v2/oauth2-provider/apps`);
970+
export const getOAuth2ProviderApps = async (
971+
filter?: TypesGen.OAuth2ProviderAppFilter,
972+
): Promise<TypesGen.OAuth2ProviderApp[]> => {
973+
const params = filter?.user_id
974+
? new URLSearchParams({ user_id: filter.user_id })
975+
: "";
976+
const resp = await axios.get(`/api/v2/oauth2-provider/apps?${params}`);
974977
return resp.data;
975978
};
976979

@@ -995,6 +998,7 @@ export const putOAuth2ProviderApp = async (
995998
const response = await axios.put(`/api/v2/oauth2-provider/apps/${id}`, data);
996999
return response.data;
9971000
};
1001+
9981002
export const deleteOAuth2ProviderApp = async (id: string): Promise<void> => {
9991003
await axios.delete(`/api/v2/oauth2-provider/apps/${id}`);
10001004
};
@@ -1022,6 +1026,10 @@ export const deleteOAuth2ProviderAppSecret = async (
10221026
);
10231027
};
10241028

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