TL;DR: You can see a sample of how to use TouchID with React Native in this Github repository

A few days ago, Facebook finally made React Native available on Github, so, like everybody else, we decided to give it a try. After the usual “Hello, World” examples and test applications, we were pretty amazed at how easy it was to code a native app with Javascript. This is when we decided to try implementing something a little more complicated like TouchID authentication.

We’ve checked React Native components and couldn’t find one that allows us to use TouchID, so we went back to good ol’ Objective-C since there is no support for Swift yet. We decided to code a React Native Module that would allow everyone to use TouchID. Here in Auth0, we've already implemented a TouchID authentication flow for Lock. So we decided to reuse that library and wrap it in a React Native compatible library. In other words, we created Lock.ReactNative with all the necessary mappings to use Lock like this in your React Native app:{
  connections: ['touchid'],
}, (err, profile, token) => {
  /** Handle Login */

In this article, we'll learn how you can use Lock.ReactNative in any new app you build to add authentication to it!

Before starting, make sure you have React Native, Xcode and CocoaPods installed in your Mac. For that, you can use React Native’s Getting Started Guide, and Cocoa Pod's Getting Started Guide as well.

Project Creation & Configuration

Installing the needed dependencies

Once our React Native app is created, we need to install LockReact as a dependency. For that, we'll use CocoaPods:

# Run in the React Native app's folder
pod init

Edit the Podfile content to look as follows:

platform :iOS, '8.0'

target 'MyApp' do
  pod 'LockReact'

Finally, just install the dependencies and open the XCode Project:

pod install
open LockReact.xcworkspace

Configuring Lock

Now, let's create an application in your Auth0 account and copy the clientId and domain to the Info.plist file

Create Auth0 account

Make your JS code be able to call a native component

Finally, we need to create an Objective-C class (LockReactModule in this case) that will allow your JS code to call Lock's native component:

Create ObjectiveC class

Now, paste the following code into the created classes:

// LockReactModule.h file
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface LockReactModule : NSObject<RCTBridgeModule>

// LockReactModule.m file
#import "LockReactModule.h"
#import <LockReact/A0LockReact.h>

@implementation LockReactModule

- (void)show:(NSDictionary *)options callback:(RCTResponseSenderBlock)callback {
  dispatch_async(dispatch_get_main_queue(), ^{
    A0LockReact *lock = [[A0LockReact alloc] init];
    [lock showWithOptions:options callback:callback];


Authenticating with TouchID from JS

Now we're ready to write some JS code!. We want to show a simple UI like this:

Sample app

Implementing the UI

First, let's implement the base UI with a React component.

// Imports go here
// ...

var LockReactApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.message}>
          Please tap on 'Login with TouchID' to continue.
        <View style={styles.actionContainer}>
          <TouchableHighlight style={styles.actionButton} onPress={this._onLoginTouchID}>
            <Text style={styles.actionButtonText}>Login with TouchID</Text>
  _onLoginTouchID: function() {
    // Implement TouchID here
    console.log("Implement TouchID here!");

// Styles go here
// ...

Adding TouchID authentication with Lock

Now, we can just use Lock for TouchID authentication.

First, we require it:

var Lock = require('NativeModules').LockReactModule;

Then, we call it from the _onLoginTouchID method:{
  closable: true,
  authParams: {
    connection: 'Username-Password-Authentication',
  connections: ['touchid'],
}, (err, profile, token) => {
  if (err) {
  // Authentication worked!
  console.log('Logged in with TouchID!');

Refresh the app and boom!. Authenticating with TouchID now works.

Working app

Congrats, you've just added TouchID to your app with less than 20 lines of code :). If you want to see the full code of this sample app, you can go to this github repository.

Happy hacking :)!