In this tutorial we will setup our Frontend and implement AWS Cognito into it.

Thankfully AWS has made it lot easier by creating a package named aws-amplify

Let's use Create React App to create new react app and then install our remaining dependencies.

Creating New React Application and Installing the Dependencies.

Install Create React App globally if not already installed and then run the command

create-react-app aws-cognito-react

Once the app is created, cd into that directiry and run the command

yarn add aws-amplify aws-amplify-react

This will install the two packages our app currently depends on.

Now lets delete few files, Open /src folder and delete all files Except index.js and registerServiceWorker.js.

Creating our App Component

Create a new file named /src/pages/Dashboard.js and place this code inside it.

import React from 'react';
import bms from '../b-m-s.jpg';

const Dashboard = (props) => {

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">User Authentication using AWS Cognito</h1>
      </header>
      <p className="App-intro">Let's implement authentication using AWS Cognito and User Pool.</p>
      <p>You should not see this page without logging in.</p>
      <div className="image">
        <a href="https://www.youtube.com/watch?v=hShYnVEmbb4" target="_blank" rel="noopener noreferrer"><img src={bms} alt="BMS"/></a>
        <p style={{ fontWeight: 700 }}>click at your own risk.</p>
      </div>
    </div>
  );

}

export default Dashboard;

Create new file named src/App.js and place this code inside it.

import Dashboard from './pages/Dashboard';

export default Dashboard;

Create a new file src/index.css and place this code inside it.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
 .App {
  text-align: center;
}
.App-header {
  padding: 20px;
  color: white;
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
.App-title {
  font-size: 1.5em;
}
.App-intro {
  font-size: large;
}
.image {
}
.image img {
  display: block;
  max-width: 500px;
  margin: 0 auto;
}

Now if your run the app using command yarn start you will see something like the screenshot below.

It's good, But the text says You should not see this page without logging in. but we can clearly see it without logging in.

Integrating AWS Amplify

Our objective for this tutorial is to make this entire application restricted/secure, Users shouldn't be able to see or do anything without logging in.

There are multiple ways in which we can implement authentication., We can creare our own Login, Signup Components and use API to integrate it with AWS Cognito or we could use the components provided by AWS Amplify.

We will go ahead with the second option.

Replace the code of src/App.js file with this

import Amplify from 'aws-amplify';
import Dashboard from './pages/Dashboard';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure({
  Auth: {
    //REQUIRED - Amazon Cognito Identity Pool ID
    identityPoolId: '',
    // REQUIRED - Amazon Cognito Region
    region: 'us-east-1',
    //OPTIONAL - Amazon Cognito User Pool ID
    userPoolId: '',
    //OPTIONAL - Amazon Cognito Web Client ID
    userPoolWebClientId: '',
  }
});


export default withAuthenticator(Dashboard, { includeGreetings: true });

Please replace the values for identityPoolId, region, userPoolId and userPoolWebClientId., We got this values in our previous tutorial.

After replacing the values, If you run the app, you will see something like in the screenshot below.

This is exactly what we wanted, Users should not be able to see anything without logging in.

Let's click on the Sign Up button to create new account.

Please try creating your own account and then try to login with that account.

THIS WON'T WORK

Because in the previous tutorial while creating Federated Indentities, For Unauthenticated identities I left the field unchecked.

Open AWS Federated Identities and click on the Identity you created, In this case it's Salvia Federated Identities

Then in top-right click on the link Edit identity pool, This will open Edit identity pool page.

Here click on Unauthenticated identities and then check the box for Enable access to unauthenticated identities.

Click on Save Changes button in the bottom and we're done.

Now if you test the App, Everything should work as expected and you should see the Dashboard page.

If you saw the Dashboard page then you didn't follow the tutorial and you didn't mark the name field as required while creating the user pool.

In that case good for you, But for us we won't be able to sign up as We have made the name field as required.

We cannot edit our User Pool to make any field required/not required after creating it (I didn't find any links to make changes)

What can we do?

1. We can create a new user pool and make the name field not required., And then use that User Pool in our Federated Identity. (and also update userPoolId in App.js file.)
2. We can create users manually while keeping the Signup Form (in non working condition)

I am going to go ahead with Option#1, I should have researched more before writing part#1 of this tutorial.

Anyways I think Its best to create a new User Pool and use that with our already created Federated Identity.

AWS Amplify doesn't yet support addition of custom attribute fields.. But they are already working on it and it should be available soon., Until then we cannot very easily add a custom name field in user SignUp form/component.

Sorry for this Guys, But get back to the previous tutorial, Follow it exactly except uncheck name field and check Unauthenticated identities field.

Signup and Login

Now if you try to create an Account, You will receive a verification email, you must enter the code from that email to complete registration.

Once registered you can login and view the app.

You can view all the registered users in the AWS User Pool : Users and groups section.

Conclusion

Now if you test the App, Everything should work as expected and you should see the Dashboard page after logging in along with a Header containing logout link.

GitHub: https://github.com/dhruv-kumar-jha/aws-cognito-react

Live Demo: https://aws-cognito-react.firebaseapp.com/

I saw many errors during the development of this App, Most of the time due to AWS Amplify package, I love this package and am thankful for it, but most of the times you will see errors.. and to fix it you will have to use the old version of the package or wait for the issue to be fixed.

Although I have lot to write on this topic like custom Login/Signup components, Accessing the logged in user data in the app and in lambda function.. but that will have to wait until this package becomes little more stable., That could be 1 day or 1 week.

Next series will be on Building a CLI application using Node, If you have any ideas/requests for a CLI app do let me know.

Thank you for reading.