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:
• AWS: Serverless web ap...
My first video where I explain how to configure AWS:
• AWS: Creating a Step F...
AWS Javascript API files:
github.com/amazon-archives/am...
github.com/amazon-archives/am...
Javascript Examples for DynamoDB:
docs.aws.amazon.com/amazondyn...
-----
Javascript:
var idToken = null;
function checkLogin() {
var url_string = window.location.href;
var url = new URL(url_string);
idToken = url.searchParams.get("id_token");
if (idToken != null) {
document.getElementById("welcomeMsg").innerHTML = "signed in";
auth();
}
}
function auth() {
AWS.config.update({
region: "us-east-2",
// endpoint: 'localhost:8000', // If you use dynamoDB installed locally
// accessKeyId: "(ACCESS_KEY_ID)",
// secretAccessKey: "(SECRET_ACCESS_KEY)"
});
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId : '(IDENTITY POOL ID)',
Logins : {
"cognito-idp.(AWS_REGION).amazonaws.com/(POOL_ID)": idToken
}
});
}
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
}
}
};
docClient.put(params, function(err, data) {
if (err) {
document.getElementById('textarea').innerHTML = "Unable to add item: " + "
" + JSON.stringify(err, undefined, 2);
} else {
document.getElementById('textarea').innerHTML = "PutItem succeeded: " + "
" + JSON.stringify(data, undefined, 2);
}
});
}
function readItem() {
var docClient = new AWS.DynamoDB.DocumentClient();
var params = {
TableName: "Person",
Key:{
"FirstName": "John",// Partition Key
"LastName": "Smith" // Sort/Range Key
}
};
docClient.get(params, function(err, data) {
if (err) {
document.getElementById('textarea').innerHTML = "Unable to read item: " + "
" + JSON.stringify(err, undefined, 2);
} else {
document.getElementById('textarea').innerHTML = "GetItem succeeded: " + "
" + JSON.stringify(data, undefined, 2);
}
});
}
-----
Javascript if you want to login internally inside your page.
Recommended video for that: • Video
function signInButton() {
var authenticationData = {
Username : document.getElementById("inputUsername").value,
Password : document.getElementById("inputPassword").value,
};
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 = {
Username : document.getElementById("inputUsername").value,
Pool : userPool,
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
console.log(JSON.stringify(result));
// var accessToken = result.getAccessToken().getJwtToken();
// console.log(accessToken);
},
onFailure: function(err) {
alert(err.message || JSON.stringify(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

[@anirbanmaji80]

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

[@hdingari]

Thanks! this is useful.

[@chewmanfoo]

thanks this is great.

[@AbsTech.]

Thanks bro!

[@bimgonzaga]

Thanks!

[@akashkalmegh3390]

Thanks

[@svenlindeboom2602]

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.

[@hubertkarl1942]

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?

[@panagiotisgiannelos3767]

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

[@abs8771]

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

[@normal8852]

hi bro, have you got the answer for this ?

[@carlosotal]

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

[@bimgonzaga]

Try the videos below, he explains how you can do the auth part with login pages:
th-cam.com/channels/ubvyvZCaLOncyGVN-pQYCg.htmlvideos

[@keymalerock]

the same doubt my friend

[@r3dkn3386]

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

[@only1devious]

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