Focus architecture for Payments micro-frontend.


  • Support CRUD operations to the payments micro-frontend by using Amplify AppSync to consume a payments API backed by GraphQL and DynamoDB.
  • Introduce an element of multi-tenancy architecture to allow companies’ users to manage their unconfirmed company payments.
End result user flow.


Introduce APIs to Payments

cd mfe-payments
amplify add api
amplify push
  • an api and auth section inside the backend-config.json file, to support deployment
  • a new api folder got created under path amplify/backend/api.
  • a CloudFormation template which will provision AppSync configurations, IAM roles and lambdas to support the infrastructure for the GraphQL endpoint.
  • a dummy schema.graphql containing an annotated Todo model, which we will update shortly.
Generated code by add command.
  • created a DynamoDB table to store the model.
  • created an AppSync configuration with a Datasource to access the above mentioned table. This also uses a number of resources (S3 deployment buckets, IAM roles, Lambdas, Cognito user pools) to glue our API with authorization mechanisms and store artifacts such as the GraphQL schema.
  • exposed a GraphQL endpoint which can be POSTed to perform any CRUD actions.
  • generated up to 8 GraphQL resolvers handling queries, mutations, and subscriptions on the type annotated with the @model directive.
Part of resources generated by CloudFormation stack.
The Payment model.

Supporting multi-tenancy

Saas model with multi-tenancy.
  • unique tenant identification for the logged in user
  • tenancy isolation. As data is shared to the same database instance, tenant related data should be isolated from other data and accessed securely.
Create custom attributes in Cognito Users Pools.

Magic @nnotations

Auth annotation with defined rule.
amplify import auth
amplify push
CRUD operations on payment model.
Unauthorized mutation.

UI frontend changes

  • Redesign parent app with Menu based on angular-material components which routes to accounts and payments Web Components.
  • Introduced paged table in payments to show off CRUD by using angular component forms for forms, table and validations.

Access tokens vs ID tokens

amplify publish 

Demo time!

Frontend Limitations & Improvements

  • When I tried to publish the angular bundle, you may need to update the budget limit (do not worry, no money involved here :P) in the angular.json
  • Lack of global object not defined. I just needed to add a few lines here
  • Add creation of tenants in UI, rather than programmatically. This could imply rewriting the signing flow by dropping the withAuthentication HOC in fa out of programmatic use of Auth APIs. Can be fun to try that out!
  • Sharing styles in micro-frontend will be tricky at scale: make sure you invest some time into a strategy on how to share common style guide and shared code from parent to child components unless you just will reference all child styles into parent html (as I did fit the demo).

Backend Limitations & Improvements

  • To protect your GraphQL endpoints from XSS attacks and company, leverage AWS WAF to protect network access.
  • Integration with Leading keys check on Dynamo DB with Amplify workflow, to increase security and tenancy isolation at IAM level.
  • Multitenancy: more granular use cases and more deep dive into annotations.
  • Evolve and or



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Antonio Lagrotteria

Antonio Lagrotteria

Engineering Manager | Architect | Team/Tech Lead with a passion for frontend, backend and cloud | AWS Community Builder