Implementation

• Create an Amazon Cognito user pool and integrate an app with your user pool

  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.
  

  1. In the Amazon Cognito console, choose Create user pool.
  2. On the Configure sign-in experience page, in the Cognito user pool sign-in options section, select User name. Keep the defaults for the other settings, such as Provider types and do not make any User name requirements selections. Choose Next.
  3. On the Configure security requirements page, keep the Password policy mode as Cognito defaults. You can choose to configure multi-factor authentication (MFA) or choose No MFA and keep other configurations as default. Choose Next.
  4. On the Configure sign-up experience page, keep everything as default. Choose Next.
  5. On the Configure message delivery page, for Email provider, confirm that Send email with Amazon SES - Recommended is selected. In the FROM email address field, select an email address that you have verified with Amazon SES, following the instructions in Verifying an email address identity in the Amazon Simple Email Service Developer Guide.
     Note: If you don't see the verified email address populating in the dropdown, ensure that you have created a verified email address in the same Region you selected at the beginning of the tutorial. 
  6.  On the Integrate your app page, name your user pool: WildRydes. Under Initial app client, name the app client: WildRydesWebApp and keep the other settings as default.
  7. On the Review and create page, choose Create user pool.
  8. On the User pools page, select the User pool name to view detailed information about the user pool you created. Copy the User Pool ID in the User pool overview section and save it in a secure location on your local machine. 
  9. Select the App Integration tab and copy and save the Client ID in the App clients and analytics section of your newly created user pool.
• Update the website config file

  The 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.

  1. From your local machine, open the wildryde-site/js/config.js file in a text editor of your choice.
  2. Update the cognito section of the file with the correct values for the User pool ID and App Client ID you saved in Steps 8 and 9 in the previous section. The userPoolID is the User pool ID from the User pool overview section, and the userPoolClientID is the App Client ID from the App Integration > App clients and analytics section of Amazon Cognito. 
  3. The value for region should be the AWS Region code where you created your user pool. For example, us-east-1 for the N. Virginia Region, or us-west-2 for the Oregon Region. If you're not sure which code to use, you can look at the Pool ARN value on the User pool overview. The Region code is the part of the ARN immediately after arn:aws:cognito-idp:.

  The updated config.js file should look like the following code. Note that the actual values for your file will be different:
  

  window._config = {
      cognito: {
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
          region: 'us-west-2' // e.g. us-east-2
      },
      api: {
          invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
      }
  };

  Code snippet copied

  Copy

      4. Save the modified file.

      5. In your terminal window, add, commit, and push the file to your Git repository to have it automatically deploy to Amplify Console.

  The following code block is an example of what you will see in your terminal window:

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  Copy
• Validate your implementation
  1. In a Finder window or Windows File Explorer, navigate to the wildrydes-site folder you copied to your local machine in Module 1. 
  2. Open /register.html, or choose the Giddy Up! button on the homepage (index.html page) of your site.
  3. 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 for later. You should see an alert that confirms that your user has been created.
  4. Confirm your new user using one of the two following methods:
     1. If you used an email address you control, you can complete the account verification process by visiting /verify.html under your website domain and entering the verification code that is emailed to you. Please note, the verification email may end up in your spam folder. For real deployments we recommend configuring your user pool to use Amazon Simple Email Service to send emails from a domain you own.
     2. If you used a dummy email address, you must confirm the user manually through the Cognito console.
        1. In the Amazon Cognito console, select the WildRydes user pool.
        2. In the Users tab, you should see a user corresponding to the email address that you submitted through the registration page. Choose that username to view the user detail page.
        3. In the Actions dropdown, select Confirm account to finalize the account creation process.
        4. In the Confirm account for user pop-up, choose Confirm.
  5. After confirming the new user using either the /verify.html page or the Cognito console, visit /signin.html and log in using the email address and password you entered during the registration step.
  6. If successful you should be redirected to /ride.html. You should see a notification that the API is not configured.
     Important: Copy and save the auth token in order to create the Amazon Cognito user pool authorizer in the next module.