awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 11:38:55 +00: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
frontend/src/hooks/api/integrationAuth/queries.tsx
+3
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
});
frontend/src/hooks/api/integrationAuth/types.ts
+3
View File
@@ -9,6 +9,9 @@ export type IntegrationAuth = {
keyEncoding: string;
url?: string;
teamId?: string;
metadata: {
installationName?: string;
};
};
export type App = {
frontend/src/pages/integrations/github/auth-mode-selection.tsx
+89
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;
frontend/src/pages/integrations/github/oauth2/callback.tsx
+7 -2
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"
});
frontend/src/pages/integrations/select-integration-auth.tsx
+121
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;
frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+1 -1
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`;