How to integrate the AWS Cognito built-in UI?

Question

I've been experimenting with Cognito for a few days, and I am now testing the Built-in signing UIs. I have managed to get it working, I am able to see the login page and successfully login with a User I have created. For my callback URL I'm using localhost:3000 as a testing ground, where I'm running a React SPA.

However, I am at a complete loss about what to do once I'm redirected. The documentation says I should get a URL with a JWT as a query parameter. Instead, I'm getting a URL of the form:

localhost:3000/?code=########-####-####-####-############

where # is an alphanumeric character. I don't recognize this code, I don't think it is a JWT. I would highly appreciated it anyone could:

1. explain what it is
2. direct me to any kind of documentation on how to use it?

Answer 1

After redirection, You are getting localhost:3000/?code=########-####-####-####-############

This means you have enabled code grant flow

This code is used to get the tokens from Amazon Cognito.

Request Type: POST

URL: https://mydomain.auth.us-east-1.amazoncognito.com/oauth2/token

PayLoad: grant_type=authorization_code& client_id=<CLIENT_ID>& code=<AUTHORIZATION_CODE>& redirect_uri=com.myclientapp://myclient/redirect

Here you can see we are passing code in the payload with redirect url.

The response of this POST request will be your tokens ( If Successful authentication :) )

Sample Response:

{
 "access_token":"eyJz9sdfsdfsdfsd",
 "refresh_token":"dn43ud8uj32nk2je",
 "id_token":"dmcxd329ujdmkemkd349r",
 "token_type":"Bearer", 
 "expires_in":3600
}

You can save this token in your localstorage or sessionstorage for further custom authentication.

Please refer all the available endpoints of amazon cognito for more details.

Ex: Authorization Endpoint Token Endpoint

I hope now it makes clear to you!