Skip to content

Commit 1ff12c8

Browse files
code-ashercode-asher
committed
Add frontend for managing OAuth2 applications
1 parent 3c096b2 commit 1ff12c8

15 files changed

+1036
-0
lines changed

‎site/src/AppRouter.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,24 @@ const ExternalAuthSettingsPage = lazy(
117117
"./pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage"
118118
),
119119
);
120+
const OAuth2AppsSettingsPage = lazy(
121+
() =>
122+
import(
123+
"./pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPage"
124+
),
125+
);
126+
const EditOAuth2AppPage = lazy(
127+
() =>
128+
import(
129+
"./pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPage"
130+
),
131+
);
132+
const CreateOAuth2AppPage = lazy(
133+
() =>
134+
import(
135+
"./pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage"
136+
),
137+
);
120138
const NetworkSettingsPage = lazy(
121139
() =>
122140
import(
@@ -313,6 +331,13 @@ export const AppRouter: FC = () => {
313331
path="external-auth"
314332
element={<ExternalAuthSettingsPage />}
315333
/>
334+
335+
<Route path="oauth2-apps">
336+
<Route index element={<OAuth2AppsSettingsPage />} />
337+
<Route path="add" element={<CreateOAuth2AppPage />} />
338+
<Route path=":appId" element={<EditOAuth2AppPage />} />
339+
</Route>
340+
316341
<Route
317342
path="workspace-proxies"
318343
element={<WorkspaceProxyPage />}

‎site/src/api/api.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -952,6 +952,55 @@ export const unlinkExternalAuthProvider = async (
952952
return resp.data;
953953
};
954954

955+
export const getOAuth2Apps = async (): Promise<TypesGen.OAuth2App[]> => {
956+
const resp = await axios.get(`/api/v2/oauth2/apps`);
957+
return resp.data;
958+
};
959+
960+
export const getOAuth2App = async (id: string): Promise<TypesGen.OAuth2App> => {
961+
const resp = await axios.get(`/api/v2/oauth2/apps/${id}`);
962+
return resp.data;
963+
};
964+
965+
export const postOAuth2App = async (
966+
data: TypesGen.PostOAuth2AppRequest,
967+
): Promise<TypesGen.OAuth2App> => {
968+
const response = await axios.post(`/api/v2/oauth2/apps`, data);
969+
return response.data;
970+
};
971+
972+
export const putOAuth2App = async (
973+
id: string,
974+
data: TypesGen.PutOAuth2AppRequest,
975+
): Promise<TypesGen.OAuth2App> => {
976+
const response = await axios.put(`/api/v2/oauth2/apps/${id}`, data);
977+
return response.data;
978+
};
979+
export const deleteOAuth2App = async (id: string): Promise<void> => {
980+
await axios.delete(`/api/v2/oauth2/apps/${id}`);
981+
};
982+
983+
export const getOAuth2AppSecrets = async (
984+
id: string,
985+
): Promise<TypesGen.OAuth2AppSecret[]> => {
986+
const resp = await axios.get(`/api/v2/oauth2/apps/${id}/secrets`);
987+
return resp.data;
988+
};
989+
990+
export const postOAuth2AppSecret = async (
991+
id: string,
992+
): Promise<TypesGen.OAuth2AppSecretFull> => {
993+
const resp = await axios.post(`/api/v2/oauth2/apps/${id}/secrets`);
994+
return resp.data;
995+
};
996+
997+
export const deleteOAuth2AppSecret = async (
998+
appId: string,
999+
secretId: string,
1000+
): Promise<void> => {
1001+
await axios.delete(`/api/v2/oauth2/apps/${appId}/secrets/${secretId}`);
1002+
};
1003+
9551004
export const getAuditLogs = async (
9561005
options: TypesGen.AuditLogsRequest,
9571006
): Promise<TypesGen.AuditLogResponse> => {

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as API from "api/api";
2+
3+
export const oauth2AppsKey = ["oauth-apps"];
4+
5+
export const oauth2Apps = () => {
6+
return {
7+
queryKey: oauth2AppsKey,
8+
queryFn: () => API.getOAuth2Apps(),
9+
};
10+
};
11+
12+
export const oauth2App = (id: string) => {
13+
return {
14+
queryKey: [oauth2AppsKey, id],
15+
queryFn: () => API.getOAuth2App(id),
16+
};
17+
};
18+
19+
export const oauth2AppSecretsKey = ["oauth-app-secrets"];
20+
21+
export const oauth2AppSecrets = (id: string) => {
22+
return {
23+
queryKey: [oauth2AppSecretsKey, id],
24+
queryFn: () => API.getOAuth2AppSecrets(id),
25+
};
26+
};

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Globe from "@mui/icons-material/PublicOutlined";
77
import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
88
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
99
import MonitorHeartOutlined from "@mui/icons-material/MonitorHeartOutlined";
10+
// import Token from "@mui/icons-material/Token";
1011
import { type FC } from "react";
1112
import { useDashboard } from "components/Dashboard/DashboardProvider";
1213
import { GitIcon } from "components/Icons/GitIcon";
@@ -35,6 +36,10 @@ export const Sidebar: FC = () => {
3536
<SidebarNavItem href="external-auth" icon={GitIcon}>
3637
External Authentication
3738
</SidebarNavItem>
39+
{/* Not exposing this yet since token exchange is not finished yet.
40+
<SidebarNavItem href="oauth2-apps" icon={Token}>
41+
OAuth2 Applications
42+
</SidebarNavItem>*/}
3843
<SidebarNavItem href="network" icon={Globe}>
3944
Network
4045
</SidebarNavItem>

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPage.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { useMutation } from "react-query";
2+
import { postOAuth2App } from "api/api";
3+
import type * as TypesGen from "api/typesGenerated";
4+
import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
5+
import { FC } from "react";
6+
import { useNavigate } from "react-router-dom";
7+
import { CreateOAuth2AppPageView } from "./CreateOAuth2AppPageView";
8+
import { pageTitle } from "utils/page";
9+
import { Helmet } from "react-helmet-async";
10+
11+
const CreateOAuth2AppPage: FC = () => {
12+
const navigate = useNavigate();
13+
14+
const postMutation = useMutation({
15+
mutationFn: postOAuth2App,
16+
onSuccess: (newApp: TypesGen.OAuth2App) => {
17+
displaySuccess(
18+
`Successfully added the OAuth2 application "${newApp.name}".`,
19+
);
20+
navigate(`/deployment/oauth2-apps/${newApp.id}?created=true`);
21+
},
22+
onError: () => displayError("Failed to create OAuth2 application"),
23+
});
24+
25+
return (
26+
<>
27+
<Helmet>
28+
<title>{pageTitle("New OAuth2 Application")}</title>
29+
</Helmet>
30+
31+
<CreateOAuth2AppPageView
32+
isUpdating={postMutation.isLoading}
33+
error={postMutation.error}
34+
createApp={(req: TypesGen.PostOAuth2AppRequest) => {
35+
postMutation.mutate(req);
36+
}}
37+
/>
38+
</>
39+
);
40+
};
41+
42+
export default CreateOAuth2AppPage;

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.stories.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { CreateOAuth2AppPageView } from "./CreateOAuth2AppPageView";
2+
import { mockApiError } from "testHelpers/entities";
3+
4+
export default {
5+
title: "pages/DeploySettingsPage/CreateOAuth2AppPageView",
6+
component: CreateOAuth2AppPageView,
7+
};
8+
9+
export const Updating = {
10+
args: {
11+
isUpdating: true,
12+
},
13+
};
14+
15+
export const Error = {
16+
args: {
17+
error: mockApiError({
18+
message: "Validation failed",
19+
validations: [
20+
{
21+
field: "name",
22+
detail: "name error",
23+
},
24+
{
25+
field: "callback_url",
26+
detail: "url error",
27+
},
28+
{
29+
field: "icon",
30+
detail: "icon error",
31+
},
32+
],
33+
}),
34+
},
35+
};
36+
37+
export const Default = {
38+
args: {
39+
// Nothing.
40+
},
41+
};

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Button from "@mui/material/Button";
2+
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
3+
import { type FC } from "react";
4+
import { Link } from "react-router-dom";
5+
import type * as TypesGen from "api/typesGenerated";
6+
import { ErrorAlert } from "components/Alert/ErrorAlert";
7+
import { Header } from "components/DeploySettingsLayout/Header";
8+
import { Stack } from "components/Stack/Stack";
9+
import { OAuth2AppForm } from "./OAuth2AppForm";
10+
11+
type CreateOAuth2AppProps = {
12+
isUpdating: boolean;
13+
createApp: (req: TypesGen.PostOAuth2AppRequest) => void;
14+
error?: unknown;
15+
};
16+
17+
export const CreateOAuth2AppPageView: FC<CreateOAuth2AppProps> = ({
18+
isUpdating,
19+
createApp,
20+
error,
21+
}) => {
22+
return (
23+
<>
24+
<Stack
25+
alignItems="baseline"
26+
direction="row"
27+
justifyContent="space-between"
28+
>
29+
<Header
30+
title="Add an OAuth2 application"
31+
description="Configure an application to use Coder as an OAuth2 provider."
32+
/>
33+
<Button
34+
component={Link}
35+
startIcon={<KeyboardArrowLeft />}
36+
to="/deployment/oauth2-apps"
37+
>
38+
All OAuth2 Applications
39+
</Button>
40+
</Stack>
41+
42+
<Stack>
43+
{error ? <ErrorAlert error={error} /> : undefined}
44+
<OAuth2AppForm
45+
onSubmit={createApp}
46+
isUpdating={isUpdating}
47+
error={error}
48+
/>
49+
</Stack>
50+
</>
51+
);
52+
};

0 commit comments

Comments
 (0)