How to parse JWT Token after user Sign In AWS Cognito - amazon-web-services

Question

I already deploy a static web site use AWS S3 and use AWS cognito to handle User Sign in.
The web Site is https://www.tianboqing.com
The HTML page have a Button,When user Click the button,the url will redirect to cognito sign in url.
'https://tianboqing.auth.us-east-1.amazoncognito.com/login?
client_id=4fgb77l991egfiubejfqep3e6e&response_type=token&scope=aws.cognito.signin.user.admin&redirect_uri=https://www.tianboqing.com';
const handleClick = (event) => {
window.location.href =
'https://tianboqing.auth.us-east-1.amazoncognito.com/login?...
};
document.querySelector('button').addEventListener('click', handleClick);
When User sign In,The Cognito will return a new url like this:
https://www.tianboqing.com/#access_token=eyJraWQiOiJrNFdXeWpRZXZiSlwvN3JNRUlVMzFHS0p4YmtBZHpXMExwN0xMT0tiS1BHRT0iLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiI2ZmNiNTZhOS1kNDhmLTQyYzItYWUyMi1hMzk0NTllNzc5ZDIiLCJ0b2tlbl91c2UiOiJhY2Nlc3MiLCJzY29wZSI6ImF3cy5jb2duaXRvLnNpZ25pbi51c2VyLmFkbWluIiwiYXV0aF90aW1lIjoxNjM1MzAyMDIxLCJpc3MiOiJodHRwczpcL1wvY29nbml0by1pZHAudXMtZWFzdC0xLmFtYXpvbmF3cy5jb21cL3VzLWVhc3QtMV9Zcm9BY0h5R20iLCJleHAiOjE2MzUzMDU2MjEsImlhdCI6MTYzNTMwMjAyMSwidmVyc2lvbiI6MiwianRpIjoiM2EyMjg0YjItNGM2MS00ZDcyLTk4NGYtNzIzNTExMDc3YmZlIiwiY2xpZW50X2lkIjoiNGZnYjc3bDk5MWVnZml1YmVqZnFlcDNlNmUiLCJ1c2VybmFtZSI6IjZmY2I1NmE5LWQ0OGYtNDJjMi1hZTIyLWEzOTQ1OWU3NzlkMiJ9.xKToMEhhSCqSy9ip0ikmdezY9XRz0GIlIdESSThEuLabWL4rFTw1XRQi4Z9OeDLZcmHyemZt0A1o1OvqZLFyrEHLmRAoyg5SIGD2Ic6tExS1PAmmX8Fe3uF7f851DtKMeapxsaNYyaLE3v-_vkJkDwRvUNoz8nOMUCYB3JKJxGPBlMz1yfn-3CXejepKLYeYYDOUaCPmyErfCy84_eQ-ZoEZFd3bH4vZXDNJKFj6W5_C4IZHuIAJveep3dYVq9cLWy3m8BWOAKWVxk6jTt1w0xI5og5jJiEIPn8Ok10WL1s4eEzAN04AYj6e05uzw4Ka_ip4y7VCdnndnTuWAx_5wQ&expires_in=3600&token_type=Bearer
Which contain the access_token to parse.
My question is,How the code can know the new url which contain access_token is return.
Do I need front route or async await or something?
const handleClick = (event) => {
window.location.href =
'https://tianboqing.auth.us-east-1.amazoncognito.com/login?client_id=...';
};
How to get the user token so I can use it to post to dynamodb?

Answer 1

I will suggest to use API Gateway, where you can add Cognito Authorizer for each and every API you deploy to interact with DynamoDB.
Here is the official documentation you can go through to setup your API-Gateway with Cognito, that you want to use to save records in DynamoDB.
You can grab that access token from the Cognito return page and save it as Session Storage in the front-end using JavaScript.
window.sessionStorage.setItem("accessToken", YourAccessToken);
Use the above stored accessToken as Authorization Header when you call that API via AJAX.
var tok = window.sessionStorage.getItem("accessToken")
var xhr = new XMLHttpRequest();
xhr.open("POST", "URL");
xhr.setRequestHeader("Authorization", tok);
xhr.send();
Instead of url forwarding, you can use AWS-Cognito javascript SDK and use Javascript (via AJAX) to authorize a user.
var cognitoUser = new AmazonCognitoIdentity.CognitoUser({
Username: username,
Pool: userPool
});
var authenticationData = new AmazonCognitoIdentity.AuthenticationDetails({
Username: username,
Password: password
});
cognitoUser.authenticateUser(authenticationData, {
onSuccess: function (result) {
// your code here on success
},
onFailure: function (err) {
// your code here if error occurs
}
});