This article provides a step-by-step introduction of how users can use their Azure AD accounts to authenticate with a React Native app via AWS Cognito.
It would be very easy, if AWS Amplify would provide the tools to take over such an authentication via an IdP. However, the AWS documentation says that this must be handled by the AWS hosted UI, what we will do.
Step 1: Configuration of AWS Cognito User Pool
The following websites provide a good introduction to how a User Pool can be created in AWS Cognito and what to look out for.
Remark:
When an app client is created, it is important to disable the option Generate Client Secret, which is enabled by default. Client Secrets are used for backend communications. Using it in an application would cause security risks.
Step 2: Configure Azure AD and add it as IdP in AWS Cognito
It wouldn’t make sense to re-invent the wheel, therefore see the following description of how the configurations must be done:
Remark:
The integration of Azure AD and AWS Cognito can be done with SAML2.0 and OpenID Connect. The decision of what to take depends of course on the pros and cons, but you should also think about what other services you will need. For example, AWS AppSync only supports OpenID Connect as authorization mode.
You can also configure a provider for SAML2.0 and OpenID Connect. Afterwards, you can decide in AWS Cognito under App client settings which providers you want to enable. The subsequent screenshot shows an example of the configured App client settings. (The entered Callback URL is important for Step 3).
Step 3: Check if it is working with Postman
The easiest way to check if the authorization works with the Azure AD IdP is to create a new request in Postman and to try to get a new access token. The following screenshot shows, which information must be entered. The callback URL must be the same as in AWS Cognito configured.
After clicking the button “Get new Access Token” a window with the AWS UI should open, where the desired authentication provider can be chosen. As shown on Figure 3, I created and enabled a SAML2.0 and OpenID Connect provider, as well as the standard Cognito User Pool. You are forwarded to the Microsoft Login Page by clicking on one of the identity providers.
After a successful authorization, Postman will show the received tokens when the callback URL “https://oauth.pstmn.io/v1/callback” is used. Be aware that these are Tokens from AWS and not from Azure. If it wasn’t successful, Postman will show the response error in the console.
Remark:
I used in the example above the “/login” Endpoint. When you try it out you will notice that on the second time getting a new token in a short time range you will be asked if you want to continue with the previously selected provider. This is because of the stored session in the browser. If you want that this should be avoided, you have to use the “/logout” Endpoint with the same parameters as for the “/login” Endpoint (see LOGOUT Endpoint).
In addition, it is not necessary to use Postman. What Postman does is that it provides a clear form for the request information and call the URL with the entered information. But you can also create the URL by your own and enter it in any browser. The syntax is the following:
https://[Domain Name].auth.[Region].amazoncognito.com/[Endpoint: “login” or “logout”]?response_type=token&client_id=[Cognito Client ID]&redirect_uri=[Cognito Callback URL]
Step 4: Use Azure AD as IdP to authenticate users in React Native
At that time we know, that the configurations in Azure AD and AWS Cognito are correct and the IdP has been successfully added to the Cognito User Pool. Now let’s add an authentication functionality in our react native app. The fundamental functions are the same as they were for Postman. We have to call a URL in a browser, which leads us to the AWS authorization UI. For this purpose I use React Native App Auth, which provides all required functionalities:
React Native bridge for AppAuth-iOS and AppAuth-Android SDKS for communicating with OAuth 2.0 and OpenID Connect providers.
I have created a react native authentication demo app in which I have outsourced the login functions and the required information to a separate JS file.
Remark:
Async Storage has been used to store the tokens because it’s the easiest way to illustrate the overall functionality, but it shouldn’t be used in productive applications for sake of security. Do use Secure Storage instead.
You can find the entire react native demo app on Github. Enjoy!
