AWS Cognito is a service that simplifies access control for your applications out of the box, saving you the hassle of building a backend and integrating it with a database. Specifically, we’ll utilize the user pool feature, which acts as a database storing user credentials such as username, email address, and password. AWS Cognito also provides a pre-built UI for login and registration, making the entire process convenient.<\/p>\n
Here are the key features of Cognito User Pools:<\/p>\n
- \n
- User Registration:<\/strong>
\n–\u00a0 Simplified user registration process with customizable sign-up pages.
\n–\u00a0 Email verification for enhanced security.<\/li>\n- Authentication Methods:<\/strong>
\nSupport for various authentication methods, including:
\n–\u00a0 Email and password.
\n–\u00a0 Social sign-ins (e.g., Google, Facebook, Amazon).
\n–\u00a0 Multi-factor authentication (MFA) for an added layer of security.<\/li>\n- Integration and Versatility:<\/strong>
\n–\u00a0 Seamless integration with web, mobile, and server-side applications.
\n–\u00a0 Versatility to support different use cases and application frameworks.<\/li>\n- Security Measures:<\/strong>
\n–\u00a0 Token-based authentication to secure communication between the application and the user pool.
\n–\u00a0 Built-in protection against common security threats.<\/li>\n- Scalability:<\/strong>
\n–\u00a0 Automatic scaling to handle a large number of users without manual intervention.
\n–\u00a0 Reliable performance even as the user base grows.<\/li>\n- Developer-Friendly Tools:<\/strong>
\n–\u00a0 AWS Cognito provides a hosted UI that developers can leverage for user authentication, reducing the effort required for UI development.<\/li>\n<\/ol>\nSteps to Create AWS Cognito User Pool<\/h2>\n
1. Log in to the AWS Management Console and search for “Cognito” using the search bar.<\/strong> Then, open the Cognito service.<\/p>\n
2. Click on the “Create User Pool” button.<\/strong> You will choose between two ways users can log in.<\/span><\/p>\n
- \n
- \n
- \n
- Standard login( default)<\/span>\n
- \n
- Users create an account with an email and password, managed by Cognito.<\/span><\/li>\n<\/ul>\n<\/li>\n
- \u00a0\u00a0Social login<\/span>\n
- \n
- Users log in with existing accounts from platforms like Facebook or Google.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
3. Since we are implementing the login with email\/username , we will be selecting the sign-in options with Username and Email.<\/strong><\/p>\n
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/Create-user-pool-User-pools-Amazon-Cognito-us-east-2-14-1.png\")
<\/p>\n4. Configure security requirements<\/strong><\/p>\n
- \n
- Configure your desired settings, such as password policies, multi-factor authentication, MFA methods, and User account recovery. For the test app, we will be choosing MFA methods Authenticator apps.\u00a0<\/span><\/li>\n
- Regarding the User account recovery option, tick the recommended option for self-service account recovery and choose the option Email. You can choose any other options too.<\/li>\n<\/ul>\n
![\"AWS](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ConfigureSecurity1.png\")
<\/p>\n![\"AWS](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ConfigureSecurity2-1.png\")
<\/p>\n5. Configure sign-up experience<\/strong><\/p>\n
- \n
- \u00a0Customize the sign-up process to suit your requirements by setting required attributes and custom attributes. These attributes will be displayed to the user on the sign-up page and stored in the Cognito user pool.<\/span><\/li>\n<\/ul>\n
![\"Configure](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ConfigureSignUp1.png\")
<\/p>\n6. Configure message delivery<\/strong><\/p>\n
- \n
- Configure message delivery by selecting the option “Send email with Cognito,” which is recommended for the test application. For production, choose the option “Send email with Amazon SES.”<\/span><\/li>\n<\/ul>\n
![\"Configure](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/ConfigureMessageDelivery.png\")
<\/p>\n7. Integrate your app<\/strong><\/p>\n
- \n
- User pool name<\/span>\n
- \n
- Provide a unique name for your User pool.<\/span><\/li>\n<\/ul>\n<\/li>\n
- Hosted authentication pages<\/span>\n
- \n
- We are using Cognito-hosted UI on our test application so we need to check the option “Use the Cognito Hosted UI”.<\/span><\/li>\n<\/ul>\n<\/li>\n
- Domain<\/span>\n
- \n
- Choose the option “Use a Cognito domain” and provide the cognito domain, I am using the random domain name test2080. You can choose as you want.<\/span><\/li>\n<\/ul>\n<\/li>\n
- Initial app client<\/span>\n
- \n
- Choose the option “Public client”\u00a0 for the App type since we are testing this in the browser.<\/span><\/li>\n
- Enter a friendly name for your app client.<\/span><\/li>\n
- Choose the option “Generate a client secret” since we will require it to authorize API requests.<\/span><\/li>\n
- Enter the callback URL as<\/span> http:\/\/localhost:3000\/logged-in<\/span><\/a>. After Cognito authenticates the user, it will redirect them to this callback URL<\/span><\/li>\n
- Click on Advanced app client settings and add the signOut URL \u00a0http:\/\/localhost:3000\/logout<\/a>. The sign-out URL is a redirect page sent by Cognito when your application signs users out. This is needed only if you want Cognito to direct signed-out users to a page other than the callback URL.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
![\"Integrate](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/Integrate-your-app.png\")
<\/p>\n![\"add](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/signout2.png\")
<\/p>\n8. Review and Create<\/strong><\/p>\n
- \n
- After reviewing your configurations on the final page, you can create your user pool by clicking “Create pool\u201d to create your user pool.<\/span><\/li>\n
- After the user pool is successfully created, you will see it listed as shown below.<\/span><\/li>\n<\/ul>\n
![\"list](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/UserPool-created.png\")
<\/p>\nNow click on the User pool name that we have just created. It will redirect us to the User Pool overview page and click on the App integration tab.<\/p>\n
![\"userPool](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/userPoolOverview1.png\")
<\/p>\nScroll to the end and click on the App client name. It will redirect us to the App Client information page.<\/p>\n
![\"App](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/appClientInfo.png\")
<\/p>\nWe will require Client Id and Client secret value to integrate cognito on our test app.<\/p>\n
Here’s the basic structure of our Node.js application:<\/span><\/p>\n
- \n
- views<\/span>\n
- \n
- \u00a0index.ejs<\/li>\n
- loggedIn.ejs<\/li>\n
- loggedOut.ejs<\/li>\n<\/ul>\n<\/li>\n
- .env<\/span><\/li>\n
- app.js<\/li>\n
- package.json<\/li>\n<\/ul>\n
.env<\/strong><\/p>\n
CLIENT_ID=<client_id>
\nCLIENT_SECRET=<client_secret>
\nCOGNITO_DOMAIN=<cognito_domain><\/p>\napp.js<\/p>\n
\nconst express = require('express');\r\n\r\nrequire('dotenv').config();\r\n\r\n\r\nconst app = express();\r\n\r\n\r\nconst port = 3000;\r\n\r\nconst clientId = process.env.CLIENT_ID;\r\n\r\nconst clientSecret = process.env.CLIENT_SECRET;\r\n\r\napp.set('view engine', 'ejs');\r\n\r\n\r\n\r\napp.get('\/', (req, res) => {\r\n\r\nres.render('index');\r\n\r\n});\r\n\r\n\r\n\r\napp.get('\/logged-in', async (req, res) => {\r\n\r\nres.render('loggedIn');\r\n\r\n});\r\n\r\n\r\n\r\napp.get('\/logout', (req, res) => {\r\n\r\nres.render('loggedOut');\r\n\r\n});\r\n\r\n\r\n\r\n\r\napp.listen(port, () => {\r\n\r\nconsole.log(`Server running at http:\/\/localhost:${port}`);\r\n\r\n});\r\n<\/pre>\nCreating the Views<\/span><\/h3>\n
index.ejs<\/strong><\/p>\n
\n<head>\r\n\r\n <title>Index Page<\/title>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n <h1>Welcome to the Index Page!<\/h1>\r\n\r\n <a href=\"<%= process.env.COGNITO_DOMAIN %>\/login?client_id=<%= process.env.CLIENT_ID %>&response_type=code&scope=email+openid+phone&redirect_uri=http:\/\/localhost:3000\/logged-in\">Register\/Login<\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/pre>\n
loggedIn.ejs<\/strong><\/p>\n
\n<html>\r\n\r\n<head>\r\n\r\n<title>LoggedIn User<\/title>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<p>You have successfully logged in.<\/p>\r\n\r\n<a\r\n\r\n href=\"<%= process.env.COGNITO_DOMAIN %>\/logout?client_id=<%= process.env.CLIENT_ID %>&logout_uri=http:\/\/localhost:3000\/logout\">Logout<\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n<\/pre>\n
loggedOut.ejs<\/strong><\/p>\n
<html>\r\n\r\n<head>\r\n\r\n<title>Logout Page<\/title>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1>Logout<\/h1>\r\n\r\n<p>You have been successfully logged out.<\/p>\r\n\r\n<a href=\"<%= process.env.COGNITO_DOMAIN %>\/login?client_id=<%= process.env.CLIENT_ID %>&response_type=code&scope=email+openid+phone&redirect_uri=http:\/\/localhost:3000\/logged-in\">Log back in<\/a>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
\nLets’s run the test app<\/p>\n
![\"index](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/indexPage.png\")
<\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection1.png\")
<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection2.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection3.png\")
![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection4.png\")
<\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection5.png\")
<\/p>\n![\"\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/redirection6.png\")
<\/p>\nLet’s verify whether the user we just created exists in the Cognito user pool.<\/span><\/p>\n
![\"User](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/03\/UserCreated.png\")
<\/p>\nThe user has just signed up for is successfully showing up in the Cognito dashboard.<\/p>\n
Conclusion<\/strong><\/h2>\n
Congratulations! We’ve successfully set up the authentication layer in your Node.js application using Amazon Cognito. Users can now log in securely through the Cognito-hosted UI, and upon successful login, they will be redirected to our specified endpoint. This is just the beginning of securing your application; feel free to explore more advanced features and configurations offered by Amazon Cognito based on your application’s requirements.<\/span><\/p>\n
<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"Traditionally, building user authentication from scratch can be time-consuming and complex. This is where Amazon Cognito comes in, offering a hassle-free solution to manage user registration, login, and authorization in your apps. In this tutorial, we’ll explore the powerful capabilities of AWS Cognito to create a robust authentication or login system for your applications. Additionally, […]<\/p>\n","protected":false},"author":1739,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":278},"categories":[1174,1185],"tags":[248,5694,5704],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60670"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1739"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=60670"}],"version-history":[{"count":31,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60670\/revisions"}],"predecessor-version":[{"id":61002,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/60670\/revisions\/61002"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=60670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=60670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=60670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- After the user pool is successfully created, you will see it listed as shown below.<\/span><\/li>\n<\/ul>\n
- Enter a friendly name for your app client.<\/span><\/li>\n
- Initial app client<\/span>\n
- Domain<\/span>\n
- Hosted authentication pages<\/span>\n
- Provide a unique name for your User pool.<\/span><\/li>\n<\/ul>\n<\/li>\n
- User pool name<\/span>\n
- Configure message delivery by selecting the option “Send email with Cognito,” which is recommended for the test application. For production, choose the option “Send email with Amazon SES.”<\/span><\/li>\n<\/ul>\n
- Regarding the User account recovery option, tick the recommended option for self-service account recovery and choose the option Email. You can choose any other options too.<\/li>\n<\/ul>\n
- Configure your desired settings, such as password policies, multi-factor authentication, MFA methods, and User account recovery. For the test app, we will be choosing MFA methods Authenticator apps.\u00a0<\/span><\/li>\n
- \u00a0\u00a0Social login<\/span>\n
- Users create an account with an email and password, managed by Cognito.<\/span><\/li>\n<\/ul>\n<\/li>\n
- Standard login( default)<\/span>\n
- Authentication Methods:<\/strong>