Update with Improved Session Handling

[jayair]

We just rolled out a new version of the tutorial with a few minor updates (details below). If you are looking for the older version of the tutorial, we have a hosted version here.

Updates

• Serverless API

  • Setting email as a username in Cognito User Pool

• React Client

  • Fixed logout not clearing session
  • Removed need to store the user token
  • Fixed session expires if app not refreshed
  • Removed extra withRouter imports
  • Formatted code snippets

Email as a username

Previously, we were manually setting using the email as a user’s username. There is one major issue with this; the username cannot be changed in your Cognito User Pool. AWS fixed this by adding the option of using the email as the username while logging in and signing up. Internally, the User Pool uses an auto-generated value as the real username. This means that we won’t need to do any extra work to allow users to login with their email. Of course, you can skip this option entirely if you are not planning on allowing users to login with their email.

Auth/Session flow changes

The previous setup had a couple bugs that a few folks had noticed. If the app is not refreshed for over an hour the session would expire and we would get an ugly error if we tried to carry out any action. This was because we were only generating the user token when we refreshed the page (or when the App component loaded). A better flow here would be to ensure that the session is valid both at load time and when we are about to make a request to AWS (our API or any other resources). This also means that we don’t need to store the user token explicitly in our App state since we are going to get it every time we make a request. We also made it so that we get the user token and the AWS temporary credentials at the same time. This is more inline with what the Cognito JS SDK docs suggest as well.

We also had an issue where logging out was not clearing the AWS temporary credentials completely. This was happening because we were deleting the credentials object in the AWS JS SDK but we need to set them to an empty value so that the browser LocalStorage can be reset as well. You can see the exact steps here.

---

While these changes aren’t very significant, the flow has changed. And as a result if you were working through the frontend portion of the tutorial, you might run into a few issues. To help you with this we have hosted past version in case you need them for reference. You can view all the different updates here.

[bharloe]

Would it be possible to get some sort of list of which specific pages in the tutorial (Or files in the app) were changed with 1.1 so that we can go back and implement the changes ourselves? I would prefer to manually make the specific edits to my current project rather than importing the new version, because that way I will not be blindly running code that I don't understand. This would also be nice for users who have used this stack as a starting point for a project.

I'm also a bit confused because this page says the API was changed to set email is a username in cognito, however under your releases page it says the API was unchanged in version 1.1:
https://github.com/AnomalyInnovations/serverless-stack-com/releases

[jayair]

@bharloe The versions are tagged in the repo, so you can do a diff between the versions (v1.0...v1.1). The only tricky thing about this is that I made quite a few cosmetics style changes to the code samples, so a lot of files have changed.

The API code base itself has not changed, but the way we set up the User Pool has. Specifically, the first few steps where we set the email as username attribute - https://serverless-stack.com/chapters/create-a-cognito-user-pool.html. And since our API itself does not deal with the user accounts directly, the only affected portion is the frontend.

[lestephane]

Can somebody speak as to why this issue is still in the open state? I'm totally confused, the guide is at v7.2 by now...

I landed here from the guide's changelog entry v2.0: AWS Amplify update when looking for certificate, because it mentioned DNS validation. But no sign of DNS validation here either. As I said, confused.