Skip to content

Latest commit

 

History

History
254 lines (183 loc) · 8.77 KB

ios-reactnative.md

File metadata and controls

254 lines (183 loc) · 8.77 KB
Raw
lodash title name alias language framework hybrid image tags snippets
true
iOS React Native Tutorial
iOS - React Native
reactnative
react native
Javascript
React Native
true
//auth0.com/lib/platforms-collection/img/react.png
quickstart
dependencies setup use
native-platforms/ios-reactnative/dependencies
native-platforms/ios-reactnative/setup
native-platforms/ios-reactnative/use

iOS React Native Tutorial

<% if (configuration.api && configuration.thirdParty) { %>

<% } else { %>

<% } %>

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

Before Starting

Go to the Application Settings section in the Auth0 dashboard and make sure that Allowed Callback URLs contains the following value:

a0@@account.clientId@@://\*.auth0.com/authorize

1. Adding the Auth0 dependencies

Inside your project create a file named Podfile with these contents:

@@snippet(meta.snippets.dependencies)@@

and run pod install

If you need help installing CocoaPods, please check this guide

2. Configuring Auth0 Credentials & Callbacks

Add the following entries to your app's Info.plist:

Key Value
Auth0ClientId @@account.clientId@@
Auth0Domain @@account.namespace@@

Also you'll need to register a new URL Type with the following scheme a0@@account.clientId@@. You can do it from your app's target Info section.

Url type register

3. Register Native Authentication Handlers

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

#import <Lock/Lock.h>

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

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

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:

FB plist

Finally, you need to register Auth0 Facebook authenticator somewhere in your application. You can do that in the AppDelegate.m file, for example:

#import <Lock/Lock.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    A0FacebookAuthenticator *facebook = [A0FacebookAuthenticator newAuthenticationWithDefaultPermissions];
    [[A0IdentityProviderAuthenticator sharedInstance] registerSocialAuthenticatorProvider:facebook];
}

####Twitter

To support Twitter native authentication you need to configure Auth0 Twitter authenticator:

#import <Lock/Lock.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  NSString *twitterApiKey = ... //Remember to obfuscate your api key
  NSString *twitterApiSecret = ... //Remember to obfuscate your api secret
  A0TwitterAuthenticator *twitter = [A0TwitterAuthenticator newAuthenticationWithKey:twitterApiKey                                                                            andSecret:twitterApiSecret];
  [[A0IdentityProviderAuthenticator sharedInstance] registerSocialAuthenticatorProvider:twitter];
}

4. Add Native Module for Lock to your project

Create an Objective-C class (LockReactModule in this case) that will allow your JS code to call Lock.

Create Class Xcode

LockReactModule.h

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

@interface LockReactModule : NSObject<RCTBridgeModule>

@end

LockReactModule.m

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

@implementation LockReactModule

RCT_EXPORT_MODULE();

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

RCT_EXPORT_METHOD(showSMS:(NSDictionary *)options callback:(RCTResponseSenderBlock)callback) {
  dispatch_async(dispatch_get_main_queue(), ^{
    A0LockReact *lock = [[A0LockReact alloc] init];
    [lock showSMSWithOptions:options callback:callback];
  });
}

RCT_EXPORT_METHOD(showTouchID:(NSDictionary *)options callback:(RCTResponseSenderBlock)callback) {
  dispatch_async(dispatch_get_main_queue(), ^{
    A0LockReact *lock = [[A0LockReact alloc] init];
    [lock showTouchIDWithOptions:options callback:callback];
  });
}

@end

You can also download LockReactModule.h and LockReactModule.m and add them to your Xcode project.

5. Let's implement the login

Now we're ready to implement the Login. First we need to require the native module we've just created:

@@snippet(meta.snippets.setup)@@

Then we can show Lock:

@@snippet(meta.snippets.use)@@

Lock.png

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 or TouchID

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

5. 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.

6. We're done

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