I also struggled with this; I agree that the documentation is a little light.
The link you provided shows what your Cognito UI URL might look like:
https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>
The idea is that you send your user to this URI, they do their business, and then they get redirected back to you with some sort of token(s) or code. You can check your domain by clicking "Domain name" in the left nav bar.
App Client Settings and OAuth Grant Types
First, check your App client settings. You'll need to whitelist your Callback URL(s) (where Cognito will redirect back to), and make sure at least one OAuth Flow is allowed.
Cognito App client settings
"Authorization code grant" will return an authorization code, which you then send to the oauth2/token endpoint to get an access_token, id_token, and refresh_token. This is a good choice if you have a back-end application and want refresh tokens.
"Implicit grant" is what I'm using in my front-end application. It will return an access token and an id token directly to my front-end app.
To use implicit grant, change response_type=code to response_type=token in your Cognito UI URL.
Implicit Grant Example
So if your redirect after successful authentication looks like this:
https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600
You just need to peel the id_token off the URL and send it to Cognito, with your User Pool as the key in the Logins map. In Javascript:
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c',
Logins: {
'cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx': idToken
}
});
Where idToken is the id token that came back to you on the redirect.
Authorization Code Grant Type
If you use authorization code grant type instead (response_type=code), your back end will need to call the /oauth2/token endpoint to exchange the code for tokens. That call would look something like this:
curl -X POST
https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token
-H 'content-type: application/x-www-form-urlencoded'
-d 'grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2'
Then you can give this id token to Cognito as above.
UI Notes
My application is popping up the Cognito UI in a new tab when the user clicks a link. When the redirect comes back to my app, I use postMessage() to send the tokens to the parent window, which then closes the new tab. I think this is a relatively common pattern.
I haven't tried it, but I'm guessing rendering the UI into an iframe is disallowed, as a mitigation against click-jacking. Source
I hope this is at least somewhat helpful. Good luck!
