Defer Login | React Native Development | Mobile SDK Development Guide

Apps built with early versions of React Native for Mobile SDK always present a Salesforce login screen at startup. Sometimes, however, these apps can benefit from deferring authentication until some later point. Beginning with React Native for Mobile SDK 4.2, you can defer login to any logical place in your app.

Deferred login implementation is a two-step process:

In your iOS or Android native container app, you call Mobile SDK native methods to disable authentication at startup.
In your React code, you call a Mobile SDK JavaScript function at the point where you plan to initiate authentication.

Mobile SDK provides a React Native template app specifically to demonstrate deferred login: ReactNativeDeferredTemplate. To create an app based on this template, use the forcereact createwithtemplate command, as follows:

1$ forcereact createwithtemplate
2Enter the target platform(s) separated by commas (ios, android): ios,android
3Enter URI of repo containing template application or a Mobile SDK template name: ReactNativeDeferredTemplate
4Enter your application name: MyDeferred
5...

Read on for the implementation details.

Step1: Disable Login at Startup

iOS (Objective-C):

To disable the Salesforce login screen from appearing at startup, open your project’s bootconfig.plist file and set shouldAuthenticate to false.

1<dict>
2    <key>remoteAccessConsumerKey</key>
3    <string>3REW9Iu66....</string>
4    <key>oauthRedirectURI</key>
5    <string>testsfdc:///mobilesdk/detect/oauth/done</string>
6    <key>oauthScopes</key>
7    <array>
8        <string>web</string>
9        <string>api</string>
10    </array>
11    <key>shouldAuthenticate</key>
12    <false/>
13</dict>

Android (Java):

By default, the Salesforce login screen appears at startup. To disable this behavior, override the shouldAuthenticate() method in your MainActivity class (or whichever class subclasses SalesforceReactActivity), as follows:

1@Override
2public boolean shouldAuthenticate() {    
3    return false;
4}

Step 2: Initiate Authentication in React (JavaScript)

To initiate the authentication process, call the following oauth function:

1function authenticate(success, fail)

This function takes two arguments: a success callback function and a failure callback function. If authentication fails, your failure callback is invoked. If authentication succeeds, your success callback is invoked with a dictionary containing the following keys:

accessToken
refreshToken
clientId
userId
orgId
loginUrl
instanceUrl
userAgent
communityId
communityUrl

We've Moved

Welcome to the new home of the Mobile SDK Developer Guide! For now, the Japanese guide can be found in PDF form.