Mastering Microfrontends: Authentication with AWS Cognito
In the last post of this series, we will see how to take our previous microfrontend application and extend it to integrate with AWS Cognito User Pools to sign up and manage authenticated users.
The sample microfrontend app will make use of the AWS CDK and extend the previous application from the last blog post. The source code can be found on my GitHub repo here.
The application will require each newly created user to verify their email before being able to sign in. This feature will be handled within AWS Cognito User Pools. As part of the verification process, a post-confirmation trigger will be used to add the newly verified user to a Cognito User Group.
The Cognito post-confirmation trigger can be used for multiple actions. For more information about AWS Cognito post-confirmation triggers, please refer to the AWS documentation.
Setup AWS Cognito Backend
The AWS CDK stack consists of:
- an AWS Lambda function that is responsible for adding the verified user to the
UsersCognito group - an AWS Cognito User Pool that includes the
UsersCognito group and a User Pool client to manage the users
Once we deploy the CDK stack to AWS we see the AWS Cognito User Pool created with the Users group.
Updates to Host App
In a microfrontend app, the host app should be responsible for managing authentication. In order to update our container app to integrate with AWS Cognito we need to make some updates.
Integrating with the Cognito API
For our container app to make calls to the AWS Cognito API, we can make use of the amazon-cognito-identity-js package.
The full content of the source file is rather large so instead of pasting it here, you can find it in the project folder here. The cognito.ts file contains the main functions required to perform basic actions within AWS Cognito User Pools such as:
- Getting a user from the User Pool
- Signing in a user
- Confirming a user’s registration code
- Changing a user’s password
To access the correct AWS Cognito User Pool, the source file reads from the React environment variables which can be created in a .env file at the root of the project folder.
REACT_APP_USERPOOL_ID={{YOUR_COGNITO_USERPOOL_ID}}
REACT_APP_CLIENT_ID={{YOUR_COGNITO_APP_CLIENT_ID}}Adding an Auth Context
Once we have the AWS Cognito API hooked up, we use the useContext hook from React to create an AuthContext that allows our React app to manage the session across the app.
The full source file is also rather large and can be found in the project folder here but the significant part is the AuthProvider object that is created that manages the user session.
Update the React app
In the container app, we will also update the App.tsx to make use of this new AuthProvider context.
The routes will also be updated to contain the necessary callback functions to handle authentication events to our AuthApp with our Cognito User Pool which we will see in the next.
Update the AuthApp to Call Auth Context
With the updates to our container app, we can then update the authentication components within the AuthApp, which handles the authentication, to make use of this context.
In the case of a sign-in, the callback function makes the API call to the AuthContext we created earlier to sign the user in through the Cognito User Pool. We can do a similar action with a sign-up and registration confirmation.
Putting It All Together
Once we have these pieces updated in our container app, it’s time to test the integration with AWS Cognito.
Here we can see upon sign-up, a user is forced to verify their email. Once signed in the user is presented with the same authenticated dashboard view we have seen before.
With all of these pieces together we now have a start to a microfrontend application hooked up to AWS Cognito User Pools!
Eric Bach is a Senior Software Developer @ Alberta Motor Association who enjoys learning, reading, and writing about leadership principles, event-driven microservices, and all things AWS.
