Click Create user.

You will get an Access key and a secret key. Copy them and keep them safe. Open the same terminal window as earlier. It will now prompt you to enter these keys each, once you press enter.

For Profile Name, enter the project name ( or the user name we entered earlier) to keep things simple for now. You will get a success message once the new user is created. The configuration part of the AWS amplify user is complete.

Create a React Project

Traverse inside the Crowdbotics project directory that you cloned. Now, let us build a new React app from scratch using its CLI tool create-react-app .

Initializing AWS Amplify

Let us now initialize the current state of React app to make it work with AWS Amplify toolchain. The first is to run the below command.

This command will you ask another set of questions in order to setup amplify SDK in your project. In the below screen you will find these questions and the answers you need to select. Most of them are default as prompted by the CLI tool.

After that, you will be prompted with a question on whether to use an AWS profile or not. You have to choose Yes and then for the next question, choose the user name that you created in the previous steps when configuring amplify.

After a few moments, a special directory appears inside the noteapp/ called amplify . This contains configuration files required in order to work both on the local machine and aws cloud.

Yes, any changes you make to an amplify project are first done locally inside your project and then, with a push command, can be permanently implemented on the aws cloud.

Also, a new file is created by the amplify CLI tool inside the src directory called aws-exports.js . You will be using this file later when building the app.

Setting Amplify User Authentication

The general idea of the React application that we are going to build in this tutorial is that it is going to be a Note taking web app. This app will have an API that performs CRUD ( Create, Read, Update, Delete) operations and persists these operations to the database.

Amplify makes this process easier than the traditional procedure of building a web app with a custom backend. It gives you the superpower to generate an entire API and set up an authentication system with just a few commands. To get started with the current section, run the below command.

The above command, amplify add is the way to add any resource ( or AWS category) at any time during the process of building your app. The last term in the above command api is the name of the resource or the service that you are going to use. The command line interface will now ask you a set of questions to follow along.

The first prompt by amplify command is to choose how you want to write your API. Amplify supports APIs written in both GraphQL and RESTful. In our case, choose GraphQL. The GraphQL API service provided by Amplify is also known as AWS AppSync. AppSync features both real-time data interactions with the NoSQL database and offline support.

Next step is to provide an API name. Right now, it is recommended to go by the default name. Just press the enter key. Why is this step necessary to provide an API name? Imagine, if you an app that utilizes more than one API. Then, it is a good scenario to provide your own naming for different APIs.

The above step allows you to set up user authentication and authorization in your React app using Amplify toolchain. Amplify has its own user auth modules, and as they are described above. The first one, API Key is not so much of a pragmatic approach if your app contains sensitive data and needs to manage different users. This option is valid only if you are looking for prototyping a quick app or your web app does not support the concept of having authorized app users.

The second option which we are going to choose in this case is Cognito User Pool . This is a more pragmatic option. If you are building a web app, you are probably going to use it in order to manage app users. This option not only supports user authentication but has support for role-based user authentication, is secured and works with GraphQL APIs ( AppSync).

This option, choose default authentication and security configuration. Another option to look out for is Manual configuration about which you can read more at the official amplify docs.

In the above field, choose Username .

Amplify’s command line interface is so interactive and in detail these days that it prompts you to provide input fields and select them from your terminal. Right now, we only need to choose Email but feel free to play around with other options. The user authentication setup is complete for now. The CLI will continue to ask you questions but they are going to be related to the GraphQL API.

Enable GraphQL API

Amplify comes with pre-defined schemas that can be changed later. Choose no for the first question and yes for creating a GraphQL schema.

The app is going to be simple in terms of database and its properties. Select single object with fields . Next, it will ask to edit the GraphQL Schema. Say yes to that! This will open up a new file called schema.graphql which already contains a schema of type Todo with fields. This step also creates a new folder inside amplify/backend/api/ that further contains the metadata information related to GraphQL API and user auth.

Note that, these files are only available in the local environment and the changes made inside them are not yet published in the aws cloud. More on this later.

A type in GraphQL is a piece of information or data stored in the database. Each type can have different fields. For example, in the above schema for Todo model, it has three fields: id , name and description . You can think of this model as a JavaScript object and fields as properties to that JavaScript object. Let us modify this existing model created by amplify to our own needs.

Every type in the database generates a unique identity to each piece of information to identify and persist in CRUD operations. The id in our case is generated by Amplify and have a value of a built-in type of ID which is also known as scalar type. Similarly, the next field note is of type string. There are basic types identified by the GraphQL schema and you can read more about them here.

Did you notice that both the fields have an exclamation ! at their scalar types? This marks that any field having it is required in the database to exist and have value.

Save this file, go back to CLI and press enter. If there are no errors ( probably going to be in red), you will get a success message and the changes made are saved locally.

Publishing the API to AWS

To publish all the local changes to the aws cloud, all you have to do is run the command amplify push .

On running this command, you get a table in return with information about resources that you have used and modified or enabled. The name of these resources are described in the Category section and the custom or default name you choose is under Resource name . Next column is the type of operation, currently, it is Create . Lastly, the provider plugin column signifies that these resources are now being published to the cloud. Press Y to continue.

CLI interface now checks the schema and compiles it for any errors before publishing final changes to the cloud. In the next step, it asks you whether you want to generate code for your newly created GraphQL API? Press Y . Then choose javascript as the code generation language.

For the last prompt, just press enter. Make sure the path is default as suggested by the CLI. This last step in the above image creates a new folder inside the src directory which contains GraphQL schema, query, mutations, subscriptions as JavaScript files. React components can access these files later and use them.

Press Y to the next question as above and let maximum statement depth be the default value of 2 . It will take a few moments to update the resources on the cloud and will prompt with a success message when done.

Configure React App with Amplify

To use amplify SDK in the React app install the following dependencies via npm or yarn.

The aws-amplify allow making requests to auth and API services provided AWS. The other package aws-amplify-react is specific to React as a library and contains useful components to be used in a project.

Open up src/App.js and import the following three statements to configure Amplify library and a High Order Component called withAuthenticator that wraps around App component and adds user authentication flow in the react app.