AWS Setup Integration Block for React

No. The commands are text for the customer to run themselves, the account ID and ARN are checked only for their shape, and "Connected in this demo" is local state. A line under the window says so from the first paint. To make it real, point Finish setup at your own endpoint, which should assume the role with the External ID and report whether it worked.

It is derived from the account ID with a small hash (externalIdOf), so the same ID always gives the same value and the commands, the trust policy and the step 2 note agree. AWS's guidance is that the vendor, not the customer, generates and controls the External ID, so in production replace it with a value your backend creates and stores for each customer, and keep PRINCIPAL set to your own AWS account.

The first checks the shell is in the right account, then aws iam create-role creates the role with a trust policy that lets your account assume it only when the External ID matches. The second, aws iam put-role-policy, attaches a read-only inline policy: Cost Explorer's ce:GetCostAndUsage and ce:GetTags, plus organizations:ListAccounts for an organization. Edit commandsOf, ROLE and POLICY to match your own policy.

parseArn accepts the shape arn:<partition>:iam::<12 digits>:role/<name> for the aws, aws-cn and aws-us-gov partitions, shows its three parts, and compares the account with the one entered in step 1. A mismatch, or text that isn't a role ARN, keeps Finish setup unavailable and says why. The note is also spoken by a polite live region once typing pauses, so it isn't read on every keystroke.

On a phone the step titles become numbers, the buttons go full width and the code block scrolls sideways in a region you can focus and read with the arrow keys. IDs, ARNs and commands keep their left-to-right order in a right-to-left layout while the rest of the window flips. The header and window fade up once on load; reduced motion turns that off.