Amazon cognito user-pool javascript SDK and Xamarin iOS

Today I will share my experience about how we have used Amazon cognito user-pool javascript  SDK in our xamarin iOS project to implement custom user registration/login feature. Here, by custom user, I mean user who wants to login in our mobile app using their emails, not by social login provider (facebook/twitter).

Why we have to use javascript SDK in an iOS app, where Amazon provides native SDK support for the same feature in their iOS SDK? Well, unfortunately Amazon user pool SDK is available  only in native android and iOS, but not for xamarin platform. So we had to find an option to do this. As we saw javascript SDK provides user pool support, we decided to try that.

Here I will talk about app part which is built in xamarin iOS platform in C# language. If you want to know about the JS part using Cognito user pool JS SDK, please wait for my next post. I will tell about it later.

Amazon user pool service allows developer to provide users to login in the app using their own email address. At first you have to create a user pool from amazon console. To do this, press Cognito -> Manage your user pools -> Create a user pool. After creating that, you have to create an app from user pool home.

When creating the app, please uncheck “Generate client secret“. Otherwise it will not work according to this.

Now you have to get the Pool ID from user pool home and App client ID from the app you have just created.

Now I can talk about the coding part. Code is available here.

As I had to run JS code in the iOS app, the option is to load all JS code in UIWebView and call JS methods using “EvaluateJavascript”. For this part, I have used an open source library named JsBridge. This library makes listening to callback functions really easy and code is looking more clean. Thank to the author crdeutsch.

I have created a simple project where user can sign up and sign in the application. Not all the code is following best practice but reader can understand the using of user pool JS SDK in xamarin iOS through the project.

I followed model-view-presenter approach in the project. Presenters, interfaces etc are in a separate portable class library and iOS project contains the view code and some utility code. As I have to use UIWebView to call API methods, I have to put these code in the iOS project and I have used interfaces to call the API manager methods from presenter classes in PCL.

In the iOS project, the folder named “www” is containing all the JS code needed. Here you can see, all necessary SDKs of AWS is included in the main.html file. iOS app basically loads this HTML file in UIWebView. Like this…

webView = new UIWebView ();

string path = NSBundle.MainBundle.PathForResource ("www/main", "html");

string address = string.Format ("file:{0}", path).Replace (" ", "%20");

webView.LoadRequest (new NSUrlRequest (new NSUrl (address)));

You can look WebViewManager.cs file.

You may have already noticed the JsBridge project. To use this, one line of code is needed to add in the AppDelegate.cs file in  FinishedLaunching  method.

cdeutsch.JsBridge.EnableJsBridge ();

Before you run the project, open AWSConstants.cs file and set your user pool ID and Region. If you want to use Cognito Federated Identity, set your identity pool ID.

Now open config.js file from the www->js folder and set the ids accordingly. Here client ID should be  taken from the app you created in user pool.

At this point you should be able run the iOS app successfully.

 Source Code