Part 3 - Cognito User Pool

Congratulations on configuring API Gateway and successfully strangling out the first microservice – the UI! You are one step away from finishing this lab. Next, you will strangle out the authentication service from the monolithic application.

Click to learn more about front end UI modification (Optional reading)

The monolithic legacy application stores user login credentials in the database. Generally you should not implement your own security solutions. Wouldn’t it be nice if we could entrust the user sign up/authentication process to an AWS service? In this section we will guide you through the process of configuring Amazon Cognito.

Creating a User Pool

  1. Cognito user pools are user directories that provide sign-up and sign-in options for your app users. In the AWS Management Console, navigate to Cognito.

    AWS Console navigate Cognito

  2. Click on “Manage User Pools,” and then click on the “Create a user pool” button in the top right corner of the Cognito Console.

    Click on “Manage User Pools”

    Click on “Create a user pool”

  3. Next, you need to assign a name to our newly created user pool. Let’s name it UnishopUserPool. After inputting the name into the input box, click on “Step through settings”.

    Name the newly created pool and configure default settings

  4. The first setting is called “Attributes”. In this setting, you can set attributes you want users to provide. After making following changes, click the “Next step” button at the bottom of the page. (The button is not shown in the screenshot below.)

    • For “How do you want your end users to sign in?": Select “Email address or phone number.”

    • For “Which standard attributes do you want to require?": Select “family name” and “given name.”

    Configure attributes

  5. The next setting is called “Policies.” In this setting, you can set signup policies. Let’s make the password requirement less strict for testing purpose.

    • For “What password strength do you want to require?":
      • Minimum length: Enter 6

      • Untick “Require numbers”, “Require special character”, and “Require uppercase letters”.

    Configure policies

    Please use more password requirements in your real production. After making these changes, click the “Next step” button at the bottom of the page.

  6. The next setting is called “MFA and verifications.” In this setting, you can set up MFA and enable verification. For simplicity, you will make the following two changes. After making these changes, click the “Next step” button at the bottom of the page. (The button is not shown in the screenshot below.)

    • For “How will a user be able to recover their account?": Select “None - users will have to contact an administrator to reset their passwords”

    • For “Which attributes do you want to verify?": Select “No verification.”

    Configure MFA and verifications

    If you are interested in configuring email verification, please refer to the optional reading below.

    Click here if you want to enable email verification. (Optional reading)
  7. For “Message customizations”, “Tags”, and “Devices”, we will keep the default settings. Please select the “Next step” button at the bottom of these pages.

    The “Message customizations” page allows you to specify the details of the message you sent to users if you enable MFA.
    The “Tags” page allows you to specify some tags for this user pool so that you can identify different user pools you created more easily.
    The “Devices” page allows you to decide whether or not you want the user pool to remember user’s devices.

  8. The next setting is called “App clients.” If you want your application to connect the Cognito user pool, you must create an app client here. Please click on “Add an app client.”

    Generate app client

  9. Do the following changes. Then click the “Next step” button at the bottom of the page.

    • For “Which app clients will have access to this user pool?":
      • App client name: Enter unishop-auth-client

      • UNCHECK “Generate client secret” as you don’t need it in the authorization flow

      • Click “Create app client” button

Generate app client

  1. For “Triggers”, keep the default settings. Please select the “Next step” button at the bottom of the page.

    The “Triggers” page allows you to specify AWS Lambda functions to handle various events. If you don’t know what AWS Lambda is, please refer to the documention here.

  2. In the last page, you can review all the displayed information. Click the “Create pool” button at the bottom to create the user pool.

    If you chose to enable email verification in step 6, please remember to return to and finish step 6.4 and 6.5.

    Generate user pool

Connect the Cognito user pool and Unishop

  1. After successfully creating the pool, you will be redirected to a webpage containing information about the user pool you just created. In this page, do the following things.

    • Go to “App client” and note down “App client id” to your cheat sheet. You should paste it under “Cognito App Client Id” in your cheat sheet.

    Get app client id

    • Go to “General settings” and note down “Pool Id” to your cheat sheet. You should paste it under “Cognito Pool Id” in your cheat sheet.

    Get user pool id

  2. Update configuration file for Unishop’s frontend. In Visual Studio 2019, open config.json. If you have trouble locating the file, please refer to the Modify API config section of part 2 in this lab for detailed instructions. After openning the file, add the “App client id” and “Pool Id” to the JSON file as shown below:

    Update unishop configuration

  3. Since the above changes to config.json were made locally on your development machine, you need to upload the modified config.json file to the S3 bucket, similar to what you did in the part 2 of this lab. First, navigate into the directory where the config.json file is located:

    cd C:\Users\Administrator\AWS-workshop-assets\net-modernization\FrontEnd\src
    
  4. Now, as before, run the S3 cmdlet Write-S3Object command to write the config.json file to the S3 bucket. Replace YOUR_BUCKET_NAME value with the value of “Unishop UI S3 Bucket name” in your cheat sheet. (If you forget to copy this value to your cheat sheet, please refer to this section.)

    Write-S3Object -BucketName YOUR_BUCKET_NAME -File .\config.json -PublicReadOnly
    

    Now that the S3 bucket that hosts Unishop’s front end is properly updated, you can visit the S3 bucket static hosting endpoint and test the sign up/log in functionality implemented through Amazon Cognito.

Testing Signup/Login

  1. In your browser, enter the value of “Unishop Frontend URL in S3” in your cheat sheet to open the website. If you have opened the Unishop website, please refresh it. (If you forget to copy this value, please refer to this section.)

  2. Now, let’s create a new account in Unishop. Register with email

    If you enabled email verification in the user pool settings and you registered with a real email, just verify the email and skip the Step 3.

  3. Before you try to log in with your account, let’s confirm it in the Cognito Console. This step is only needed if you didn’t enable email verification for your user pool or you provided a fake email in the Step 2.

    3.1. In the AWS Management Console, navigate to the Cognito console and click the “Manage User Pools” button.

    Manage user pools

    3.2. Select the user pool you just created.

    Select pools

    3.3 Go to “Users and groups”, and you can see a list of users. The status of the account you created should be “UNCONFIRMED”. Click the username of that account to check the account information is the same as you just input.

    Users and groups

    3.4. Click the “Confirm user” button if this is the account you just created. Now, this account is confirmed and you can log into Unishop with it!

    Confirm account

  4. Log into the Unishop and pick the unicorns you like! In the next lab, you will seamlessly modernize the underlying implementation of the shopping process without altering the user experience you’re having right now even a bit. Let’s go!

    You will see an “Upload” button and a “Delete unicorn” button. Please don’t use these two buttons at this point. These functions will not work until you complete corresponding tasks in the Extra Credit lab.