AWS CDK, Amplify and UserPool IDs

Overview:

The goal is to retrieve the user pool ID and user pool client ID values from AWS Systems Manager Parameter Store and use them in an Amplify React application for authentication and user management. The values are initially stored in AWS Systems Manager Parameter Store by a separate AWS CDK (Cloud Development Kit) application.

Step 1: Store User Pool IDs in AWS Systems Manager Parameter Store

Using an AWS CDK application, we store the user pool ID and user pool client ID values in AWS Systems Manager Parameter Store. This is done separately from the Amplify React application.

i.e. in your web-app-stacks.ts

Step 2: Create an amplify.yml file

In the root directory of the Amplify React application, we create an amplify.yml file with the following content:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - node src/get-parameters.js

This file instructs the Amplify CLI to execute the node src/get-parameters.js command during the preBuild phase, before the actual build process starts.

Step 3: Create the get-parameters.js file

In the src directory of the Amplify React application, we create a get-parameters.js file with the following content:

const AWS = require('aws-sdk');
const fs = require('fs');
const ssm = new AWS.SSM();

AWS.config.update({ region: 'us-east-1' }); // Set the AWS region

async function getParameter(name) {
  // Function to fetch a parameter value from AWS Systems Manager Parameter Store
}

async function generateConfig() {
  const userPoolId = await getParameter('/stablemate/user-pool-id');
  const userPoolClientId = await getParameter('/stablemate/user-pool-client-id');

  const config = {
    Auth: {
      region: 'us-east-1',
      userPoolId: userPoolId,
      userPoolClientId: userPoolClientId,
    },
  };

  fs.writeFileSync('src/aws-exports.js', `export default ${JSON.stringify(config)};`);
}

generateConfig();

This script fetches the user pool ID and user pool client ID values from AWS Systems Manager Parameter Store and generates an aws-exports.js file with the retrieved values.

Step 4: Test the get-parameters.js script

To test if the get-parameters.js script is functioning correctly, run the following command in the terminal from the project root directory:

node src/get-parameters.js

This should create or update the src/aws-exports.js file with the latest user pool ID values.

Step 5: Configure the Amplify application

In the App.js file of the Amplify React application, import the awsExports object from the aws-exports.js file and configure the Amplify library:

import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

This step tells the Amplify library to use the user pool ID and user pool client ID values from the aws-exports.js file for authentication and user management.

Step 6: Build and deploy the application

1. Run npm run build to compile the Amplify React application.
2. Commit and push the changes to the remote Git repository (excluding the aws-exports.js file, which is listed in the .gitignore file).
3. The Amplify hosting service, configured with CI/CD, will automatically pick up the changes from the Git repository and deploy the updated application.

Step 7: Access the correct user pool information

Even though the aws-exports.js file is not included in the Git repository, the Amplify hosting service will still have access to the correct user pool information. This is because during the build process (npm run build), the Amplify library reads the user pool ID and user pool client ID values from the aws-exports.js file and includes them in the compiled application bundle.

When the application is deployed and running, it will use the correct user pool ID and user pool client ID values retrieved from AWS Systems Manager Parameter Store, enabling proper authentication and user management functionality.

This flow allows us to securely store sensitive information like user pool IDs in AWS Systems Manager Parameter Store, retrieve them during the build process, and use them in the Amplify React application without exposing them publicly in the Git repository.