Setting Up the Back End

Now that we have a simple React app, let’s let users sign up and sign in to our app. They won’t be able to do anything yet, but it will be helpful to have this in place so that when we add in the ability to query our backend API, we’ll know which users are accessing our system.

The AWS Amplify CLI makes it easy for us to add cloud capabilities to our web and mobile apps, with SDKs available for React and React Native, iOS, and Android. To get started, we’ll create a new application and enable user authentication. We’ll then wire things up in our app using the open-source AWS Amplify JavaScript library, which the AWS Amplify CLI will take care of configuring for us; all we have to do is use it in our React app. AWS Amplify contains some nice abstractions for working with cloud services, and it has some helpful React components we’ll use in our app.

Here’s what the sign-in screen will look like: Here's what the sign-in screen looks like

Initializing Amplify

➡️ On the command line, in the photoalbums directory:

  1. Be sure to be in photoalbums directory cd photoalbums

  2. Run amplify init

  3. Press Enter to accept the default project name ‘photoalbums’

  4. Enter ‘master’ for the environment name

  5. Select ‘None’ for the default editor (we’re using Cloud9)

  6. Choose JavaScript and React when prompted

  7. Accept the default values for paths and build commands

  8. Select the default profile when prompted

amplify init

This will create a new local configuration for us which we can use to set up an Amazon Cognito User Pool to act as the backend for letting users sign up and sign in. (More about Amazon Cognito and what a User Pool is below.) If you want to read more about this step, take a look at the ‘Installation and Configuration’ steps from the AWS Amplify Authentication guide.

Adding authentication

  1. ➡️ Run amplify add auth to add authentication to the app

  2. ➡️ Select Default Configuration when asked if you’d like to use the default authentication and security configuration

  3. ➡️ Select Username when asked how you want users to sign in

  4. ➡️ Select “No, I am done.” when asked about advanced settings.

  5. ➡️ Run amplify push to create these changes in the cloud

  6. ➡️ Confirm you want Amplify to make changes in the cloud for you.

  7. Wait for the provisioning to complete. This will take a few minutes.

The Amplify CLI will take care of provisioning the appropriate cloud resources and it will update src/aws-exports.js with all of the configuration data we need to be able to use the cloud resources in our app.

Congratulations! You’ve just created a serverless backend for user registration and authorization capable of scaling to millions of users with Amazon Cognito.

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. We just made a User Pool, which is a secure user directory that will let our users sign in with the username and password pair they create during registration. Amazon Cognito (and the Amplify CLI) also supports configuring sign-in with social identity providers, such as Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0. If you’d like to learn more, we have a lot more information on the Amazon Cognito Developer Resources page as well as the AWS Amplify Authentication documentation.