Explore Hosted UI

Lets explore the hosted UI and options.

Return to the AWS Console, Under the tab App integration click on petstore-client. From here click on View Hosted UI this will open a window/tab with JavaScript, you cannot right click and copy the URL so ensure you click.

In the New tab click Sign up we will be registering a new user.

Fill out the registration form and ensure you use a real email address as a OTP ( One Time Password ) will be sent to this address to enable account confirmation. Click Sign up

Check your email inbox for the OTP and enter the value and click Confirm Account. The email you receive is minimal and not styled; this can all be customised if required.

Once your account is confirmed you will be redirected back to your application, as we configured that url for this exercise to localhost and we are not hosting an application your browser will display the following.

Take note of the URL it will be: https://localhost/?code=c4248548-8691-4547-9e66-06d4b64d64ee though will be a different code.

Let’s now look at the response when we change to implicit flow sign in. Close the current tab, you’ll be back at the App client settings section of Cognito, again click on Launch Hosted UI this will open a new tab, however you are logged in from the prior session, click Sign in as a different user?

Click in the URL section of your browser, the URL will look something like this:

https://example-demo.auth.ap-southeast-2.amazoncognito.com/login?client_id={yourclientId}&response_type=code&scope=email+openid+petstore/read+profile&redirect_uri=https://localhost

Change the response type value to token from code

https://example-demo.auth.ap-southeast-2.amazoncognito.com/login?client_id={yourclientId}&response_type=token&scope=email+openid+petstore/read+profile&redirect_uri=https://localhost

And press enter to load the new URL, enter the user details you created previously and click Sign in

“https://localhost/#id_token={a-large-id-token}&access_token={a-large-access-token}&expires_in=3600&token_type=Bearer” because your browser can’t connect to the server “localhost”.