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.
Here I am going to talk about how I implemented Single Sign-on with React Native.
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
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 run
react-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
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
SSOExample.xcodeproj and add 2 new files under
This is an header file that implements the
RCTBridgeModuleprotocol. If you are wondering, RCT is an abbreviation of ReaCT.
This is an Objective-C file. In addition to implementing the
RCTBridgeModule protocol, the class must also include the
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
React Native will not expose any methods of
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.
That’s it now when the login button is clicked I trigger
logIn method which was created above.
LogIn method is accessed using
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:
This post is about my learning on performance techniques used to make Uber mobile web using React as fast as possible.hackernoon.com