react-native-ios.md

title	name	alias	language	framework	hybrid	image	tags	snippets
React Native iOS Tutorial	React Native - iOS	reactnative react native	Javascript	React Native	true	/media/platforms/react.png	quickstart	setup use native-platforms/reactnative-ios/setup native-platforms/reactnative-ios/use

React Native iOS Tutorial

::: panel-info System Requirements This tutorial and seed project have been tested with the following:

• React Native 0.16.0
• CocoaPods 0.39.0
• NodeJS 4.2.4 :::

<%= include('../_includes/_package', { pkgRepo: 'Mobile-Samples.React', pkgBranch: 'master', pkgPath: 'Classic/Lock', pkgFilePath: 'Classic/Lock/auth0-credentials.js', pkgType: 'replace' }) %>

Otherwise, if you already have an existing React Native application, please follow the steps below.

CocoaPods

You'll need CocoaPods in order to fetch Lock native libraries dependencies for you and link them to your project.

To install CocoaPods just run the following command:

gem install cocoapods

If you need help installing CocoaPods, please check this guide

1. Adding Lock to your project

First you need to run the following command to install react-native-lock

npm install --save react-native-lock

Then install rnpm

npm install rnpm -g

After that, link react-native-lock with your iOS project:

rnpm link react-native-lock

If you get the following warning.

!] The `<YourAppName> [Debug]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods/Pods.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `<YourAppName> [Release]` target overrides the `OTHER_LDFLAGS` build setting defined in `Pods/Target Support Files/Pods/Pods.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

Click <YourAppName>.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Other Linker Flags and change the current value for $(inherited) for all configurations .

2. Register Native Authentication Handlers

To allow native logins using other iOS apps, e.g: Twitter, Facebook, Safari etc, you need to add the following methods to your AppDelegate class.

#import "A0LockReact.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[[A0LockReact sharedInstance] lock] handleURL:url sourceApplication:sourceApplication];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
  return [[[A0LockReact sharedInstance] lock] continueUserActivity:userActivity restorationHandler:restorationHandler];
}

And then inside the method application:didFinishLaunchingWithOptions the following line

  [[[A0LockReact sharedInstance] lock] applicationLaunchedWithOptions:launchOptions];

If you need Facebook or Twitter native authentication please continue reading to learn how to configure them. Otherwise please go directly to the step #3

Facebook

Lock uses the native Facebook SDK to obtain the user's access token so you'll need to configure it using your Facebook App info:

First, add the following entries to the Info.plist:

Key	Value
FacebookAppID	YOUR_FACEBOOK_APP_ID
FacebookDisplayName	YOUR_FACEBOOK_DISPLAY_NAME

Then, register a custom URL Type with the format fb<FacebookAppID>.

For more information on how to configure this, please check Facebook Getting Started Guide.

Note: The Facebook app should be the same as the one set in Facebook's Connection settings on your Auth0 account

Here's an example of how the entries should look like:

If you need have iOS 9 support for your app, then make sure to add the LSApplicationQueriesSchemes key to your Info.plist file and add the fbauth2 value to it.

Here's how the entries for LSApplicationQueriesSchemes should look like:

Then add Lock Facebook's Pod in ios/Podfile file and run pod install --project-directory=ios

pod 'Lock-Facebook', '~> 2.2'

Finally, you need to register Auth0 Facebook integration when creating Auth0Lock :

var lock = new Auth0Lock({
  //Other Lock config options
  integrations: {
    facebook: {}
  }
});

If you need to use other permissions besides the default:

var lock = new Auth0Lock({
  //Other Lock config options
  integrations: {
    facebook: {
      permissions: "public_profile"
    }
  }
});

Twitter

First add Lock Twitter's Pod in ios/Podfile file and run pod install --project-directory=ios

pod 'Lock-Twitter', '~> 1.1'

Finally, you need to register Auth0 Twitter integration when creating Auth0Lock :

var lock = new Auth0Lock({
  //Other Lock config options
  integrations: {
    twitter: {
      api_key: "YOUR TWITTER API KEY",
      api_secret: "YOUR TWITTER API SECRET"
    }
  }
});

3. Let's implement the login

Now we're ready to implement the Login. First we need to require react-native-lock-ios:

${snippet(meta.snippets.setup)}

Then we can show Lock:

${snippet(meta.snippets.use)}

Note: There are multiple ways of implementing the login box. What you see above is the Login Widget, but you can try our passwordless Login Widgets: SMS, Email or TouchID

On successful authentication, the callback function will yield the user's profile and tokens inside the parameters profile and token respectively.

4. Showing user information

After the user has logged in, we can use the profile object which has all the user information (Let's assume the profile is stored in a component's state object):

  <Text>Welcome {this.state.profile.name}</Text>
  <Text>Your email is: {this.state.profile.email}</Text>

You can click here to find out all of the available properties from the user's profile. Please note that some of this depend on the social provider being used.

5. We're done

You've implemented Authentication with Auth0 in iOS & React Native. You're awesome!