Chapter 3: Pluggable Amplify UI Components

Welcome to Chapter 3, Pluggable Amplify Components. In this chapter, we will be covering the pre-built and pluggable Amplify UI components. We all know that writing an app or website from scratch can be very time-consuming. Amplify UI components such as sign-up screens, photo albums, and photo pickers are things that can be plug-and-play so that we can test our ideas first and then apply the styles and typography that we want. We will cover the following topics:

• Adding Amplify UI components to the project
• Customizing Amplify UI components
• Applying styling such as typography and colors

We will cover these points for a ReactJS project, an Expo project, and a React Native project.

Technical requirements

This chapter requires you to complete the exercises of Chapter 1, Getting Familiar with the Amplify CLI and Amplify Console and Chapter 2, Creating a React App with AmplifyJS and TypeScript in order to add Amplify UI components to your project. You can download the file required from the following link: https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify/tree/master/ch3.

Installing Amplify UI in the project

Let's go to the project directory of the React app and add the Amplify UI dependencies to the project if you haven't done so.

For a ReactJS project, run the following command in the terminal:

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

For an Expo or React Native project, run the following command in the terminal:

yarn add aws-amplify aws-amplify-react-native

The next step is to go to the specific project directory and call the amplify add auth command in the terminal in order to set up Amplify UI authentication. We will use an email address as the username in this exercise:

amplify add auth
Using service: Cognito, provided by: awscloudformation
 The current configured provider is Amazon Cognito. 
 Do you want to use the default authentication and security  configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure...

Adding Amplify UI components to a ReactJS project

Let's open the App.tsx file of our ReactJS project. We will add the following TypeScript code to the app:

1. As usual, import the essential React and Amplify libraries as well as the App.css file:

   import React from 'react';
   import './App.css';
   import Amplify from 'aws-amplify';

2. Import the AmplifyAuthenticator and AmplifySignOut UI components. We will integrate the sign in, sign up, and sign out UI components first:

   import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
   import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';

3. Import the AWS setting file. Please make sure that you don't commit the aws-export.js or .ts setting files to the Git repository because the AWS console will figure it out itself:

   import awsExports from "./aws-exports";
   Amplify.configure(awsExports);
   const App = () => {

4. We will create...

Customizing Amplify UI components for ReactJS

Let's open App.tsx, add the AmplifyAuthenticator tag back, start our customization, and import the rest of the authentication components:

1. Import the AmplifySignup, AmplifySignIn, AmplifySignout, and AmplifyForgotPassword components for customization:

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

2. The next step is to add the following code blocks inside the AmplifyAuthenticator component. We change the usernameAlias attribute to either username, email, or phone_number. We will use email in our example:

   <AmplifyAuthenticator usernameAlias="email">

3. Add the AmplifySignIn code block here and change the values of the attributes, such as headerText and submitButtonText, as appropriate, as well as changing the formFields elements:

           <AmplifySignIn 
       ...

Applying styling such as typography and colors to a ReactJS app

Every website, app, or company has its own branding strategy to differentiate itself from others. In this section, we will pick a typography style that is suitable for our project and then change the colors and styling accordingly:

1. Pick a font that you like from https://fonts.google.com, and then we will use it as the font of our project:

   Figure 3.8 – Google Fonts

   As you can see, we have over 1,000 options here to choose from; let's pick something that you like and write down the name of it.

2. In this example, we picked something that sounds cool – Great Vibes – but is not really readable for the users as an experiment to see how it looks with our app:

   Figure 3.9 – Google Fonts – Great Vibes

3. Now open the App.css file and enter the following code block at the top of the file:

   @import url('https://fonts.googleapis.com/css2?family=Great+Vibes');

4. The CSS now...

Adding Amplify UI components to a React Native project

In this section, we will cover the steps of how to implement Amplify UI components for a React Native app. Before we do that, we need to make sure we have installed the dependencies by entering the following command in the terminal:

yarn add aws-amplify aws-amplify-react-native

Once we have added the Amplify libraries to the Expo or React Native project, we would like to test the Authenticator UI library. There are two ways to do that: using the withAuthenticator Higher-Order Component (HOC) or using the actual Authenticator component. We picked the withAuthenticator component as an example. Let's add the following code to the existing App.tsx file:

import React from 'react';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from 'aws-amplify';
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
const App = () => {
  ...

Customizing Amplify UI components for Expo and React Native apps

AWS Amplify for React Native is a little bit less customizable compared to Amplify for ReactJS – perhaps that's because it is still new. We can only customize the sign-up screen, instead of all the screens as we did with the ReactJS app. But we can still configure what is to be used as the username, choosing between username, email, and phone_number. Let's open App.tsx and do the following:

1. Import the react and react-native libraries:

   import React from 'react';
   import { Text } from 'react-native';

2. Import the withAuthenticator component from the aws-amplify-react-native library. This is an HOC, which is a function that takes a component and returns a new component. In our case, we will use it to wrap around the App component and return it with the Amplify Authenticator component:

   import { withAuthenticator } from 'aws-amplify-react-native';
   import Amplify from &apos...

Applying styling such as typography and colors to Expo and React Native apps

Theming on React Native and Expo is slightly different from ReactJS because there is only one way to do it, which is by creating a style file that contains all the styles instead of a CSS file. Let's create a file called AmplifyUIStyles.ts in the app directory and do the following:

1. Import StyleSheet from the react-native module:

   import { StyleSheet } from 'react-native';

2. Export the AmplifyThemeType type and the colors. You can change the colors to whatever you want with a hex color, or you can just use the name of a color, as here with 'blue':

   export type AmplifyThemeType = Record<string, any>;
   // Colors
   export const deepSquidInk = '#152939';
   export const linkUnderlayColor = '#FFF';
   export const errorIconColor = '#DD3F5B';
   export const textInputColor = '#000000';
   export const textInputBorderColor = '#C4C4C4';
   export...

Summary

In this chapter, we learned how to add Amplify UI components to our projects and about customizing and theming the Amplify UI Authentication component. It really is that easy to add authentication to your app, with just a few lines of code. The AWS Amplify UI components really give us a head start in terms of the development speed; we can save a lot of man-hours in perfecting the sign-up and login flow. Since we have now added an authentication component to our app, in the next chapter, we will be going through how to implement user management with the Amplify authentication backend, which is AWS Cognito.