Create a Frontend Project

React is the frontend library I know best, so I’m going to set up a simple project with it. This project can then be “amplified” with some serverless backend services:

$ create-react-app snaplate

Add Authentication to the Project 

As Ofir Nachmani wrote in his article “Going Serverless? 8 Use Cases to Guide You,” a good reason to use serverless technology is “a faster time to market for new services.” Not having to implement your own authentication certainly helps with this.

To add a simple user authentication to this project, I have to init Amplify inside the project directory and add the auth category:

$ cd snaplate

$ amplify init

$ amplify add auth

$ amplify push

I will use all the default settings here and “dev” as my environment name.

The init command will create a deployment infrastructure in the cloud and add an amplify directory to the project that holds the Amplify-related configuration.

The add auth command will add an infrastructure configuration in the form of CloudFormation templates to the amplify directory, but it won’t deploy it yet.

Finally, the push command will deploy the new authentication service.

User authentication is handled by the Amazon Cognito service, but it requires some additional AWS resources, IAM policies, and roles to function properly. The Amplify CLI will take care of all of that.

To link this new service up with my frontend, I’ll use the Amplify SDK for JavaScript and the UI component library that Amplify offers for React. They can be installed with NPM:

$ npm i @aws-amplify/core \

@aws-amplify/auth \

@aws-amplify/ui-react

Now I need to import these packages into the frontend code. I can do this by adding the first two packages to the src/index.js file, like this:

import React from "react";

import ReactDOM from "react-dom";

import { Amplify } from "@aws-amplify/core";

import "@aws-amplify/auth";

import App from "./App";

import credentials from "./aws-exports";

Amplify.configure(credentials);

ReactDOM.render(

  <React.StrictMode>

<App />

  </React.StrictMode>,

  document.getElementById("root")

);

The push command created the aws-exports.js file and contains all the configuration the frontend needs to talk with Amazon Cognito.

Before I call the configure() method, I have to import the auth package so it gets correctly configured, too. I won’t use it directly, but indirectly through the ui-react package in the next step.

Now I’ll add signup and login screens to my application in the src/App.js file:

import React from "react";

import { withAuthenticator } from "@aws-amplify/ui-react";

function App() {

  return <h1>SnapLate</h1>;

}

export default withAuthenticator(App);

After that, I can start the application:

$ npm start

Three CLI commands and three NPM packages was all it took to add Amplify to a frontend project and configure user authentication to validate passwords, which, by the way, have to be at least eight characters long. It will also send activation emails with codes after signup. And all of these authentication-related features work out of the box.