You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 14, 2025. It is now read-only.
# Module 2: User Authentication and Registration with Amazon Cognito User Pools
2
2
3
-
In this module you'll create an Amazon Cognito user pool to manage your users' accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site.
4
-
5
-
If you want to skip ahead to the next module, you can launch one of these AWS CloudFormation templates in the Region of your choice in order to build the necessary resources automatically.
6
-
7
-
Region| Launch
8
-
------|-----
9
-
US East (N. Virginia) | [](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-us-east-1/WebApplication/2_UserManagement/user-management.yaml)
10
-
US East (Ohio) | [](https://console.aws.amazon.com/cloudformation/home?region=us-east-2#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-us-east-2/WebApplication/2_UserManagement/user-management.yaml)
11
-
US West (Oregon) | [](https://console.aws.amazon.com/cloudformation/home?region=us-west-2#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-us-west-2/WebApplication/2_UserManagement/user-management.yaml)
12
-
EU (Frankfurt) | [](https://console.aws.amazon.com/cloudformation/home?region=eu-central-1#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-eu-central-1/WebApplication/2_UserManagement/user-management.yaml)
13
-
EU (Ireland) | [](https://console.aws.amazon.com/cloudformation/home?region=eu-west-1#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-eu-west-1/WebApplication/2_UserManagement/user-management.yaml)
14
-
EU (London) | [](https://console.aws.amazon.com/cloudformation/home?region=eu-west-2#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-eu-west-2/WebApplication/2_UserManagement/user-management.yaml)
15
-
Asia Pacific (Tokyo) | [](https://console.aws.amazon.com/cloudformation/home?region=ap-northeast-1#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-ap-northeast-1/WebApplication/2_UserManagement/user-management.yaml)
16
-
Asia Pacific (Seoul) | [](https://console.aws.amazon.com/cloudformation/home?region=ap-northeast-2#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-ap-northeast-2/WebApplication/2_UserManagement/user-management.yaml)
17
-
Asia Pacific (Sydney) | [](https://console.aws.amazon.com/cloudformation/home?region=ap-southeast-2#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-ap-southeast-2/WebApplication/2_UserManagement/user-management.yaml)
18
-
Asia Pacific (Mumbai) | [](https://console.aws.amazon.com/cloudformation/home?region=ap-south-1#/stacks/new?stackName=wildrydes-webapp-2&templateURL=https://s3.amazonaws.com/wildrydes-ap-south-1/WebApplication/2_UserManagement/user-management.yaml)
19
-
20
-
<details>
21
-
<summary><strong>CloudFormation Launch Instructions (expand for details)</strong></summary><p>
22
-
23
-
1. Choose the **Launch Stack** link above for the region of your choice.
24
-
25
-
1. Choose **Next** on the Select Template page.
26
-
27
-
1. Provide the name of your website bucket from module 1 for the **Website Bucket Name** (e.g. `wildrydes-yourname`) and choose **Next**.
28
-
29
-
**Note:** You must specify the same bucket name you used in the previous module. If you provide a bucket name that does not exist or that you do not have write access to, the CloudFormation stack will fail during creation.
1. On the Options page, leave all the defaults and choose **Next**.
34
-
35
-
1. On the Review page, check the box to acknowledge that CloudFormation will create IAM resources and choose **Create**.
36
-
37
-
38
-
This template uses custom resources to create an Amazon Cognito user pool and client as well as generate a configuration file with the details needed to connect to this user pool and upload it to your website bucket. The template will create a role that provides access for creating these resources and uploading the config file to your bucket.
39
-
40
-
1. Wait for the `wildrydes-webapp-2` stack to reach a status of `CREATE_COMPLETE`.
41
-
42
-
1. Follow the steps outlined in the [Implementation Verification](#implementation-verification) section to confirm you are ready to move on to the next module.
43
-
44
-
</p></details>
3
+
In this module you'll create an [Amazon Cognito][cognito] user pool to manage your users' accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site.
45
4
46
5
## Architecture Overview
47
6
@@ -55,75 +14,49 @@ After users have a confirmed account (either using the email verification proces
55
14
56
15
## Implementation Instructions
57
16
58
-
Each of the following sections provides an implementation overview and detailed, step-by-step instructions. The overview should provide enough context for you to complete the implementation if you're already familiar with the AWS Management Console or you want to explore the services yourself without following a walkthrough.
17
+
:heavy_exclamation_mark: Ensure you've completed the [Static Web hosting][static-web-hosting] step before beginning
18
+
the workshop.
59
19
60
-
If you're using the latest version of the Chrome, Firefox, or Safari web browsers the step-by-step instructions won't be visible until you expand the section.
20
+
Each of the following sections provides an implementation overview and detailed, step-by-step instructions. The overview should provide enough context for you to complete the implementation if you're already familiar with the AWS Management Console or you want to explore the services yourself without following a walkthrough.
61
21
62
22
### 1. Create an Amazon Cognito User Pool
63
23
64
24
#### Background
65
25
66
26
Amazon Cognito provides two different mechanisms for authenticating users. You can use Cognito User Pools to add sign-up and sign-in functionality to your application or use Cognito Identity Pools to authenticate users through social identity providers such as Facebook, Twitter, or Amazon, with SAML identity solutions, or by using your own identity system. For this module you'll use a user pool as the backend for the provided registration and sign-in pages.
67
27
68
-
#### High-Level Instructions
69
-
70
28
Use the Amazon Cognito console to create a new user pool using the default settings. Once your pool is created, note the Pool Id. You'll use this value in a later section.
71
29
72
-
<details>
73
-
<summary><strong>Step-by-step instructions (expand for details)</strong></summary><p>
74
-
75
-
1. From the AWS Console click **Services** then select **Cognito** under Security, Identity & Compliance.
30
+
**:white_check_mark: Step-by-step directions**
76
31
32
+
1. Go to the [Amazon Cognito Console][cognito-console]
77
33
1. Choose **Manage your User Pools**.
78
-
79
34
1. Choose **Create a User Pool**
80
-
81
35
1. Provide a name for your user pool such as `WildRydes`, then select **Review Defaults**
82
-
83
36
84
-
85
37
1. On the review page, click **Create pool**.
86
-
87
38
1. Note the **Pool Id** on the Pool details page of your newly created user pool.
88
39
89
-
</p></details>
90
-
91
40
### 2. Add an App Client to Your User Pool
92
41
93
42
From the Amazon Cognito console select your user pool and then select the **App clients** section. Add a new app and make sure the Generate client secret option is deselected. Client secrets aren't supported with the JavaScript SDK. If you do create an app with a generated secret, delete it and create a new one with the correct configuration.
94
43
95
-
<details>
96
-
<summary><strong>Step-by-step instructions (expand for details)</strong></summary><p>
97
-
44
+
**:white_check_mark: Step-by-step directions**
98
45
1. From the Pool Details page for your user pool, select **App clients** from the **General settings** section in the left navigation bar.
99
-
100
46
1. Choose **Add an app client**.
101
-
102
47
1. Give the app client a name such as `WildRydesWebApp`.
103
-
104
48
1.**Uncheck** the Generate client secret option. Client secrets aren't supported for use with browser-based applications.
1. Note the **App client id** for the newly created application.
111
52
112
-
</p></details>
113
-
114
-
### 3. Update the config.js File in Your Website Bucket
115
-
116
-
The [/js/config.js](../1_StaticWebHosting/website/js/config.js) file contains settings for the user pool ID, app client ID and Region. Update this file with the settings from the user pool and app you created in the previous steps and upload the file back to your bucket.
53
+
### 3. Update the config.js File in Your Website
117
54
118
-
<details>
119
-
<summary><strong>Step-by-step instructions (expand for details)</strong></summary><p>
120
-
121
-
1. Download the [config.js](../1_StaticWebHosting/website/js/config.js) file from the website directory of the first module in this repository to your local machine.
122
-
123
-
1. Open the downloaded file using the text editor of your choice.
55
+
The [/js/config.js][configjs] file contains settings for the user pool ID, app client ID and Region. Update this file with the settings from the user pool and app you created in the previous steps and commit the file back to your git repository.
124
56
57
+
**:white_check_mark: Step-by-step directions**
58
+
1. On your Cloud9 development environment open `js/config.js`
125
59
1. Update the `cognito` section with the correct values for the user pool and app you just created.
126
-
127
60
You can find the value for `userPoolId` on the Pool details page of the Amazon Cognito console after you select the user pool that you created.
128
61
129
62
@@ -143,38 +76,32 @@ The [/js/config.js](../1_StaticWebHosting/website/js/config.js) file contains se
143
76
region:'us-west-2'// e.g. us-east-2
144
77
},
145
78
api: {
146
-
invokeUrl:''// e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
79
+
invokeUrl:''// e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod,
147
80
}
148
81
};
149
82
```
150
-
151
83
1. Save the modified file making sure the filename is still `config.js`.
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
95
+
7668ed4..683e884 master -> master
96
+
```
152
97
153
-
1. Open the Amazon S3console by visiting [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/).
154
-
155
-
1. Select your Wild Rydes website bucket that you created in the previous module.
156
-
157
-
1. Browse to the `js` prefix.
158
-
159
-
1. Choose **Upload**, then **Add Files**.
160
-
161
-
1. Browse to the directory where you saved your locally modified version of the config.js file, select it, and choose **Open**.
162
-
163
-
164
-
165
-
1. Choose **Upload** on the left side of the dialog.
166
-
167
-
</p></details>
168
-
169
-
<p>
98
+
Amplify Console should pick up the changes and begin building and deploying your web application.
170
99
171
100
**Note:** Instead of having you write the browser-side code for managing the registration, verification, and sign in flows, we provide a working implementation in the assets you deployed in the first module. The [cognito-auth.js](../1_StaticWebHosting/website/js/cognito-auth.js) file contains the code that handles UI events and invokes the appropriate Amazon Cognito Identity SDKmethods. For more information about the SDK, see the [project page on GitHub](https://github.com/aws/amazon-cognito-identity-js).
172
101
173
-
</p>
174
-
175
102
## Implementation Validation
176
103
177
-
1. Visit `/register.html` under your website domain, or choose the **Giddy Up!** button on the homepage of your site.
104
+
1. Visit `register.html` under your website domain, or choose the **Giddy Up!** button on the homepage of your site.
178
105
179
106
1. Complete the registration form and choose **Let's Ryde**. You can use your own email or enter a fake email. Make sure to choose a password that contains at least one upper-case letter, a number, and a special character. Don't forget the password you entered forlater. You should see an alert that confirms that your user has been created.
180
107
@@ -196,9 +123,17 @@ The [/js/config.js](../1_StaticWebHosting/website/js/config.js) file contains se
After you have successfully logged into your web application, you can proceed to the next module, [Serverless Backend](../3_ServerlessBackend).
126
+
After you have successfully logged into your web application, you can proceed to the next module, [Serverless Backend][serverless-backend].
200
127
201
128
### Extra
202
129
203
-
* Try copying the **auth_token** you've received and paste that into an [online JWT Decoder](https://jwt.io/) to understand what this token means for your application
130
+
* Try copying the **auth_token** you've received and paste that into an [online JWT Decoder][jwt-decoder] to understand what this token means for your application
0 commit comments