How to authenticate user in browser using AWS Cognito?

Question

I need to authenticate users in browser (not mobile app) using AWS Cognito with username/pass, not FB/google IdProviders.

There are a lot of docs but they seem to be separate blocks which either incomplete, do not fit the requirements or do not fit each others :(

I created Cognito User Pool, then Identity pool and tied the userPool to the idPool, then I stuck. Do not know which library to use and how to use it. The closest I find are:

• https://aws.amazon.com/sdk-for-browser/ but my experience is not enough to convert their FB samples to not-using FB
• https://github.com/aws/aws-amplify but using this lib I'll have to study React/Angular from the very beginning (I'm not a front-end developer, sorry) and I have no clue how to convert their npm-based samples to front-end javascript (npm is for NodeJS thus back-end, isn't it?).

All I need is plain html form with username/pass, send the request to Cognito and a way to check during the next page load whether the password was correct. If it matters I will use AWS Lambda as back-end for processing future tasks.

How can I do it? Is there a tutorial/doc for my case? Thank you.

Answer 1

You can use AWS Cognito UserPools Hosted UI for your use case. The simplest form of authentication is using the Implicit Grant.

For more information about setting up Hosted UI refer Add an App to Enable the Hosted Web UI.. This will create a UserPool where users can register them self (If you plan to restrict this, you will need to either add users using the AWS Web Console, Cognito UserPools or using their SDK)

The steps are as follows.

• Set up Cognito Hosted UI and register your application domain. This will create the login/registration pages for you where each of this will have a unique URL. What you have to do is, if the user is not authenticated (Let's discuss how to detect it later), you need to redirect the user to the Login page.
• In the Login URL, you also need to specify the redirect back URL to the application so that after a successful login, Cognito will redirect back the user to the application providing the token in a query string.
• You can then access the id_token from inside the application and use it for querying the backend.
• Since the id_token is a JWT token you can verify it at your Backend using the public key available at the Cognito token endpoint.
• To implement the JWT verification, you can also refer Cognito JWT Token validator NodeJS module.

Note: If you need to keep the user's logged in for a longer time period (Than 1 hr), you might need to use the Code Grant flow which will return a Refresh Token, which could be used to retrieve new id_tokens programmatically.