React Native - Integrate AWS Cognito User Pools with Azure Active Directory

Since AWS Amplify Authentication module doesn’t support Hosted UI in React Native, I have to use alternative way to auth our APP’s users from Active Directory Federated Identity provider.

This is an example about how to use AWS Cognito Hosted UI with Active Directory Federated Identity provider in React native

How to set Cognito with Azure Active Directory Federated Identity provider

Check out this article

How to add Azure AD as AWS Cognito Federated Identity Provider

When adding SAML provider, Select Enable IdP sign out flow if you want your user to be logged out from the SAML IdP when logging out from Amazon Cognito.

React Native iOS

Install plugin react-native-safari-view

$ npm install --save react-native-safari-view
$ react-native link react-native-safari-view

Set up Linking in your react-native project

Open Xcode, add following code in AppDelegate.m

#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}

Set URL Schemas in Info.plist

Next, copy following code to App.js

In Cognito Domain URL (eg. https://xxx.auth.ap-southeast-2.amazoncognito.com/login?response_type=code&client_id=xxxx&redirect_uri=runningman://), Response_type has to be set to code (Code Grant of oAuth2), if setting to token (Implicit Grant), there won’t be refresh token in returned response. redirect_url should be your App’s URL schema (eg. runningman:// ).

Once you get the auth code after login successfully , POST auth data to Cognito oAuth2 URL (eg. https://xxxx.auth.ap-southeast-2.amazoncognito.com/oauth2/token), post form body must be encoded otherwise you will get invalid request error.

Preview

Response example

“{“id_token”:”xxxp4qA0uOFHAxCG64Z0DQ….”,”expires_in”:3600,”token_type”:”Bearer”}”

Now, you can find id_token, access_token and especially refresh_token from the response body!

Logout Endpoint

The /logout endpoint only supports HTTPS GET. The user pool client typically makes this request through the system browser.

Logout url should like

https://<YOUR_DOMAIN>.auth.<YOUR_REGION>.amazoncognito.com/logout?
client_id=<YOUR_CLIENT_ID>&logout_uri=<URL_SCHEME>

eg.

https://runningman.auth.ap-southeast-2.amazoncognito.com/logout?client_id=xxxx&logout_uri=runningman://?logout

Check out source code here, good luck!

yai333/How-to-use-AWS-Cognito-Hosted-UI-in-React-Native