|
| 1 | +import { useState } from "react"; |
| 2 | +import { typedjson, useTypedLoaderData } from "remix-typedjson"; |
| 3 | +import { CodeBlock } from "~/components/code/CodeBlock"; |
| 4 | +import { |
| 5 | + MainHorizontallyCenteredContainer, |
| 6 | + PageBody, |
| 7 | + PageContainer, |
| 8 | +} from "~/components/layout/AppLayout"; |
| 9 | +import { LinkButton } from "~/components/primitives/Buttons"; |
| 10 | +import { Callout } from "~/components/primitives/Callout"; |
| 11 | +import { ClipboardField } from "~/components/primitives/ClipboardField"; |
| 12 | +import { Header2 } from "~/components/primitives/Headers"; |
| 13 | +import { Input } from "~/components/primitives/Input"; |
| 14 | +import { Label } from "~/components/primitives/Label"; |
| 15 | +import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader"; |
| 16 | +import { Paragraph } from "~/components/primitives/Paragraph"; |
| 17 | +import { TextLink } from "~/components/primitives/TextLink"; |
| 18 | +import { findProjectBySlug } from "~/models/project.server"; |
| 19 | +import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server"; |
| 20 | +import { |
| 21 | + getExternalOidcController, |
| 22 | + isExternalOidcEnabled, |
| 23 | +} from "~/services/oidc/externalOidc.server"; |
| 24 | +import { resolveProjectAuthScope } from "~/services/projectAuthScope.server"; |
| 25 | +import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder"; |
| 26 | +import { AWS_S3_READ_PERMISSIONS, awsOidcTaskExample, awsOidcTrustPolicy } from "~/utils/oidcSetup"; |
| 27 | +import { pageMeta } from "~/utils/pageTitle"; |
| 28 | +import { docsPath, EnvironmentParamSchema } from "~/utils/pathBuilder"; |
| 29 | + |
| 30 | +export const meta = pageMeta("OpenID Connect (OIDC)"); |
| 31 | + |
| 32 | +export const loader = dashboardLoader( |
| 33 | + { |
| 34 | + params: EnvironmentParamSchema, |
| 35 | + context: (params) => resolveProjectAuthScope(params.organizationSlug, params.projectParam), |
| 36 | + }, |
| 37 | + async ({ params, user }) => { |
| 38 | + const project = await findProjectBySlug(params.organizationSlug, params.projectParam, user.id); |
| 39 | + if (!project) throw new Response("Project not found", { status: 404 }); |
| 40 | + |
| 41 | + const environment = await findEnvironmentBySlug(project.id, params.envParam, user.id); |
| 42 | + if (!environment) throw new Response("Environment not found", { status: 404 }); |
| 43 | + |
| 44 | + const controller = await getExternalOidcController(); |
| 45 | + const orgFeatureFlags = environment.organization.featureFlags; |
| 46 | + if (!controller || !(await isExternalOidcEnabled(orgFeatureFlags))) { |
| 47 | + throw new Response("Not found", { status: 404 }); |
| 48 | + } |
| 49 | + |
| 50 | + if (environment.type === "DEVELOPMENT") { |
| 51 | + return typedjson({ state: "development" as const, setup: null }); |
| 52 | + } |
| 53 | + |
| 54 | + return typedjson({ |
| 55 | + state: "available" as const, |
| 56 | + setup: { |
| 57 | + ...controller.getSetup({ |
| 58 | + id: environment.id, |
| 59 | + slug: environment.slug, |
| 60 | + type: environment.type, |
| 61 | + organizationId: environment.organizationId, |
| 62 | + projectId: project.id, |
| 63 | + projectRef: project.externalRef, |
| 64 | + orgFeatureFlags, |
| 65 | + }), |
| 66 | + }, |
| 67 | + }); |
| 68 | + } |
| 69 | +); |
| 70 | + |
| 71 | +const AWS_ACCOUNT_ID_PLACEHOLDER = "YOUR_AWS_ACCOUNT_ID"; |
| 72 | +const AWS_ACCOUNT_ID_PATTERN = /^\d{12}$/; |
| 73 | + |
| 74 | +export default function OidcSetupPage() { |
| 75 | + const { state, setup } = useTypedLoaderData<typeof loader>(); |
| 76 | + const [accountId, setAccountId] = useState(""); |
| 77 | + const validAccountId = AWS_ACCOUNT_ID_PATTERN.test(accountId); |
| 78 | + const exampleAccountId = validAccountId ? accountId : AWS_ACCOUNT_ID_PLACEHOLDER; |
| 79 | + |
| 80 | + return ( |
| 81 | + <PageContainer> |
| 82 | + <NavBar> |
| 83 | + <PageTitle title="OpenID Connect (OIDC)" /> |
| 84 | + <PageAccessories> |
| 85 | + <LinkButton to={docsPath("oidc")} variant="secondary/small" target="_blank"> |
| 86 | + OIDC documentation |
| 87 | + </LinkButton> |
| 88 | + </PageAccessories> |
| 89 | + </NavBar> |
| 90 | + <PageBody> |
| 91 | + <MainHorizontallyCenteredContainer className="mb-12 max-w-3xl space-y-6"> |
| 92 | + <Paragraph>Access AWS from deployed tasks using short-lived credentials.</Paragraph> |
| 93 | + |
| 94 | + {state === "development" ? ( |
| 95 | + <Callout variant="info"> |
| 96 | + OIDC requires a deployed environment. Select Production, Staging or Preview. For local |
| 97 | + development, use your own AWS credentials. |
| 98 | + </Callout> |
| 99 | + ) : setup ? ( |
| 100 | + <> |
| 101 | + <section className="space-y-3"> |
| 102 | + <Header2>1. Add an IAM identity provider</Header2> |
| 103 | + <Paragraph> |
| 104 | + In AWS IAM, choose Identity providers → Add provider → OpenID Connect. Use these |
| 105 | + values, or reuse an existing provider. |
| 106 | + </Paragraph> |
| 107 | + <div className="space-y-1"> |
| 108 | + <Header2 className="text-sm">Issuer URL</Header2> |
| 109 | + <ClipboardField value={setup.issuer} variant="secondary/medium" /> |
| 110 | + </div> |
| 111 | + <div className="space-y-1"> |
| 112 | + <Header2 className="text-sm">Audience</Header2> |
| 113 | + <ClipboardField value={setup.audience} variant="secondary/medium" /> |
| 114 | + </div> |
| 115 | + <Paragraph>Or create the provider with the AWS CLI:</Paragraph> |
| 116 | + <CodeBlock |
| 117 | + code={`aws iam create-open-id-connect-provider --url "${setup.issuer}" --client-id-list "${setup.audience}"`} |
| 118 | + language="bash" |
| 119 | + showChrome |
| 120 | + showLineNumbers={false} |
| 121 | + /> |
| 122 | + </section> |
| 123 | + |
| 124 | + <section className="space-y-3"> |
| 125 | + <Header2>2. Create an IAM role</Header2> |
| 126 | + <Paragraph> |
| 127 | + Enter your AWS account ID, then create a role with this trust policy. |
| 128 | + </Paragraph> |
| 129 | + <div className="space-y-1"> |
| 130 | + <Header2 className="text-sm">Subject</Header2> |
| 131 | + <ClipboardField value={setup.subject} variant="secondary/medium" /> |
| 132 | + </div> |
| 133 | + <div className="max-w-sm space-y-2"> |
| 134 | + <Label htmlFor="aws-account-id">AWS account ID</Label> |
| 135 | + <Input |
| 136 | + id="aws-account-id" |
| 137 | + value={accountId} |
| 138 | + onChange={(event) => setAccountId(event.target.value.trim())} |
| 139 | + placeholder="12-digit AWS account ID" |
| 140 | + inputMode="numeric" |
| 141 | + maxLength={12} |
| 142 | + pattern="[0-9]{12}" |
| 143 | + aria-describedby="aws-account-id-hint" |
| 144 | + aria-invalid={accountId.length > 0 && !validAccountId} |
| 145 | + /> |
| 146 | + <Paragraph id="aws-account-id-hint" variant="small"> |
| 147 | + Updates the examples below. |
| 148 | + </Paragraph> |
| 149 | + </div> |
| 150 | + <CodeBlock |
| 151 | + code={awsOidcTrustPolicy(setup, exampleAccountId)} |
| 152 | + language="json" |
| 153 | + showChrome |
| 154 | + showLineNumbers={false} |
| 155 | + showCopyButton |
| 156 | + /> |
| 157 | + <Paragraph> |
| 158 | + To share a role across Preview branches, see{" "} |
| 159 | + <TextLink href={`${docsPath("oidc")}#set-up-aws`} target="_blank"> |
| 160 | + Preview trust policies |
| 161 | + </TextLink> |
| 162 | + . |
| 163 | + </Paragraph> |
| 164 | + </section> |
| 165 | + |
| 166 | + <section className="space-y-3"> |
| 167 | + <Header2>3. Attach permissions to the role</Header2> |
| 168 | + <Paragraph> |
| 169 | + Attach permissions for the AWS services your task needs. This example allows |
| 170 | + reading an S3 prefix. |
| 171 | + </Paragraph> |
| 172 | + <CodeBlock |
| 173 | + code={AWS_S3_READ_PERMISSIONS} |
| 174 | + language="json" |
| 175 | + showChrome |
| 176 | + showLineNumbers={false} |
| 177 | + /> |
| 178 | + </section> |
| 179 | + |
| 180 | + <section className="space-y-3"> |
| 181 | + <Header2>4. Use the SDK</Header2> |
| 182 | + <Paragraph> |
| 183 | + Install the SDK and AWS clients, then use the credential provider in your task. |
| 184 | + </Paragraph> |
| 185 | + <CodeBlock |
| 186 | + code="npm install @trigger.dev/sdk@latest @aws-sdk/client-sts @aws-sdk/client-s3" |
| 187 | + language="bash" |
| 188 | + showChrome |
| 189 | + showLineNumbers={false} |
| 190 | + /> |
| 191 | + <CodeBlock |
| 192 | + code={awsOidcTaskExample(exampleAccountId)} |
| 193 | + language="typescript" |
| 194 | + showChrome |
| 195 | + showLineNumbers={false} |
| 196 | + /> |
| 197 | + </section> |
| 198 | + |
| 199 | + <section className="space-y-3"> |
| 200 | + <Header2>5. Redeploy</Header2> |
| 201 | + <Paragraph> |
| 202 | + Use SDK and CLI 4.8.3 or later, including in CI. Redeploy and start a new run. |
| 203 | + </Paragraph> |
| 204 | + </section> |
| 205 | + </> |
| 206 | + ) : null} |
| 207 | + </MainHorizontallyCenteredContainer> |
| 208 | + </PageBody> |
| 209 | + </PageContainer> |
| 210 | + ); |
| 211 | +} |
0 commit comments