Playing with AWS Cognito in ReactXP

Update Wednesday 13 December 2017: Added a missing step about Babel ES2015 presets.

I’m experiencing with Amazon Cognito for one of my customer. Because we’ve chosen ReactXP to build cross platform client apps- and AWS as our cloud platform, we have to integrate various AWS SDKs.

Following are the steps required to integrate the Cognito SDK with a ReactXP app.

Cognito resources

You will need a User Pool and a client App to run the code below. The steps required are not detailed here, please follow step 1 in the Amazon Cognito developer guide.

Installing the AWS Javscript SDK

I’m not using a customized version of the AWS SDK right now. From a command prompt in your project directory run:

• npm install –save aws-sdk

Next, follow the React Native Installation Instructions of the Amazon Cognito Identity SDK for JavaScript:

• npm install –save amazon-cognito-identity-js
• npm install –save babel-preset-es2015
• react-native link amazon-cognito-identity-js

Without this last step, your app will run successfully on web, but not on native.

Typescript configuration change

Before we can go with the code, there is one last step to achieve. Add the following to the compilerOptions section of the tsconfig.json file:

Now we’re ready to write some Amazon Cognito related client code. It is inspired from the documentation.

The code

First we need to import the requested types:

Then we continue with a signup tentative (usage 1 in the link above). Remember to replace the dots (…) with your actual settings:

I’ve simply inserted this code in the App.tsx code file between

RX.App.initialize(true, true);

Now you’re ready to run your app. This code does not work as is because we’re not giving a password 😉

The results

Web

iOS

Stay tuned for more and, in the meantime, enjoy !