My use case is fairly simple: I want to deploy a frontend to production that uses an Amplify backend, without exposing sensitive config like the API key.
I have a frontend that uses Github Actions for CI and CD and deploys to Zeit Now (since it's a Next.js project and needs SSR support, which Amplify currently does not provide). At the moment it does not have a backend connected so it deploys to production without any issues.
In the same project I've set up AWS Amplify for the backend and connected it to the frontend. It all works sucessfully as expected from a local environment.
Now I want to deploy the frontend to production, however the AWS config for connecting it to the backend, it's saved in an autogenerated file named aws-exports.js which contains amongst other things the GraphQL end point and its API key. This file has been added to the .gitignore by the Amplify CLI.
If I remove the aws-exports.js files from the .gitignore and commit it to the repository, I think it would probably work once deployed to production, however I assume this is not a good idea since I would be exposing sensitive config data.
I don't want to use AWS to deploy my frontend, which is what's suggested as solution in the documentation I've read about this. Is there any recommended way to do this keeping the frontend and backend environments separated? (meaning the frontend still being deployed to Zeit Now which will use the backend deployed in AWS).
As far as I understand the AWS AppSync security concept designates the auth model API_KEY to usage in either public applications or development environments.
Unauthenticated APIs require more strict throttling than authenticated APIs. One way to control throttling for unauthenticated GraphQL endpoints is through the use of API keys.
An API key is a hard-coded value in your application that is generated by the AWS AppSync service when you create an unauthenticated GraphQL endpoint.
I do not think that there is any benefit in trying to hide an API key. If authentication is required, it must be provided by other means than a hard-coded secret which is always extractable from public apps (such as web frontends).
There are more auth models described in the docs. [1]
If you are planning to develop an app with private endpoints and a public frontend/client, you should definitely use another auth model - most likely OPENID_CONNECT or AMAZON_COGNITO_USER_POOLS.
I think you should first read the AWS blog post titled GraphQL API Security with AWS AppSync and Amplify [2] and afterwards stating your question more precisely if any lack of clarity should remain.
[1] https://docs.aws.amazon.com/appsync/latest/devguide/security.html#api-key-authorization
[2] https://aws.amazon.com/de/blogs/mobile/graphql-security-appsync-amplify/