Implementation

• Create an Amazon Cognito User Pool and Integrate an App to 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.
  

  a. In the AWS Console, enter Cognito in the search bar and select Cognito from the search results. 
  b. Choose Create user pool.
  c. 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 in the Authentication providers section. Choose Next.
  d. 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.
  e. On the Configure sign-up experience page, keep everything as default. Choose Next.
  f. 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 these instructions from the Amazon SES Developer Guide.
  g. On the Integrate your app page, provide a name for your user pool such as WildRydes. Under Initial app client, give the app client a name such as WildRydesWebApp and keep other settings as default.
  h. On the Review and create page, choose Create user pool.
  i. Note the Pool ID and the App client ID on the Pool details page of your newly created user pool.

• Update the Website Config

  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

  a. From your local machine, open `wildryde-site/js/config.js` in a text editor of your choice.
  
  b. Update the cognito section with the correct values for the user pool and app you just created.

  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.

  You can find the value for userPoolClientId by selecting App clients from the left navigation bar. Use the value from the App client id field for the app you created in the previous section.

  The value for region should be the AWS Region code where you created your user pool. E.g. 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 Pool details page. The Region code is the part of the ARN immediately after arn:aws:cognito-idp:.
  

  The updated config.js file should look like this. 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

  d. Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

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

  Code snippet copied

  Copy
• Validate your implementation

  a. Visit /register.html under your website domain, or choose the Giddy Up! button on the homepage of your site.
  
  b. 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.
  
  c. Confirm your new user using one of the two following methods.
  
  d. 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.
  
  e. If you used a dummy email address, you must confirm the user manually through the Cognito console.
  
  f. From the AWS console, click Services then select Cognito under Security, Identity & Compliance.
  
  g. Choose Manage your User Pools
  
  h. Select the WildRydes user pool and click Users and groups in the left navigation bar.
  
  i. 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.
  
  j. Choose Confirm user to finalize the account creation process.
  
  k. 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.
  
  l. If successful you should be redirected to /ride.html. You should see a notification that the API is not configured.