4. Adding Connected App

You may remember that when we generated the app using forceios we used the Connected App that came with sample template. In this unit, you'll create a new Salesforce Connected App in Salesforce, grab "App ID"(aka Consumer key) and Callback URL from there and update them in our sample app.

Step 1: Create A New Connected App

  1. In your Developer Edition organization, from Setup, type apps in the Quick Find box.
  2. Under Create, Click on Apps and scroll down to Connected Apps section, then click New to bring up the New Connected App page.
  3. Under Basic Information, complete the form as follows.
    • Connected App Name: ReactNativeSample
    • API Name: accept the suggested value
    • Contact Email: enter your email address
  4. Under OAuth Settings, check Enable OAuth Settings.
  5. Set Callback URL to reactnativesample://auth/success.
  6. Under Available OAuth Scopes, select Access and manage your data (api), Provide access to your data via the Web (web), and Perform requests on your behalf at any time (refreshtoken, offlineaccess), then click Add.
  7. Click Save.
  8. Click Continue and wait for 5-10 minutes.

Allow from 2-10 minutes for your changes to take effect on the server before using the connected app.

Step 2: Add App ID and Callback URL

App ID (Connected App's "Consumer Key") and the Callback URL is stored in the native app's AppDelegate.m file. We just need to change those values and restart everything.

  1. Switch to Xcode
  2. Stop the Xcode app if it's running (top-left corner).
  3. Open AppDelegate.m
  4. Change RemoteAccessConsumerKey's value to match the Consumer Key copied from the connected app we created earlier.
  5. Change OAuthRedirectURI's value to match the Callback URL from the connected app we created earlier.
  6. Save.
  7. Switch to the iOS Simulator.

Step 3: Restart Everything

  1. From the Simulator's menu, click on ** Simulator** then click on Reset Content and Settings.
  2. Switch to the terminal where we have "React Native CLI" and stop it by pressing Control + C, then restart it by running npm start
  3. Switch to Xcode and run the app by pressing the Arrow button
  4. You should now see Simulator opening up the app and show the Salesforce login screen.
  5. Login with your developer org credentials.
  6. Notice that next OAuth screen shows ReactNativeSample. This means our app now uses the new Connected App configuration.
  7. Press "Approve" in the next OAuth screen.

Note that you need to reset the simulator because Sample app caches old Connected App's information.

index
  1. Setting Up Developer Environment
  2. Creating forceios App
  3. Running forceios App
  4. Adding Connected App
  5. Updating JavaScript
  6. Adding New React Native Component
  7. Workflow Summary
  8. Next Steps
comments powered by Disqus