Recently I started building a mobile app for iOS, thanks to 👻. Since most of the things are new, I thought I’ll write about my learnings while figuring out each thing. React Native 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 . This could be done by asking the user to authenticate.There are couple of ways to do it: application 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 and when you run you should have the below screen react-native init SSOExample react-native run-ios 2. Install Fabric into the app Go to signup if you are not a member already and download the SDK. https://get.fabric.io/ 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 to create your app so that you can obtain API key and secret. Twitter Apps Update the keys in the xcode project under Fabric like shown in the image below. or you can update from directly. info.plist 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 and add 2 new files under . SSOExample.xcodeproj Libraries This is an header file that implements the protocol. If you are wondering, RCT is an abbreviation of ReaCT. **_TwitterSignin.h_** RCTBridgeModule This is an Objective-C file. In addition to implementing the protocol, the class must also include the 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. **_TwitterSignin.m_** RCTBridgeModule RCT_EXPORT_MODULE() 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 to JavaScript unless explicitly told to. This is done using the macro: TwitterSignin RCT_EXPORT_METHOD() Here we are creating a method which takes a callback as a parameter which gets triggered when the sign-on is completed, either success or failure. logIn 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 method which was created above. logIn method is accessed using of . LogIn NativeModules 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: _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 built a super fast Uber clone for mobile web _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 I learnt Redux concepts _We have always thought of finding a way to share anything instantly from anywhere. The idea was to have something so…_crowdfire.engineering How We Built The Fastest Extension for Chrome
![Hyperledger Fabric: create a Blockchain Network in under 10 minutes [no scripts]](https://hackernoon.imgix.net/images/ygj3z30fw.jpg?auto=format&fit=max&w=3840)
