Part 6 - Add HTML, CSS and JavaScript

In this task you will download the files needed for the UI from S3 and add them to your project, you will also configure the javascript to correctly communicate with Cognito.

1. ASP.NET Core uses the folder wwwroot as the root web directory by default so let’s add a new folder to our project by right-clicking the project and selecting -> Add -> New Folder and then name the folder wwwroot

2. The icon of the wwwroot folder should change in the Solution Explorer window

3. Let’s grab some javascript files to add to the wwwroot folder, browse to https://s3.amazonaws.com/wwwroot.ly/wwwroot.zip and extract the zip file contents to your laptop

This zip file contains the following javascript, css and html files required for the GUI:

  • amazon-cognito-identity.min.js

  • aws-cognito-sdk.min.js

  • fullcalendar.min.js

  • fullcalendar.min.css

  • moment.min.js

  • index.html

4. From the Solution Explorer right-click the wwwroot folder and select -> Add -> Existing item and navigate to the extracted files from the previous step, select all of the files and Add, the wwwroot folder should look like:

5. Open the index.html file and update the javascript values for the variable poolData to your Cognito User Pool Id and App client id values

Referring back to step 4.11 for these values, in my example these are:

  • Cognito App client id: au93epsabvgh4hki86akq324f

  • Cognito User pool id: us-east-2_P9uuQFDnM

The javascript variable poolData on line 60 will look like the following:

Info: Since this demo app is very simple, JavaScript used to authenticate and create/edit events is embedded inline in the index.html file.

The JavaScript performs the following functions:

  • On document.ready the source for events in FullCalendar is set to api/events (FullCalendar passes the start and end arguments), and handles are added for dayClick and eventClick events.

  • function authenticate() for test purposes the JWT Login button is used to authenticate a user against the Cognito user pool. During authentication, onSuccess, onFailure, and newPasswordRequired events are handled. On first login, the newPasswordRequired event is raised which prompts the user for a new password, and then they will need to log in with it. This will change the user’s status in Cognito from FORCE_CHANGE_PASSWORD to CONFIRMED. To keep things simple for this walkthrough a token refresh strategy is not implemented, when the JWT expires after 1 hour subsequent PUT/POST calls will fail with a 401 Unauthorized response

Note: In this walkthrough we are implementing the UI and authentication flow ourselves, in HTML and JavaScript. Cognito can actually host the login form itself, and handle the change password flow, and other scenarios as well. You can even customize the UI with your own logo and CSS