github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-08 23:18:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

misc: initial setup for github integration with Github app auth

Browse Source
This commit is contained in:
Sheen Capadngan
2024-10-10 03:22:25 +08:00
parent b482a9cda7
commit 059c552307
13 changed files with 323 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.example
View File

@@ -36,12 +36,15 @@ CLIENT_ID_HEROKU=
CLIENT_ID_VERCEL=
CLIENT_ID_NETLIFY=
CLIENT_ID_GITHUB=
CLIENT_ID_GITHUB_APP=
CLIENT_SLUG_GITHUB=
CLIENT_ID_GITLAB=
CLIENT_ID_BITBUCKET=
CLIENT_SECRET_HEROKU=
CLIENT_SECRET_VERCEL=
CLIENT_SECRET_NETLIFY=
CLIENT_SECRET_GITHUB=
CLIENT_SECRET_GITHUB_APP=
CLIENT_SECRET_GITLAB=
CLIENT_SECRET_BITBUCKET=
CLIENT_SLUG_VERCEL=

7
backend/src/lib/config/env.ts
View File

@@ -117,9 +117,14 @@ const envSchema = z
// gcp secret manager
CLIENT_ID_GCP_SECRET_MANAGER: zpStr(z.string().optional()),
CLIENT_SECRET_GCP_SECRET_MANAGER: zpStr(z.string().optional()),
// github
// github oauth
CLIENT_ID_GITHUB: zpStr(z.string().optional()),
CLIENT_SECRET_GITHUB: zpStr(z.string().optional()),
CLIENT_SLUG_GITHUB: zpStr(z.string().optional()),
// github app
CLIENT_ID_GITHUB_APP: zpStr(z.string().optional()),
CLIENT_SECRET_GITHUB_APP: zpStr(z.string().optional()),
// azure
CLIENT_ID_AZURE: zpStr(z.string().optional()),
CLIENT_SECRET_AZURE: zpStr(z.string().optional()),

1
backend/src/server/routes/v1/integration-auth-router.ts
View File

@@ -189,6 +189,7 @@ export const registerIntegrationAuthRouter = async (server: FastifyZodProvider)
workspaceId: z.string().trim(),
code: z.string().trim(),
integration: z.string().trim(),
installationId: z.string().trim().optional(),
url: z.string().trim().url().optional()
}),
response: {

15
backend/src/services/integration-auth/integration-auth-service.ts
View File

@@ -109,7 +109,8 @@ export const integrationAuthServiceFactory = ({
actorAuthMethod,
integration,
url,
code
code,
installationId
}: TOauthExchangeDTO) => {
if (!Object.values(Integrations).includes(integration as Integrations))
throw new BadRequestError({ message: "Invalid integration" });
@@ -123,7 +124,7 @@ export const integrationAuthServiceFactory = ({
);
ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Create, ProjectPermissionSub.Integrations);
const tokenExchange = await exchangeCode({ integration, code, url });
const tokenExchange = await exchangeCode({ integration, code, url, installationId });
const updateDoc: TIntegrationAuthsInsert = {
projectId,
integration,
@@ -141,6 +142,16 @@ export const integrationAuthServiceFactory = ({
updateDoc.metadata = {
authMethod: "oauth2"
};
} else if (integration === Integrations.GITHUB && installationId) {
updateDoc.metadata = {
installationId,
installationName: tokenExchange.installationName,
authMethod: "app"
};
}
if (installationId && integration === Integrations.GITHUB) {
return integrationAuthDAL.create(updateDoc);
}
const { shouldUseSecretV2Bridge, botKey } = await projectBotService.getBotKey(projectId);

1
backend/src/services/integration-auth/integration-auth-types.ts
View File

@@ -9,6 +9,7 @@ export type TOauthExchangeDTO = {
integration: string;
code: string;
url?: string;
installationId?: string;
} & TProjectPermission;
export type TSaveIntegrationAccessTokenDTO = {

5
backend/src/services/integration-auth/integration-list.ts
View File

@@ -96,7 +96,9 @@ export enum IntegrationUrls {
GCP_SECRET_MANAGER_SERVICE_NAME = "secretmanager.googleapis.com",
GCP_SECRET_MANAGER_URL = `https://${GCP_SECRET_MANAGER_SERVICE_NAME}`,
GCP_SERVICE_USAGE_URL = "https://serviceusage.googleapis.com",
GCP_CLOUD_PLATFORM_SCOPE = "https://www.googleapis.com/auth/cloud-platform"
GCP_CLOUD_PLATFORM_SCOPE = "https://www.googleapis.com/auth/cloud-platform",
GITHUB_USER_INSTALLATIONS = "https://api.github.com/user/installations"
}
export const getIntegrationOptions = async () => {
@@ -138,6 +140,7 @@ export const getIntegrationOptions = async () => {
isAvailable: true,
type: "oauth",
clientId: appCfg.CLIENT_ID_GITHUB,
clientSlug: appCfg.CLIENT_SLUG_GITHUB,
docsLink: ""
},
{

77
backend/src/services/integration-auth/integration-token.ts
View File

@@ -2,7 +2,7 @@ import jwt from "jsonwebtoken";
import { getConfig } from "@app/lib/config/env";
import { request } from "@app/lib/config/request";
import { BadRequestError, NotFoundError } from "@app/lib/errors";
import { BadRequestError, ForbiddenRequestError, InternalServerError, NotFoundError } from "@app/lib/errors";
import { Integrations, IntegrationUrls } from "./integration-list";
@@ -234,12 +234,73 @@ const exchangeCodeNetlify = async ({ code }: { code: string }) => {
};
};
const exchangeCodeGithub = async ({ code }: { code: string }) => {
const exchangeCodeGithub = async ({ code, installationId }: { code: string; installationId?: string }) => {
const appCfg = getConfig();
if (!appCfg.CLIENT_ID_GITHUB || !appCfg.CLIENT_SECRET_GITHUB) {
throw new BadRequestError({ message: "Missing client id and client secret" });
if (!installationId && (!appCfg.CLIENT_ID_GITHUB || !appCfg.CLIENT_SECRET_GITHUB)) {
throw new InternalServerError({ message: "Missing client id and client secret" });
}
if (installationId && (!appCfg.CLIENT_ID_GITHUB_APP || !appCfg.CLIENT_SECRET_GITHUB_APP)) {
throw new InternalServerError({
message: "Missing Github app client ID and client secret"
});
}
if (installationId) {
// handle app installations
const res = (
await request.get<ExchangeCodeGithubResponse>(IntegrationUrls.GITHUB_TOKEN_URL, {
params: {
client_id: appCfg.CLIENT_ID_GITHUB_APP,
client_secret: appCfg.CLIENT_SECRET_GITHUB_APP,
code,
redirect_uri: `${appCfg.SITE_URL}/integrations/github/oauth2/callback`
},
headers: {
Accept: "application/json",
"Accept-Encoding": "application/json"
}
})
).data;
// use access token to validate installation ID
const installationsRes = (
await request.get<{
installations: {
id: number;
account: {
login: string;
};
}[];
}>(IntegrationUrls.GITHUB_USER_INSTALLATIONS, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${res.access_token}`,
"Accept-Encoding": "application/json"
}
})
).data;
const matchingInstallation = installationsRes.installations.find(
(installation) => installation.id === +installationId
);
if (!matchingInstallation) {
throw new ForbiddenRequestError({
message: "User has no access to the provided installation"
});
}
return {
accessToken: "",
refreshToken: null,
accessExpiresAt: null,
installationName: matchingInstallation.account.login
};
}
// handle normal oauth
const res = (
await request.get<ExchangeCodeGithubResponse>(IntegrationUrls.GITHUB_TOKEN_URL, {
params: {
@@ -346,6 +407,7 @@ type TExchangeReturn = {
url?: string;
teamId?: string;
accountId?: string;
installationName?: string;
};
/**
@@ -355,11 +417,13 @@ type TExchangeReturn = {
export const exchangeCode = async ({
integration,
code,
url
url,
installationId
}: {
integration: string;
code: string;
url?: string;
installationId?: string;
}): Promise<TExchangeReturn> => {
switch (integration) {
case Integrations.GCP_SECRET_MANAGER:
@@ -384,7 +448,8 @@ export const exchangeCode = async ({
});
case Integrations.GITHUB:
return exchangeCodeGithub({
code
code,
installationId
});
case Integrations.GITLAB:
return exchangeCodeGitlab({

3
frontend/src/hooks/api/integrationAuth/queries.tsx
View File

@@ -777,11 +777,13 @@ export const useAuthorizeIntegration = () => {
workspaceId,
code,
integration,
installationId,
url
}: {
workspaceId: string;
code: string;
integration: string;
installationId?: string;
url?: string;
}) => {
const {
@@ -790,6 +792,7 @@ export const useAuthorizeIntegration = () => {
workspaceId,
code,
integration,
installationId,
url
});

3
frontend/src/hooks/api/integrationAuth/types.ts
View File

@@ -9,6 +9,9 @@ export type IntegrationAuth = {
keyEncoding: string;
url?: string;
teamId?: string;
metadata: {
installationName?: string;
};
};
export type App = {

89
frontend/src/pages/integrations/github/auth-mode-selection.tsx Normal file
View File

@@ -0,0 +1,89 @@
import crypto from "crypto";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, Card, CardTitle } from "@app/components/v2";
import { useGetCloudIntegrations } from "@app/hooks/api";
export default function GithubIntegrationAuthModeSelectionPage() {
const router = useRouter();
const { data: cloudIntegrations } = useGetCloudIntegrations();
const githubIntegration = cloudIntegrations?.find((integration) => integration.slug === "github");
return (
<div className="flex h-full w-full items-center justify-center">
<Head>
<title>Select Github Integration Auth</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
<CardTitle
className="px-6 text-left text-xl"
subTitle="Select how you'd like to integrate with GitHub. For more precise control, we recommend using the GitHub App method."
>
<div className="flex flex-row items-center">
<div className="flex items-center pb-0.5">
<Image
src="/images/integrations/GitHub.png"
height={30}
width={30}
alt="Github logo"
/>
</div>
<span className="ml-2.5">Github Integration </span>
<Link href="https://infisical.com/docs/integrations/cicd/githubactions" passHref>
<a target="_blank" rel="noopener noreferrer">
<div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
Docs
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="ml-1.5 mb-[0.07rem] text-xxs"
/>
</div>
</a>
</Link>
</div>
</CardTitle>
<div className="mb-7 flex flex-col items-center">
<Button
colorSchema="primary"
variant="outline_bg"
className="mt-2 w-3/4"
size="sm"
type="submit"
onClick={() => {
router.push("/integrations/select-integration-auth?integrationSlug=github");
}}
>
Connect with Github App
</Button>
<Button
colorSchema="primary"
variant="outline_bg"
className="mt-3 w-3/4"
size="sm"
type="submit"
onClick={() => {
const state = crypto.randomBytes(16).toString("hex");
localStorage.setItem("latestCSRFToken", state);
window.location.assign(
`https://github.com/login/oauth/authorize?client_id=${githubIntegration?.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`
);
}}
>
Connect with Github OAuth
</Button>
</div>
</Card>
</div>
);
}
GithubIntegrationAuthModeSelectionPage.requireAuth = true;

9
frontend/src/pages/integrations/github/oauth2/callback.tsx
View File

@@ -8,18 +8,23 @@ export default function GitHubOAuth2CallbackPage() {
const router = useRouter();
const { mutateAsync } = useAuthorizeIntegration();
const { code, state } = queryString.parse(router.asPath.split("?")[1]);
// eslint-disable-next-line @typescript-eslint/naming-convention
const { code, state, installation_id } = queryString.parse(router.asPath.split("?")[1]);
useEffect(() => {
(async () => {
try {
// validate state
if (state !== localStorage.getItem("latestCSRFToken")) return;
if (state !== localStorage.getItem("latestCSRFToken")) {
return;
}
localStorage.removeItem("latestCSRFToken");
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id") as string,
code: code as string,
installationId: installation_id as string,
integration: "github"
});

121
frontend/src/pages/integrations/select-integration-auth.tsx Normal file
View File

@@ -0,0 +1,121 @@
import crypto from "crypto";
import { useCallback } from "react";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import { Button, Card, CardTitle } from "@app/components/v2";
import { useWorkspace } from "@app/context";
import { useGetCloudIntegrations, useGetWorkspaceAuthorizations } from "@app/hooks/api";
import { IntegrationAuth } from "@app/hooks/api/types";
export default function SelectIntegrationAuthPage() {
const router = useRouter();
const { data: cloudIntegrations } = useGetCloudIntegrations();
const { currentWorkspace } = useWorkspace();
const workspaceId = currentWorkspace?.id || "";
const integrationSlug = router.query.integrationSlug as string;
const currentIntegration = cloudIntegrations?.find(
(integration) => integration.slug === integrationSlug
);
const { data: integrationAuths, isLoading: isLoadingIntegrationAuths } =
useGetWorkspaceAuthorizations(
workspaceId,
useCallback((data: IntegrationAuth[]) => {
const filteredIntegrationAuths = data.filter(
(integrationAuth) => integrationAuth.integration === integrationSlug
);
if (integrationSlug === "github") {
// for now, we only display the integration auths for Github apps
return filteredIntegrationAuths.filter((integrationAuth) =>
Boolean(integrationAuth.metadata?.installationName)
);
}
return [];
}, [])
);
const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : "";
const handleConnectionSelect = (integrationAuthId: string) => {
if (integrationSlug === "github") {
router.push(`/integrations/github/create?integrationAuthId=${integrationAuthId}`);
}
};
const handleNewConnection = () => {
const state = crypto.randomBytes(16).toString("hex");
localStorage.setItem("latestCSRFToken", state);
if (integrationSlug === "github") {
// for now we only handle Github apps
window.location.assign(
`https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
);
}
};
return (
<div className="flex h-full w-full items-center justify-center">
<Head>
<title>Select Connection</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
<CardTitle
className="px-6 text-left text-xl"
subTitle="Select a connection that you want to use for the new integration."
>
<div className="flex flex-row items-center">
<div className="flex items-center pb-0.5">
<Image src={logo} height={30} width={30} alt="Integration logo" />
</div>
<span className="ml-2.5">Select Connection</span>
</div>
</CardTitle>
<div className="mb-7 flex flex-col items-center">
{!isLoadingIntegrationAuths && integrationAuths?.length
? integrationAuths.map((integrationAuth) => {
let connectionName = "";
if (integrationAuth.integration === "github") {
connectionName = integrationAuth.metadata?.installationName || "";
}
return (
<Button
colorSchema="gray"
variant="outline"
className="mt-3 w-3/4"
key={integrationAuth.id}
size="sm"
type="submit"
onClick={() => handleConnectionSelect(integrationAuth.id)}
>
{connectionName}
</Button>
);
})
: undefined}
<Button
colorSchema="primary"
className="mt-6 w-3/4"
size="sm"
type="submit"
onClick={handleNewConnection}
>
Create New Connection
</Button>
</div>
</Card>
</div>
);
}
SelectIntegrationAuthPage.requireAuth = true;

2
frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
View File

@@ -60,7 +60,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
break;
case "github":
link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
link = `${window.location.origin}/integrations/github/auth-mode-selection`;
break;
case "gitlab":
link = `${window.location.origin}/integrations/gitlab/authorize`;