Building a React Frontend for Service Catalog with AWS Amplify

AWS Service Catalog allows you to centrally manage commonly-deployed AWS services in your organization. Customers are using Service Catalog to meet compliance requirements while enabling their users to quickly deploy only the approved and curated selection of resources within AWS.

We have seen organizations who would like to integrate their internal tools and web portals with AWS, rather than giving their users access directly to the AWS console to provision services. In an earlier post this year, we announced the integration of ServiceNow with Service Catalog, which allows users to launch AWS services from within ServiceNow.

In this post, I would like to show you how easy is to build your own custom integration with Service Catalog using React, a widely-used framework for modern web development.

An Example Use Case

Suppose you want to provide your users the ability to launch a selection of products that have been pre-approved in your organization. You want to build a user interface that looks similar to the following screenshots:

Your users would be able to provision only those products that you have specifically made available for them. And they will be able to do it without having access to the AWS console.

This now becomes a very powerful tool, because it allows you to enforce Tags on the provisioned products and define constraints on the CloudFormation parameters to specific values (i.e., Instance Size or Security Group Inbound Rules), without compromising on the flexibility and agility that AWS provides. Behind the scenes, each product is defined by a CloudFormation template, so you can get as creative as you want with the products you make available for your users.

When a user clicks the Launch button, another modal pops up showing the Parameters that you made available for them to configure. In the following example, the user is provisioning a WordPress server, and they can specify parameters like database name or admin passwords. It’s up to you to define which parameters are configurable, and which are constrained to a specific value that you define.

Once the provision request has been submitted, Service Catalog will launch the CloudFormation template with the specified parameters to create the desired product. You can then add another widget for your users to visualize their provisioned products and check their status, as well as terminate them whenever they decide to.

Once the product has been provisioned, users can click on the Details button to see the output parameters. These parameters are coming from the CloudFormation Output values that you decide to make available. For example, for a WordPress website, you may want to display the public URL of the WordPress installation, so the user can proceed to configure and customize the website.

The Implementation

There are three components that are involved in building a user interface like the one described above.

1. A Cognito User Pool and Identity Pool.
2. A Service Catalog portfolio with products.
3. A React application.

Setting up Cognito

Cognito User Pools are used in this example to handle authentication. Cognito Identity Pools are used to authorize your users to use the various AWS services by obtaining temporary credentials with the permissions that you define. Working together, Cognito User Pools acts as a source of user identities (identity provider) for the Cognito Federated Identities.

I won’t go into details of how to set up User and Identity Pools, but I recommend that you check this tutorial for user pools and this one for identity pools. Here I will highlight a couple of details that you need to keep in mind when setting up Cognito.

First, we need to create an IAM role. This is the role that your users will assume and will grant them access to launch products from the Service Catalog portfolio. Go to IAM > Roles > Create role.

At the very least, this role needs AWSServiceCatalogEndUserFullAccess permissions. However, you may need to come back later and add permissons to the specific services that your users will be able to launch (i.e., EC2 or RDS).

The next thing is to create a Group in the Cognito Pool and assign the IAM role created earlier to that group; this is where you will be adding users.

The other important step is to configure the identity pool to use the role that you attached to the Cognito User Group. In the dropdown of options, select Choose role from token. This way, when your users authenticate, they will get valid AWS credentials to assume the role defined above, and therefore will be able to access Service Catalog products.

Setting Up Service Catalog

Check out the Service Catalog getting started guide to set up your portfolio and products. Then add the same role defined above to the permissions section. This is needed for every portfolio to which want your users to have access.

Writing the React Application

Once you have configured Service Catalog and Cognito, your backend is ready. Now it’s time to write the frontend. I recommend using the React CLI to bootstrap a new application, if you don’t have one already created.

We have built the React components shown above and made them available as open source under the AWS Labs Github account. Installing them is very simple:

npm install --save aws-service-catalog-react-components bootstrap

Bootstrap is needed to style the components, but we may change this in the future. Once installed, import them into your React application:

import {
  SCProducts,
  SCProvisionModal,
  SCProvisionedProducts,
  SCProvisionedDetailsModal,
} from "aws-service-catalog-react-components";

Authentication with AWS Amplify

Although we have designed the components to be agnostic of authentication, a secure and seamless way of providing AWS credentials to them is to leverage AWS Amplify and authenticate against Cognito.

The following diagram illustrates how the different pieces relate to each other, but I recommend to check the Amplify Authentication guide to learn more about adding authentication to a React app.

All put together, your React App would look something like this:

import Amplify, { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import {
  SCProducts,
  SCProvisionModal,
  SCProvisionedProducts,
  SCProvisionedDetailsModal,
} from "aws-service-catalog-react-components";

Amplify.configure({
  Auth: {
    region: '<aws region>',
    identityPoolId: '<your identity pool id>',
    userPoolId: '<your user pool id>',
    userPoolWebClientId: '<your user pool web client id>',
  },
});

class App extends Component {
  componentDidMount() {
   // Using the Auth service from Amplify to get credentials
    Auth.currentCredentials().then(credentials => {
     this.setState({
        credentials: Auth.essentialCredentials(credentials)
      });
    });
}

onLaunchClick() {
  console.log('User clicked Launch button');
}

render() {
  return() {
      <SCProducts
        credentials={this.state.credentials}
        onLaunchClick={this.onLaunchClick}
      />
   }
 }
}

export default withAuthenticator(App);

Learn More

Head over to the Github repository, where you’ll find a Demo folder that we set up to illustrate the implementation described in this post. We hope this post was helpful, and although the React Components are in the early stages of development, we would love to hear feedback and receive contributions from the community!