Authentication Using Amazon Cognito Hosted UI for Simple React Application (Part 1)
Introduction
Authentication & Authorization is a main part of web and mobile applications. There is a clear difference between Authentication & Authorization. Authentication is the process of verifying who someone is, whereas authorization is the process of verifying what specific applications, files, and data a user has access to. So in this blog post, I will discuss the authentication of a React Js application. Authorization will explain separately. Authentication of a web application is a huge and tricky task. So there are many authentication standard protocols like OAuth, SAML etc. Implementation wise such a standard protocol in our application is a very time consuming and tricky task. So nowadays most web applications use amazon cognito for authentication and authorization.
What is Amazon Cognito?
Amazon cognito ensures authentication, authorization and user management for our web and mobile applications. Amazon cognito has been implemented using authentication & authorization standard protocols. So Cognito absorbs our time consuming authentication and authorization task and It provides a very secure authentication and authorization mechanism to our applications.
How to Implement Amazon Cognito Hosted UI?
- Go to Amazon Cognito Console. If prompted, enter your AWS credentials.
- Choose Manage User Pools.
3. Select Create a user pool. (or choose the existing user pool if you have already created a user pool.)
4. Enter the name for your user pool and select Step through settings. If you prefer default settings select Review defaults.
5. For simplicity use username as sign in option and others kept default. Then select next.
6. For simplicity, keep default for password policies, MFA and verification, Message customization, Tags, Devices, App clients, Triggers and Review. Finally select the Create pool.
7. Select App clients under the General settings tab and choose Add an app client.
8. Give a name for the app client and create an app client. (What are Refresh token, Access token, ID token? Don’t worry explain little while)
9. Choose the App client setting under the App integration tab. Tick cognito user pool as identity provider.
10. Add callback URL. A callback URL indicated where the user will be redirected after a successful sign-in.
11. For simplicity select Authorization code grant as Allowed OAuth Flow. (What are Authorization code grant, Implicit grant, client credentials? Don’t worry, explain a little while)And choose Save Changes.
12. Select Domain name under App integration tab and add your domain.
Take a deep breath :).
Implementation of the cognito user pool is finished. Let’s resolve the blockers which we faced early.
What are Access token, Refresh token, ID token?
- Access token - Access token used in token-based authentication to gain access to resources by using them as bearer tokens.
- Refresh token - Refresh token is a long-lived special kind of token used to obtain a renewed access token.
- ID token - ID token carries identity information encoded in the token itself.
What are Authentication code grant, Implicit grant, client credentials?
- Authorization code grant
Authorization code is a temporary code that the client will exchange for an access token. The code itself is obtained from the authorization server where the user gets a chance to see what information the client is requesting, and approve or deny the request.
Let’s understand simply using the diagram below.
- Implicit grant
The implicit grant type is a way to get an access token without an intermediate code exchange step.
Let’s understand simply using the diagram below.
- Client credentials
The client credentials grant is used when applications request an access token to access their own resources, not on behalf of a user.
Nice :) Implementation of cognito hosted ui is fully completed. You can browse the url=https://<mydomain>.auth.<region>.amazoncognito.com/login?response_type=code&client_id=<client id>&redirect_uri=<callback url> and see the login page.
Conclusion
Now we have completed the implementation of the cognito user-pool and hosted ui. Let’s see how to integrate cognito hosted ui to react application and handle authentication using AWS lambda in Serverless framefork from next blog post.
Thanks for Reading!!