Amplify Framework announces new, rearchitected UI Component and modular JavaScript libraries

The Amplify Framework is an open source project for building cloud-enabled mobile and web applications, consisting of libraries, UI components, and a CLI toolchain.

Today, we are excited to share a new, rearchitected Amplify UI component library that enables JavaScript developers to easily add authentication scenarios to their web apps. You can use the authentication components to quickly add use cases such as sign-in, sign-up, confirm sign-up, forgot password, require new password, verify contact, greetings, and OTP to your web apps. The authentication components include numerous improvements over previous versions, including the ability to automatically sign-in users after sign-up confirmation, more granular customizability (leveraging the HTML slot element), and improved accessibility. You can extensively customize these components using the theming capabilities, powered by CSS variables, to provide a consistent look and feel throughout your app and individually tweak properties of the components.

You can easily add the authentication components to your app using the React, Angular, and Vue bindings that include full TypeScript support. The new authentication components leverage shared Web Components (browser feature that provides a standard component model for the Web), enabling consistent UI styling, interactions, and feature parity whether using React, Angular, Vue or Web Components.

The new Amplify JavaScript library (v3) has modularization improvements with support for tree shaking which help reduce the bundle size of your application. In addition, the API module is now split in to GraphQL and REST modules which further reduces the size of the application bundle if you are using only one of those two modules. The new library takes a dependency on the modular and refactored AWS SDK for JavaScript (v3) which further helps in reducing the bundle size.

In this post, we build a React application that has sign-up and sign-in functionality using the Authenticator UI component. We will use the customization capabilities of this component to change the look and feel of the sign-up/sign-in page and add custom headers. In the second part of the post, we look at the new modularized Amplify JavaScript library. We then build a sample app code and compare the bundle size of the applications when using the new and previous versions of the library.

Prerequisites

Install Node.js and npm if they are not already installed on your machine.
Note: At the time of writing this blog the minimum version of Node.js required is >= 10.x and for npm >= 5.x

Install and configure the Amplify CLI

If you already have the Amplify CLI configured, you can skip this step and jump to the next section.

$ npm install -g @aws-amplify/cli
$ amplify configure

amplify configure asks you to sign into the AWS Console.

Once you’re signed in, the Amplify CLI asks you to create an IAM user.

Specify the AWS Region ? 
*region*: # Your preferred region 
Specify the username of the new IAM user: ? 
*user name*: # User name for Amplify IAM user 
Complete the user creation using the AWS console

Create a user with AdministratorAccess in your account to provision AWS resources for you like (for instance AppSync, Cognito, etc).

Initialize the project

If you do not have a React application you can create one using the following command:

$ npx create-react-app amplifyapp
$ cd amplifyapp

From the root of your project folder run the command and accept defaults where applicable as shown:

$ amplify init 

? Enter a name for the project: amplifyapp 
? Enter a name for the environment: dev 
? Choose your default editor: Visual Studio Code 
? Choose the type of app that you are building: javascript 
? What javascript framework are you using: react 
? Source Directory Path: src 
? Distribution Directory Path: build 
? Build Command: npm run-script build 
? Start Command: npm run-script start 
? Do you want to use an AWS profile? Yes 
? Please choose the profile you want to use: default

Add Authentication

The Authentication UI component is powered by Amazon Cognito. The Amplify CLI enables you to easily set up the backend for Auth.

Run the following command from the root of your application folder and choose the options as shown:

$ amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.

Push your changes to the cloud

Run the following command to set up your backend in the cloud:

$ amplify push

? Great work ! You have successfully set up the backend required for our application.

Install dependencies

A simple way to add authentication flows into your React app UI is to use the Authenticator component, which is a part of the @aws-amplify/ui-react library.

Run the following command from the root of your application folder to install the amplify and ui-react library:

yarn add aws-amplify @aws-amplify/ui-react

Integrate the code in your app

Now, update your app code to use the Authenticator component by editing the src/App.js file.

import React from 'react';
import Amplify from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
    </div>
  </AmplifyAuthenticator>
);

export default App;

Let’s go over a few things in this code:

The Amplify UI Components use slots to allow for component customization. A slot is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

The <AmplifyAuthenticator> component loads other components by default. The list of available components as of this point is:
1. amplify-sign-in
2. amplify-sign-up
3. amplify-sign-out
4. amplify-confirm-sign-up
5. amplify-forgot-password
6. amplify-require-new-password
7. amplify-verify-contact
8. amplify-totp-setup
9. amplify-greetings
You can override the components listed above and pass them into these slots to preserve the authenticator state flow.
The <AmplifySignOut> is a component that is present under AmplifyAuthenticator as shown above and it provides Sign-out functionality.

Run your app

Run your app using the following command:

npm start

Your app should look like below:

? Congratulations ! You have a fully functional Sign-up/Sign-in page functionality in our app.

Customization

Let’s change the text of the Sign-in and Sign-up page.
It can be easily customized by using the AmplifySignIn and AmplifySignUp components under the AmplifyAuthenticator component.
Open src/App.js again and update the import statement to include AmplifySignIn and AmplifySignUp components

import { AmplifyAuthenticator, AmplifySignOut, AmplifySignIn, AmplifySignUp } from '@aws-amplify/ui-react';

Next update the App() object:

const App = () => (
  <AmplifyAuthenticator>
    <AmplifySignIn headerText="My Custom Sign In Header" slot="sign-in" />
    <AmplifySignUp headerText="My Customer Sign Up Header" slot="sign-up" />

    <div>
      My App
      <AmplifySignOut />
    </div>
  </AmplifyAuthenticator>
);

When you run your app now, you should see the update:

Click on “Create Account” to see the Sign-up page:

Customize Theming

Theming for the UI components can be achieved by using CSS Variables. You can enable theming in our app by overriding the list of supported CSS variable values.
Let’s say we want to change the color theme to green (#008000) and mouse hover over links to be blue (#0000FF)

To do that, add the following code in the root css file index.css.

:root{

  --amplify-primary-color: #008000;
  --amplify-primary-tint: #0000FF; 
  --amplify-primary-shade: #008000;

  }

If you refresh your app, you should see the following screen:

Modularized Amplify libraries

If you currently use the existing Amplify JavaScript library (v2.x.x), you can reduce the bundle size of your application by upgrading to the new library (v3) which supports tree shaking.
To leverage other AWS services when using Amplify JavaScript library v3.x.x, you are required to use the new modular AWS JavaScript SDK V3.

Note: This is a major version update for the Amplify JavaScript library and includes breaking changes. We strongly recommend testing your application with the new version before migrating.

Now let’s take a look at an example where we check the bundle size of a React application that uses the previous version of Amplify Auth module. We then upgrade to use the new library (v3) and compare the bundle size of the application.

Here is a simple React application code in src/App.js that shows a sign-in button:

import React from 'react'
import './App.css'
import awsconfig from './aws-exports'
import Amplify from 'aws-amplify'
import { Auth } from 'aws-amplify'

Amplify.configure(awsconfig);

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => Auth.federatedSignIn()}>Sign In</button>
      </header>
    </div>
  )
}

export default App;

We check the bundle size of the application by running the following command:

yarn build —prod —source-map

After updating the Amplify library to the latest version and running the build command again we get the following:

Notice, the reduction in size for the first build output of the sample we built in this post. Your numbers may vary for this and other apps depending on your configuration and dependencies installed.

Conclusion

We saw how the latest Amplify UI component library speeds up your app development by enabling you to build fully functional cloud connected interactions that can be easily customized. The libraries provide consistent styling and feature-parity across different web frameworks such as React, Angular, and Vue. The new modular Amplify JavaScript library with tree shaking support helps customers to reduce the bundle size of their existing applications when compared to the previous versions of the library.

Feedback

We hope you like these new features! Let us know how we are doing, and submit any feedback in the Amplify JavaScript GitHub repository. You can read more about this feature on the Amplify Framework website. Also, check out our community site to find the events, posts, and contributors to the Amplify community.

Front-End Web & Mobile