User Management in React js using Cognito.
Amazon Web Service was lunched in 2002. That provides on demand cloud computing platforms and APIs to individuals and companies. Today we are going to discuss about one of a service offering by aws called Cognito.
Basically Cognito helps us to manage user authentications. We can handle user login , registration , sessions , change password and forget password.In this article we discuss how to handle user login and registration in Reactjs web application.And my sample code with full user management is available with this post.Before start the discussion you have to create a aws account.
Lets start …
- How to create a user pool.
After login to the aws console you can see Congito under the all services in Security, Identity, & Compliance category. Or you can search it highlighted area.
2.create a user pool.
after going to cognito. you will see a button call “Manage user pool “ . then you will be able to below kind of window. Then go to the “create a user pool”
follow the steps below. Click the highlighted area.
in here i m using only email to verify the user.because of that i choose only highlighted step. Then scroll down and go to next step.
Now you are in MFA and verification. I m not going to change any thing under this category. Then come to the Message customization category. Change verification type to the Link as below. then click next step.
you do not need to add tags in this stage. click next step,
then in devices category you do not need to remember the devices.click next step,
then come to App client category and add an app client.
then do following steps highlighted below after clicking the add app client ,
after creating app client you will navigate to Triggers , we are not going to deal with triggers. Click the next step .Now you can review the user pool and after checking click the create pool button below. Now u will able to see Pool Id . copy and paste it. we need them on our code.
under app clients , copy and paste the App client Id.
now we have to add a domain name. Under Domain name we can add it.
2.Lets start coding.
before start you can download my sample project for continue this.
Github stater ptoject — https://github.com/CHARITH1995/blogSampleStarter
if you new to the React js before all the steps under the root folder run the command “npm install”. Then open the project using vscode or editor what you are using. Now open the file call config.json. Then change the file like below , user pool id and app client id you have copied in previous step.
Now you have to install “aws-amplify” .For that use “npm i aws-amplify”.then open the index.js file and modify the code as mentioned below,
then open the register.js file under the component.Under the handleSubmit file implement the Auth.signUp function.In here under the attributes parameter define the optional fields. in here email. when use register a user please use a real email. In here we receive a email confirmation to confirm user.
after register the user. you can check the user in your user pool in aws. now you can see like this under the users and groups tab. But account status is UNCONFIRMED.
Now you can check your mail box. In there you will have a email to confirm email. after confirm it.This status will change to CONFIRMED.
then open the login.js file under the component folder. Under the handle submit function you have to define a try catch block for implement user login. For user login we use the Auth.signIn function.It requires two parameters call username and password.modify the login.js file as below.
Now you have finished the register and login.In this sample project , i have implement forget password , change password and logout functions as well.
Github sample app — https://github.com/CHARITH1995/sampleAppForBlog
Thank you for reading this.