How to Bypass Cognito’s Hosted UI in React

One login to rule them all

In my previous post, we’ve seen how to integrate Azure AD & AWS Cognito through SSO. Now, we’ll see how to implement this SSO in our frontend using two methods: 1) using your own login UI, or 2) using no login page at all, just go straight in!

Pre-requisites

To do this, besides having the SSO setup between Azure AD & AWS Cognito in place, you will also need a:

• Redirect URL: the URL you want your users to reach once their auth is completed. This will probably be your website home page, or their own profile, but it’s really whatever you want.
• Cognito domain: a string similar to projectname.eu-west-1.amazoncognito.com
• Client ID: an to identify the user pool authentication resources attached to your app. Besides the ID, a little configuration is needed too.

Let’s see how we can find the Cognito domain and the client ID.

1. Cognito domain
To find your Cognito domain, in the (new) AWS console, go to Cognito > User Pools and select the relevant pool. Then, scroll down to App integration. The Domain section contains the domain we’ve set in the previous step.