Authentication with Amplify

This week I got an opportunity to work with AWS Amplify Framework. As I am learning some basic stuff, I thought its good idea to share my friends, so I documented my learning and sharing with you 😊

The Amplify Framework uses Amazon Cognito as the main authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. In this tutorial, you’ll learn how to add authentication to your application using Amazon Cognito and username/password login.

The AWS Amplify Authentication modules provide Authentication APIs and building blocks for developers who want to create apps with real-world production-ready user authentication. With Amplify you can incorporate username / password-based authentication as well as OAuth with Facebook, Google or Amazon. But here in this article we will concentrate on username / password-based authentication.

I also hosted demo UI that provides a full OAuth + username / password flow to S3 bucket as a static website, so you can play with as a demo.

Installing the Amplify CLI

To build authentication into your application with Amplify, you first need to install the AWS Amplify CLI. The Amplify CLI is a command line tool that allows you to create & deploy various AWS services.

To install the CLI, we'll run the following command:

npm install -g @aws-amplify/cli

Next, we'll configure the CLI with a user from our AWS account:amplify configure

amplify configure

Creating the React project & install the Amplify Library

Next, we'll create the React application we'll be working with:

npx create-react-app react-amplify-demo


cd react-amplilfy-demo

npm install aws-amplify

Creating the Amplify project

Now we can initialize a new Amplify project from within the root of our React application:

amplify init

Creating & configuring the authentication service

Now that our Amplify project has been initialized, now we can add the authentication service. To do so, we can run the following command:

amplify add auth

Now that the authentication service has successfully been configured, we can create the service by running the following command:

amplify push

Testing it out

Now, we should have our authentication service set up & ready to go. Let's test it out.

The easiest way to do this will be by using the Auth.federatedSignIn() method from the Auth class from AWS Amplify. This function will render the Hosted UI that will give users the option to sign up & sign in with Facebook, Google, or Username / Password without us having to write any of the code. But in this demo I have not used Hosted UI instead I used react material ui to render the UI. You can play with it here

To try this out, let's first configure the React application to recognize our Amplify project. We do this by adding the following code below our last import in src/index.js:

import Amplify, { Auth } from 'aws-amplify';
import config from './aws-exports';

Amplify.configure(config)

To Sign User

import Amplify, { Auth } from 'aws-amplify';  

async signIn(username, password) {
	    try {
	        const user = await Auth.signIn(username, password);
	        console.log(user);
	        this.showWelcome(user.attributes["custom:firstname"], user.attributes["custom:lastname"]);
	    } catch (error) {
	        console.log('error signing in', error);
	        alert(error.message);
	   
       }

	} 

To SignUp User

import Amplify, { Auth } from 'aws-amplify';

  async signUp(username, password, email, firstname, lastname) {
	    try {
	        const user = await Auth.signUp({
	            username,
	            password,
	            attributes: {
	                email: email,          
	                "custom:firstname": firstname,
	                "custom:lastname": lastname,


	            }
	        });
	        console.log({ user });
	    } catch (error) {
	        console.log('error signing in', error);
	        alert(error.message);
	    }

	}

In above code I have used custom:firstname and custom:lastname as additional attributes to my user pool schema.

To Sign Out User

  async logoutuserClick(event) {
	    try {
	        await Auth.signOut();
	        this.showLogin();
	    } catch (error) {
	        console.log('error signing out: ', error);
	        alert(error.message);
	    }

	}

You can find entire code for this demo using below git url

Thank you so much for your interest