AWS: Frontend web application with Javascript, DynamoDB and Amazon Cognito

This tutorial will explain how to create a serverless and backendless javascript frontend application using DynamoDB and Cognito.

User ► HTML/JS ► Cognito / DynamoDB

Reference of my previous video for more information on AWS using a backend service and API gateway and hosting static HTML files:

My first video where I explain how to configure AWS:

AWS Javascript API files:

Javascript Examples for DynamoDB:

-----
Javascript:

var idToken = null;

function checkLogin() {
var url = new URL(url_string);
if (idToken != null) {
auth();
}
}

function auth() {
region: "us-east-2",
// accessKeyId: "(ACCESS_KEY_ID)",
// secretAccessKey: "(SECRET_ACCESS_KEY)"

});

IdentityPoolId : '(IDENTITY POOL ID)',
Logins : {
}
});
}

function insertItem() {
var docClient = new AWS.DynamoDB.DocumentClient();

var params = {
TableName :"Person",
Item:{
"FirstName": "John", // Partition Key
"LastName": "Smith", // Sort Key
"info": {
"FavoriteColor": "blue",
"YearOfBirth": 1942
}
}
};
if (err) {
} else {
}
});
}

function readItem() {

var docClient = new AWS.DynamoDB.DocumentClient();

var params = {
TableName: "Person",
Key:{
"FirstName": "John",// Partition Key
"LastName": "Smith" // Sort/Range Key
}
};
if (err) {
} else {
}
});
}

-----
Javascript if you want to login internally inside your page.

function signInButton() {

var authenticationData = {
};

var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

var poolData = {
UserPoolId : "(POOL_ID)", // Your user pool id here
ClientId : "(APP_CLIENT_ID)", // Your client id here
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

var userData = {
Pool : userPool,
};

var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

onSuccess: function (result) {
},

onFailure: function(err) {
},
});
}

-- Contents of this video --

0:00​​ Intro
1:52​​ Configure Cognito
7:40 Create DynamoDB table
8:20 Create IAM role and permission
10:52​​ More Cognito configuration
16:02 Javascript and HTML code
22:41​​ Tests and final comments

[anirbanmaji]

This is gonna help me in my own app, got this video after lot of searching. thank you.

[svenlindeboom]

I think it is still important to set the Role resulution (11:45) to DENY. Otherwise the user gets a default role and has access anyway.

[hubertkarl]

Hi
Working fine until 10:25. Then I am lost
When I display roles, I don't have the same interface, I couldn't filter by policy...
Any suggestion?

[panagiotisgiannelos]

Wait, it uses the Id token for the DynamoDB?? Not the access token?

[carlosotal]

Thank you bro awesome! Have you found a way to this with a form and not with hardcoded values?

[abs]

Hi, I have one query, suppose if I want to store the congnito user into DynamoDB with a new user table then how can I do it? How to call the trigger and get user data and insert in user table

[rdkn]

thats all fine but the website would have been useful if it had write and read from the DynamoDB :)

[onlydevious]

confusing as it it, and then aws updates the entire thing just to outdate anything we've learned thus far