Orchestration SDKs

Step 3. Configuring native provider SDKs

PingOne Advanced Identity Cloud PingAM React Native

Where possible, the External IdP module uses a provider’s native SDK to give users a smooth, integrated sign-in experience without leaving your app.

Where a native SDK is not available for a provider on a given platform, the module falls back to a browser redirect flow using the URI scheme you registered in the previous step.

The module detects which provider SDKs are present at runtime, so you only need to set up the providers you intend to use. You can always add more providers later by following the relevant section below.

Apple

Configure Sign in with Apple on Android and iOS
Facebook

Configure Facebook Login on Android and iOS
Google

Configure Sign in with Google on Android and iOS

Implementing Sign in with Apple

To enable Sign in with Apple in your React Native app, complete the steps in this section on the platforms you want to support:

Configuring Sign in with Apple on Android

No native Apple SDK is available on Android, so no additional Android dependency is required. Instead, the module uses browser redirect to authenticate Apple users on Android devices.

To enable Sign in with Apple on Android, ensure the following are in place:

Configuring Sign in with Apple on iOS

To add and configure the Sign in with Apple native SDK on iOS, complete the following steps:

Step 1. Add the Sign in with Apple pod

Add the following to your ios/Podfile:

pod 'PingExternalIdPApple'

Run pod install after updating your Podfile.

Step 2. Add the Sign in with Apple capability

In Xcode, select your project and navigate to Targets > Signing & Capabilities. Click Capability and double-click Sign in with Apple.

Apple Sign-In does not require callback URL routing in your app delegate.

Implementing the Facebook Login native SDK

To enable Facebook Login in your React Native app, complete the steps in this section on the platforms you want to support:

Configuring Facebook Login on Android

To add and configure the Facebook Login SDK on Android, complete the following steps:

Step 1. Add the Facebook Login dependency

Add the following to the dependencies block in your android/app/build.gradle file:

Adding the Facebook Login dependency on Android
dependencies {
    implementation("com.facebook.android:facebook-login:18.0.3")
}

Step 2. Register your Android app with Facebook

Follow the Facebook Login for Android Quickstart to register your app and generate key hashes, then continue below.

Step 3. Add Facebook configuration to your Android app

  1. In android/app/src/main/res/values/strings.xml, add your Facebook app credentials:

    Adding Facebook credentials to strings.xml
    <resources>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
    <string name="fb_login_protocol_scheme">fbYOUR_FACEBOOK_APP_ID</string>
    <string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>
</resources>

    Replace the placeholders with values from your app in the Meta for Developers console.

    YOUR_FACEBOOK_APP_ID

    Click the App ID label in the header bar of the Meta Developer site for your app to copy the value.

    Replace both YOUR_FACEBOOK_APP_ID placeholders in the snippet above, but keep the fb prefix on the second value.

    YOUR_CLIENT_TOKEN

    In the Meta Developer site, navigate to App Settings > Advanced > Security, and copy the Client token value.

    Do not use the App secret value found in App settings > Basic in your client applications.

  2. In android/app/src/main/AndroidManifest.xml, add the following inside the <application> element:

    Registering the Facebook SDK in AndroidManifest.xml
    <meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id" />
<meta-data
    android:name="com.facebook.sdk.ClientToken"
    android:value="@string/facebook_client_token" />

<activity android:name="com.facebook.CustomTabActivity" android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="@string/fb_login_protocol_scheme"/>
    </intent-filter>
</activity>

Configuring Facebook Login on iOS

To add and configure the Facebook Login SDK on iOS, complete the following steps:

Step 1. Add the Facebook Login pod

Add the following to your ios/Podfile:

pod 'PingExternalIdPFacebook'

Run pod install after updating your Podfile.

Step 2. Register your iOS app with Facebook

Follow the Facebook Login for iOS Quickstart to register your app bundle ID, then continue below.

Step 3. Add Facebook configuration to your iOS app

  1. In ios/<YourApp>/Info.plist, add the following keys with values from your app in the Meta for Developers console:

    Adding Facebook credentials to Info.plist on iOS
    <key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_DISPLAY_NAME</string>

  2. Add the Facebook URL scheme to CFBundleURLTypes in Info.plist. The scheme is fb followed by your Facebook App ID:

    Registering the Facebook URL scheme in Info.plist
    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>facebook-login</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>

Step 4. Route Facebook callback URLs

In your React Native app’s iOS app delegate, route incoming Facebook callback URLs to the native handler:

Routing Facebook callback URLs in the iOS app delegate
#if canImport(PingExternalIdPFacebook)
import PingExternalIdPFacebook
#endif

func application(
  _ application: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  var handled = false
#if canImport(PingExternalIdPFacebook)
  handled = FacebookHandler.handleOpenURL(application, url: url, options: options)
#endif
  return handled
}

Implementing the Sign in with Google native SDK

To enable Sign in with Google in your React Native app, complete the steps in this section on the platforms you want to support:

Configuring Sign in with Google on Android

To add and configure the Google Sign-In SDK on Android, complete the following steps:

Step 1. Add the Google Sign-In dependencies

Add the following to the dependencies block in your android/app/build.gradle file:

Adding the Google Sign-In dependencies on Android
dependencies {
    // Google Sign-In
    implementation("com.google.android.libraries.identity.googleid:googleid:1.1.1")

    // Required for devices running Android 13 and earlier
    implementation("androidx.credentials:credentials-play-services-auth:1.5.0")
}

If your app only targets Android 14 and later you can omit the credentials-play-services-auth dependency.

Step 2. Create Android-specific credentials in Google Cloud

The native Google SDK requires an Android-specific OAuth 2.0 client ID so it can authenticate users directly from the app.

This is separate from the web application client you created in Configuring social sign-on in Advanced Identity Cloud or PingAM for your Advanced Identity Cloud tenant or PingAM server.

  1. In a browser, navigate to the Google API Dashboard.

  2. In the left navigation, click Credentials.

  3. Click CREATE CREDENTIALS and select OAuth client ID.

  4. In the Application Type drop-down list, select Android.

  5. Enter a name, your app’s package name, and the SHA-1 fingerprint of your signing certificate.

    Run the following command to retrieve your SHA-1 fingerprint:

    keytool -keystore path-to-keystore -list -v

  6. Click Create.

You do not need to add this client ID to your app or server configuration. Associating the certificate fingerprint with your package name is enough for Google to recognise the app.

Configuring Sign in with Google on iOS

To add and configure the Google Sign-In SDK on iOS, complete the following steps:

Step 1. Add the Google Sign-In pod

Add the following to your ios/Podfile:

pod 'PingExternalIdPGoogle'

Run pod install after updating your Podfile.

Step 2. Create an iOS-specific client profile in Google Cloud

The native Google SDK requires an iOS-specific OAuth 2.0 client ID so it can authenticate users directly from the app.

This is separate from the web application client you created in Configuring social sign-on in Advanced Identity Cloud or PingAM for your Advanced Identity Cloud tenant or PingAM server.

In the next step you will configure your app with both client IDs. The iOS-specific client authenticates the user, and the server’s web application client ID is included in the token audience so that Advanced Identity Cloud or PingAM can verify the result.

  1. In a browser, navigate to the Google API Dashboard.

  2. In the left navigation, click Credentials.

  3. Click CREATE CREDENTIALS and select OAuth client ID.

  4. In the Application Type drop-down list, select iOS.

  5. Enter a name and your app’s bundle ID, then click Create.

  6. Open the client you just created and note the Client ID and iOS URL scheme values.

Step 3. Configure your iOS app

  1. In your ios/<YourApp>/Info.plist, add the following keys using the values from the client you created:

    Adding Google Sign-In client IDs to Info.plist
    <key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>

<key>GIDServerClientID</key>
<string>YOUR_WEB_APPLICATION_CLIENT_ID</string>

    • GIDClientID is the client ID of the iOS-specific client you just created.

    • GIDServerClientID is the client ID of the web application client your Advanced Identity Cloud tenant or PingAM server uses to communicate with Google.

  2. Add the iOS URL scheme from your iOS client to CFBundleURLTypes in Info.plist:

    Registering the Google Sign-In URL scheme in Info.plist
    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>google-signin</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_IOS_REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>

    For example, if your iOS client ID is 1234567890-abcdefghijklmnop.apps.googleusercontent.com, the reversed client ID is com.googleusercontent.apps.1234567890-abcdefghijklmnop. You can also copy this value directly from the REVERSED_CLIENT_ID key in your downloaded GoogleService-Info.plist.

Step 4. Route Google callback URLs

In your React Native app’s iOS app delegate, route incoming Google callback URLs to the native handler. Add the following to your AppDelegate:

Routing Google callback URLs in the iOS app delegate
#if canImport(PingExternalIdPGoogle)
import PingExternalIdPGoogle
#endif

func application(
  _ application: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  var handled = false
#if canImport(PingExternalIdPGoogle)
  handled = GoogleHandler.handleOpenURL(application, url: url, options: options) || handled
#endif
  return handled
}