Skip to content

Persist AWS Cognito credentials between browser page loads to be used with AWS APIGateway.

If you are like me and you have searched around the internet for solutions on how to do this, you will find many posts, confused people, and several different responses.  I ran into this myself on a side project I am working on, which uses several of the AWS Serverless “stack”.  I am using AWS Cognito User Pools as my user store for all registered uses of my application. This also acts as the authentication provider for my AWS Cognito Identity Pool.  With these to products, I am able to offer a secure and robust user registration system that also provides authentication and authorization, with only a little configuration on my part, and leveraging the AWS client side JavaScript API.

The one aspect of it all that I had the most difficulty with, due to lack of accurate documentation, was how to maintain the users credentials between page loads, since I am not building a Single Page App (SPA).  So I am going to explain this as simple as I can.  I am not going to explain how to use AWS Cognito User Pools or Identity Provider in general, as there are tons of articles on the web for this already, just google “How to use AWS Cognito in the web browser”.  I am only going to explain the this one topic of how to handle page reloads. So here it goes:

 

Once you have authenticated your user against your User Pool (if that is what you are using), and have generated your Cognito Identity credentials, all you need to is persist the following values:

How to use AWS Cognito in the web browser

window.sessionStorage.setItem(“accessKeyId”, AWS.config.credentials.accessKeyId);
window.sessionStorage.setItem(“secretAccessKey”, AWS.config.credentials.secretAccessKey);
window.sessionStorage.setItem(“sessionToken”, AWS.config.credentials.sessionToken);

I chose to use session storage, but there are a few different ways to achieve this.  Now you have the needed parameters necessary for when  your page reloads.  When that happens, and you want to be able to call your AWS API Gateway API, you do the following:

 

var apigClient;
var accessKey = window.sessionStorage .getItem(“accessKeyId”);
var secretkey = window.sessionStorage .getItem(“secretAccessKey”);
var sessionToken = window.sessionStorage.getItem(“sessionToken”);
if (accessKey != null && secretkey != null && sessionToken != null) { //user already authenticated and we have their credential info
apigClient = apigClientFactory.newClient({
apiKey: ‘If you are using an api key put it here’,
accessKey: accessKey,
secretKey: secretkey,
sessionToken: sessionToken
});

//you could also have addition error handling / logic checking above
} else { // unauthenticated user — anonymous
apigClient = apigClientFactory.newClient({
apiKey: ‘If you are using an api key put it here’,
accessKey: ‘XXXXXXXXXXXXXXXXX’,
secretKey: ‘XXXXXXXXXXXXXXXX’
});
}

 

Now you can call your api as normal, which I won’t get into since this is off topic, and if you are reading this article you should already be familiar with all of that.

I will add more to this article shortly about refreshing the credentials and handling expiration, but I’m out of time for now.

Written for ServerlessArchitecture.com
Written by Jeff Mangan

 

2 thoughts on “Persist AWS Cognito credentials between browser page loads to be used with AWS APIGateway.

  1. roleee3 says:

    Hi,

    I am facing with the very same problem but this solution somehow does not work for me: After the authentication, i can call successfully the Gateway API on the same page. When I save the above mentioned variables and re-create the apigclient on another page, I receive HTTP 403 when I call the same endpoint of the Gateway API.
    Does this solution still work for you? Can you provide me the code to see where the differences are? Do you have any idea why it does not want to work for me?

    • Jeff Mangan says:

      Are you talking about trying to rehydrate the session on a different page load? If so, that’s now covered on this page. If you still have not figured it out, let me know and ill show you, otherwise I’ll add a new blog page about this soon.

Leave a Reply