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:

// This is mandatory to get the aws-sdk to compile
, “lib”: [
“dom”,
“es2015”,
“scripthost”
]
//

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:

Screen Shot 2017-12-11 at 18.45.54

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

Screen Shot 2017-12-11 at 18.45.21

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

RX.App.initialize(true, true);

and
RX.UserInterface.setMainView(this._renderRootView());

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

Screen Shot 2017-12-11 at 17.44.28

iOS

Screen Shot 2017-12-11 at 17.44.48

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

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s