We have a React app but the users of this app will be IAM users from the IAM Identity Center. What is the solution?

According to the requirements, the Identity Provider should be the IAM Identity Center which means we should add our react app directly to IAM Identity Centre. So here comes the next question:

• Can I add IAM Identity Center as the authentication provider to my React app directly?

As the answer is “not so easily”, we can add Cognito in between. As in, we are going to add the app to Cognito but the identity provider will be IAM Identity centre! We will follow SP-initiated SAML2.0 authentication. The flow will be something like the following:

• Our app will initiate the authentication. It will send request to Cognito.
• Cognito has IAM Identity Centre as the IdP. It will redirect the request to IAM Identity Centre
• IAM Identity Centre login screen will show up where the user will input their IAM user name and password.
• If authenticated, IAM Identity Centre will send the SAML response to Cognito.
• Cognito will generate an authentication code from the SAML response and load the Callback url (which we’ll set to one of our page’s URL) setting the code in a query parameter called “code”
• In our app, we’ll catch the code and send another request to Cognito to send us all the authentication details: Access token, refresh token, id token, expiry etc
• We can use these tokens to manage user session

Read more details here.

Implementation steps:

• Add IAM Identity Center as the IdP to Cognito user pool
• Make sure to set some configurations for the process to work
• Get the necessary environment variables to integrate Cognito with our app
• Implementation code
• Troubleshooting