This is the second part of the boilerplate. This app uses Amazon cognito Hosted UI for sign-inand sign-up. This app leverages Weatherapp as well as Amazon Cognito Auth SDK for JavaScript to handle authentication. To make the application work, user needs supply following environmental variables:
UserPoolAppClientId, UserPoolDomain, RedirectUriSignIn, RedirectUriSignOut, UserPoolId
These environmental variables supply Amazon Cognito details and will be used by initCognitoSDK() located ./src/index.jsx file. If you follow the instructions on the boilerplate, the template creates frontend pipeline and supplies these environmental variables into the corresponding Codebuild project. So you don't need to do anything manual. However, you can set these variables on your machine to test the authentication locally. To do that, you need to set RedirectUriSignIn, RedirectUriSignOut to http://localhost:8000. Also you need to whitelist http://localhost:8000 in Callback URL and Logout URL of your Cognito User Pool app. Then you can run the application and it should work:
yarn install
yarn start
Once the app is running, you need to press the button "Sin-in to get the weather":
The app will redirect you to Cognito hosted UI. For troubleshooting, you can also access hosted UI manually with following URL:
https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>
You can get your domain, user pool app client id and callback url from cloudformation output of the app created by backend pipeline (i.e. app/template.yaml).
Create a new user in Cognito user pool, if you havn't yet, so you can sign-in:
Then you can see weather report; something like this:
