How to Bypass Cognito’s Hosted UI in React

Manu Magalhães

·

Follow

4 min read

·

Aug 15, 2022

Listen

Share

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.

2. Client ID

The client ID we want is the client Web, used for websites (the other one is for mobile). To get it, just scroll all the way down in the page you already are until you find the App client list, and copy the relevant ID:

Then, click on the app client name to set the required configuration. A new page will show. The UI is pretty self-explanatory for the Allowed callback URLs and Allowed sign-out URLs:

Then, select the Identity provider from the dropdown. In our case, it was called AzureAD.