Using manually created Cognito User Pool with an amplify project - aws-cloudformation

Question

I'm trying to use my existing Cognito User Pool when adding AWS Amplify to a react project.
In result, I want to use Amplify Datastore functionality for existing users in my manually created Cognito User Pool. Also, I like the Amplify CLI functionality for managing GraphQL schema for API, so, this means that I need to initialize amplify project inside my react project.
I started by this chapter https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js. But this chapter uses API Key authentication.
I know, that I can add Authentication to the amplify project by amplify auth add, but it has no option for using existing User Pool.
I can use my User Pool without initializing amplify project by amplify init - by using manually composed aws-exports.json. But as I pointed, I need also add amplify project for API.
I would combine configs, something like Amplify.configure({...aws_config_by_amplify, ...my_aws_config}), but it still unclear how to manage amplify api authentication with my user pool then.
Ideally, it would be great to use some command for amplify project configuration with an existing user pool, but I have not found one.
Also, I suppose that it's possible to make some manual changes in amplify project's cloudformation template/params, and to update the stack with that, but, unfortunately, I am not so good in CloudFormation usage.
How to solve this?

Answer 1

The solution was found here: https://github.com/aws-amplify/amplify-cli/issues/779
Init amplify project amplify init
Add API amplify add api with choosing of GraphQL
Update ampilfy/backend/api/backend-config.json, changing defaultAuthentication to
"defaultAuthentication": {
"authenticationType": "AMAZON_COGNITO_USER_POOLS"
}
Update ampilfy/backend/api/amplifyDatasource/parameters.json:
{
"AppSyncApiName": "amplifyDatasource",
"DynamoDBBillingMode": "PAY_PER_REQUEST",
"DynamoDBEnableServerSideEncryption": "false",
"authRoleName": {
"Ref": "AuthRoleName"
},
"unauthRoleName": {
"Ref": "UnauthRoleName"
},
"AuthCognitoUserPoolId": "<USERPOOL ID>"
}
(I am unsure that authRoleName and unauthRoleName are needed)
amplify push, and voila, the Appsync will have the user pool as the default authentication.

Answer 2

One solution, assuming you want to use the Amplify UI Authenticator component in your React project:
(Note this does not require any Amplify add/pull/push, config file generation, or any of that. It's 100% client side, you just drop in a component, configure it, and use it).
npm install #aws-amplify/ui-react aws-amplify
In your top-level style file, import the theme:
import '#aws-amplify/ui-react/styles.css';
Note: if you are in a Next.js project or get some complaints about pure selectors, import this in your top level app file, like _app.tsx
Add your config object to _app.tsx:
Amplify.configure({
Auth: {
region: 'us-west-2', << whatever region
userPoolId: 'your-userpool-id',
userPoolWebClientId: 'you-web-client-id', << found in App Integrations
},
});
Note that you can get your region from the userPoolId (at least, at this time), it's the part to the left of the underscore.
Add the Authenticator to your markup:
<div className="authenticator">
<Authenticator>
{({ signOut, user }) => (
// Next.js
<Component {...pageProps} signOut={signOut} user={user} />
// react-router-dom
<Routes>[Your Routes]</Routes>
)}
</Authenticator>
</div>
Import note: to use this component, make sure in your user pool Advanced app client settings -> Authentication Flows, "ALLOW_USER_SRP_AUTH" is in the list. The Authenticator component sends data a certain way and needs this protocol.
That's pretty much it. It assumes the userpool has things like verification and an app integration configured correctly, but as for the client side the above is all there is to it, I've used it a number of times recently.