How to Single Sign-on with React Native and Fabric

Recently I started building a mobile app for iOS, thanks to React Native 👻. Since most of the things are new, I thought I’ll write about my learnings while figuring out each thing.

This is the first post in the series, hope I can write more under this.

What

Here I am going to talk about how I implemented Single Sign-on with React Native.

Why

Personalizing a service is an important aspect of any application. This could be done by asking the user to authenticate.There are couple of ways to do it:

1. Web view

Web view is a way of opening a browser in the app and asking the user for credentials to authenticate and then after completion redirect the user back to the app.

This method was quick for me to implement, I followed the guide in the official documentation here.

2. Single Sign-on (SSO)

SSO is a service that permits a user to use one set of login credentials (e.g., name and password) to access multiple applications. The service authenticates the end user for all the applications the user has been given rights to and eliminates further prompts when the user switches applications during the same session. For more information you can follow it here

How

Like everyone first I started to look for guides on how to do it and I did find couple of them, some were too specific to xcode and some had lot of manual changes. But at the end I did figure out and here I am going to explain how I implemented it.

1. Create React App

react-native init SSOExample and when you runreact-native run-ios you should have the below screen

2. Install Fabric into the app

Go to https://get.fabric.io/ signup if you are not a member already and download the SDK.

After signing in into the SDK select your xcode project then select Twitter kit to install and follow the instructions given in the app

Go to Twitter Apps to create your app so that you can obtain API key and secret.

Update the keys in the xcode project under Fabric like shown in the image below.

or you can update from info.plist directly.

3. Add a Login with Twitter button

I add the following code to create a new button which when clicked should trigger the login

4. Expose SSO module

Since React Native doesn’t have SSO module yet, I needed to implement it in the native and access it from JavaScript.

Open SSOExample.xcodeproj and add 2 new files under Libraries.

**_TwitterSignin.h_**This is an header file that implements the RCTBridgeModuleprotocol. If you are wondering, RCT is an abbreviation of ReaCT.

**_TwitterSignin.m_**This is an Objective-C file. In addition to implementing the RCTBridgeModule protocol, the class must also include the RCT_EXPORT_MODULE() macro. This takes an optional argument that specifies the name that the module will be accessible as in your JavaScript code. If you do not specify a name, the JavaScript module name will match the Objective-C class name.

Since React Native invokes native modules methods on a separate serial GCD queue and this might change, I wanted to specify to use main-thread-only. This is done using - (dispatch_queue_t)methodQueue.

React Native will not expose any methods of TwitterSignin to JavaScript unless explicitly told to. This is done using the RCT_EXPORT_METHOD() macro:

Here we are creating a method logIn which takes a callback as a parameter which gets triggered when the sign-on is completed, either success or failure.

For more you can visit the official guide here.

5. Trigger from JavaScript

That’s it now when the login button is clicked I trigger logIn method which was created above.

LogIn method is accessed using NativeModules of react-native.

Thanks for reading, If you liked this article, click “Recommend” or write a response below. You can connect with me on Twitter @narendra_shetty.

Other articles written by me:

How I built a super fast Uber clone for mobile web_This post is about my learning on performance techniques used to make Uber mobile web using React as fast as possible._hackernoon.com

How I learnt Redux concepts_So in the past few months there is a lot of fuss going on in Javascript community about React and Redux. Everyone is…_crowdfire.engineering

How We Built The Fastest Extension for Chrome_We have always thought of finding a way to share anything instantly from anywhere. The idea was to have something so…_crowdfire.engineering