How does a web browser client get the user pool ID and identity pool ID without them being hard-coded?

Question

What is the best way to get your identity pool and user pool IDs into a web browser client (react, typescript, etc). without hard-coding them?  For just testing, when I'm taking user pools up and down a lot, I made a resource in API Gateway that returns them.  I'm not sure whether or not that's a good idea - general guidance seems to be to keep them private.  I can't figure out another way to look them up through any API that doesn't require you to already have credentials.

I suppose if my webapp is being fed out of CloudFront/S3 then somebody could find these IDs in the module or index.js without a whole lot of effort.  That makes me think maybe they really don't need to be kept very secret, and my idea of putting them in an /endpoints path in APIGWv2 is not completely terrible.

I have other things the client needs to know, like s3 bucket endpoints, but I can put those on another API path that requires you to already be authenticated.

How do others handle this?

Answer

They're not secret, they're in the JWTs and anyone can read those. I just put them in front-end and back-end environment variables.

Answer

Thanks!  What do you think of the strategy of putting these IDs in a CloudFront header behavior as a way to get them to the webapp?  (I just need to figure out how to do that in CDK - I don't see how to do it with a `CloudFrontWebDistribution` and suspect it's a Cfn configuration that's not part of CDK).

How does a web browser client get the user pool ID and identity pool ID without them being hard-coded?

Relevant content