Step 3. Configure connection properties

There are multiple projects in this tutorial that require connection configuration:

API server app: A backend REST API server that uses a confidential OAuth 2.0 client to contact the authorization server. The API server handles storage and retrieval of your personal "Todo" items.
Client React Native app: The front-end client app, written in React Native, that handles the UI and authentication journeys.
Android and iOS native apps: Mobile-specific apps that implement either the Ping SDK for Android or Ping SDK for iOS, to act as a bridge for the React Native app to leverage native functions on each platform.

Configure the API server app

We provide a sample Node.js backend REST API server app that uses a confidential OAuth 2.0 client to contact the authorization server.

The API server handles storage and retrieval of your personal "Todo" items for this tutorial.

In a terminal window, navigate to /sdk-sample-apps/javascript
Install the Node dependencies using npm:
```
npm install
```
Copy the .env.example file in the sdk-sample-apps/javascript/todo-api folder and save it with the name .env within this same directory.
Update the .env file with the details of your server, the port on which to run the API backend server, and details of the confidential client you created earlier:
Example API server sdk-sample-apps/todo-api/.env file
```
SERVER_TYPE='AIC'
SERVER_URL=https://openam-forgerock-sdks.forgeblocks.com/am
PORT=9443
REALM_PATH='ALPHA'
REST_OAUTH_CLIENT=sdkConfidentialClient
REST_OAUTH_SECRET=ch4ng3it!
```
Run the API backend server:
```
npm run todo-api
```
The API server starts listening on the PORT value you configured: Node server listening on port: 9443.

Configure the React Native client app

The React Native client app handles communication with the backend API server you configured and ran in the previous step. It needs to know the IP address and port number where the API app is running, so that it can store and retrieve the user’s todo items.

Edit the .env.js file in the sdk-sample-apps/reactnative/reactnative-todo folder to add the details of the API backend server you ran in the previous step:

Example client sdk-sample-apps/reactnative/reactnative-todo/.env.js file

/**
 * Avoid trailing slashes in the URL string values below
 */
const API_PORT = 9443;
const API_BASE_URL = 'http://192.168.0.35';
const DEBUGGER_OFF = false;

export {API_BASE_URL, API_PORT, DEBUGGER_OFF};

Use your local IP address rather than a loopback or localhost address to have maximum compatibility when running on a simulator.

How do I find my local IP address?

Complete the following steps to obtain your local IP address:

Windows
macOS

In a command prompt, enter ipconfig /all

Windows displays information about the network adapters in your computer.

Show example output

Windows IP Configuration
   Host Name . . . . . . . . . . . . : Windows
   Primary Dns Suffix  . . . . . . . :
   Node Type . . . . . . . . . . . . : Hybrid
   IP Routing Enabled. . . . . . . . : No
   WINS Proxy Enabled. . . . . . . . : No

Ethernet adapter Ethernet:
   Media State . . . . . . . . . . . : Media disconnected
   Description . . . . . . . . . . . : E3100G 2.5 Gigabit Ethernet Controller
   Physical Address. . . . . . . . . : 74-34-E2-2b-30-44
   DHCP Enabled. . . . . . . . . . . : Yes
   Autoconfiguration Enabled . . . . : Yes

Wireless LAN adapter Local Area Connection* 1:
   Media State . . . . . . . . . . . : Media disconnected
   Description . . . . . . . . . . . : Microsoft Wi-Fi Direct Virtual Adapter
   Physical Address. . . . . . . . . : 67-6C-EB-B3-46-82
   DHCP Enabled. . . . . . . . . . . : Yes
   Autoconfiguration Enabled . . . . : Yes

Wireless LAN adapter Wi-Fi:
   Description . . . . . . . . . . . : Wireless Network Adapter (210NGW)
   Physical Address. . . . . . . . . : 87-6C-DF-C9-17-90
   DHCP Enabled. . . . . . . . . . . : Yes
   Autoconfiguration Enabled . . . . : Yes
   IPv6 Address. . . . . . . . . . . : 2406:3d08:2f61:1400::2d47
   Lease Obtained. . . . . . . . . . : January 27, 2025 11:09:26 AM
   Lease Expires . . . . . . . . . . : January 28, 2025 6:09:26 AM
   IPv6 Address. . . . . . . . . . . : 2406:3d08:2f61:1400::2d47
   Temporary IPv6 Address. . . . . . : 2604:2b08:2f93:2600:b479:b5b4:25ff:acc8
   Link-local IPv6 Address . . . . . : fe54::d9e5:16ff:d9d4:e22%10
   IPv4 Address. . . . . . . . . . . : 192.168.0.35
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Lease Obtained. . . . . . . . . . : January 27, 2025 11:09:24 AM
   Lease Expires . . . . . . . . . . : January 29, 2025 11:09:26 AM
   Default Gateway . . . . . . . . . : fe80::bb8:c0ee:fea5:8c58%10
                                       192.168.0.1
   DHCP Server . . . . . . . . . . . : 192.168.0.1
   DHCPv6 IAID . . . . . . . . . . . : 893252287
   DHCPv6 Client DUID. . . . . . . . : 00-01-00-01-1b-87-59-2D-74-86-C4-3C-30-88
   DNS Servers . . . . . . . . . . . : 2025:4e8:0:230b::11
                                       2025:4e8:0:230c::11
                                       8.8.8.8
   NetBIOS over Tcpip. . . . . . . . : Enabled

Ignoring adapters where the Media State property is listed as Media Disconnected, locate the ethernet or wireless adapter that connects to your router.
Make a note of the IPv4 Address field.

The address will often start with 192.168., 10.0., or 172.16., which are the first digits of the commonly used reserved private IPv4 addresses.

In this case, the local IPv4 IP address is 192.168.0.35.

You will use this address to access your custom UI app for this tutorial.

In a terminal window, enter ifconfig

macOS displays information about the network interfaces in your computer.

Show example output

lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384
	options=1203<RXCSUM,TXCSUM,TXSTATUS,SW_TIMESTAMP>
	inet 127.0.0.1 netmask 0xff000000
	inet6 ::1 prefixlen 128
	inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1
	nd6 options=201<PERFORMNUD,DAD>
gif0: flags=8010<POINTOPOINT,MULTICAST> mtu 1280
stf0: flags=0<> mtu 1280
anpi0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether 22:d0:cb:e5:fd:09
	media: none
	status: inactive
en3: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=404<VLAN_MTU,CHANNEL_IO>
	ether f8:e4:3b:ad:67:c5
	inet6 fe80::ca4:9a6c:f835:80c9%en8 prefixlen 64 secured scopeid 0x7
	inet6 fd84:bb80:dd60:23b3:855:171f:3651:b7de prefixlen 64 autoconf secured
	inet 192.168.0.35 netmask 0xffffff00 broadcast 192.168.0.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect (1000baseT <full-duplex>)
	status: active
en1: flags=8963<UP,BROADCAST,SMART,RUNNING,PROMISC,SIMPLEX,MULTICAST> mtu 1500
	options=460<TSO4,TSO6,CHANNEL_IO>
	ether 36:e5:80:6e:d1:40
	media: autoselect <full-duplex>
	status: inactive
en2: flags=8963<UP,BROADCAST,SMART,RUNNING,PROMISC,SIMPLEX,MULTICAST> mtu 1500
	options=460<TSO4,TSO6,CHANNEL_IO>
	ether 36:e5:80:6e:d1:44
	media: autoselect <full-duplex>
	status: inactive
bridge0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=63<RXCSUM,TXCSUM,TSO4,TSO6>
	ether 36:e5:80:6e:d1:40
	Configuration:
		id 0:0:0:0:0:0 priority 0 hellotime 0 fwddelay 0
		maxage 0 holdcnt 0 proto stp maxaddr 100 timeout 1200
		root id 0:0:0:0:0:0 priority 0 ifcost 0 port 0
		ipfilter disabled flags 0x0
	member: en1 flags=3<LEARNING,DISCOVER>
	        ifmaxaddr 0 port 11 priority 0 path cost 0
	member: en2 flags=3<LEARNING,DISCOVER>
	        ifmaxaddr 0 port 12 priority 0 path cost 0
	member: en3 flags=3<LEARNING,DISCOVER>
	        ifmaxaddr 0 port 13 priority 0 path cost 0
	media: <unknown type>
	status: inactive
ap1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=6460<TSO4,TSO6,CHANNEL_IO,PARTIAL_CSUM,ZEROINVERT_CSUM>
	ether d6:0f:2c:90:e9:b6
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect (none)
	status: inactive
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=6460<TSO4,TSO6,CHANNEL_IO,PARTIAL_CSUM,ZEROINVERT_CSUM>
	ether c6:2a:06:29:ee:28
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: inactive
utun0: flags=8051<UP,POINTOPOINT,RUNNING,MULTICAST> mtu 1500
	inet6 fe80::a19f:5de6:a4ca:fd90%utun0 prefixlen 64 scopeid 0x13
	nd6 options=201<PERFORMNUD,DAD>

Looking at interfaces where the status property is listed as active, locate the ethernet or wireless interface that connects to your router.

Often the prefix of the interface is en.
Make a note of the IPv4 address in the inet field.

The address will often start with 192.168., 10.0., or 172.16., which are the first digits of the commonly used reserved private IPv4 addresses.

In this case, the local IPv4 IP address is 192.168.0.35.

You will use this address to access your custom UI app for this tutorial.

Using a loopback or localhost IP address can sometimes resolve as the mobile you are running an app on, rather than the host machine.

Configure Android and iOS

The native SDKs for Android and iOS apps require configuration so that they can connect to your public OAuth 2.0 client, and navigate through authentication journeys.

Configure the Ping SDK for Android

To configure the Ping SDK for Android:

In Android Studio, open the sdk-sample-apps/reactnative/reactnative-todo/android folder, from the sample repo you cloned earlier.

Open the /app/src/main/java/com/reactnativetodo/Configuration.kt file, and locate the Configuration class:

The Configuration class in /app/src/main/java/com/reactnativetodo/Configuration.kt

data class Configuration(
    /* The main authentication journey name.  */
    val mainAuthenticationJourney: String = "[YOUR_MAIN_AUTHENTICATION_JOURNEY_NAME]",

    /* The URL of the authentication server. */
    val amURL: String = "[YOUR_AM_URL]",

    /* The name of the cookie used for authentication. */
    val cookieName: String = "[COOKIE NAME]",

    /* The realm used for authentication. */
    val realm: String = "[REALM NAME]",

    /* The OAuth client ID. */
    val oauthClientId: String = "[OAUTH_CLIENT_ID]",

    /* The OAuth redirect URI. */
    val oauthRedirectURI: String = "[OAUTH_REDIRECT_URI]",

    /* The OAuth scopes. */
    val oauthScopes: String = "[OAUTH_SCOPES]",

    /* The discovery endpoint for OAuth configuration. */
    val discoveryEndpoint: String = "[DISCOVERY_ENDPOINT]",

    val registrationServiceName: String = "Registration",
)

Replace the placeholder text strings with the values from your environment:

mainAuthenticationJourney

The name of the authentication journey you created earlier.

For example, sdkUsernamePasswordJourney

amURL

The base URL of the PingAM component of your deployment, including the deployment path.

PingAM example:: https://openam.example.com:8443/openam
PingOne Advanced Identity Cloud example:: https://openam-forgerock-sdks.forgeblocks.com/am

cookieName

The name of the cookie your PingOne Advanced Identity Cloud tenant uses to store SSO tokens in client browsers.

How do I find my PingOne Advanced Identity Cloud cookie name?

To locate the cookie name in an PingOne Advanced Identity Cloud tenant:

Navigate to Tenant settings > Global Settings
Copy the value of the Cookie property.

For example, ch15fefc5407912

realm

The name of the realm in which the OAuth 2.0 clients and authentication journeys are configured.

Usually, root for AM and alpha or bravo for Advanced Identity Cloud.

oauthClientId

The client ID of the public OAuth 2.0 application.

For example, sdkPublicClient

oauthRedirectURI

The redirect_uri as configured in the OAuth 2.0 client profile.

This value must exactly match a value configured in your OAuth 2.0 client.

For example, https://com.example.reactnative.todo/callback

oauthScopes

The scopes you added to your OAuth 2.0 application.

For example, openid profile email address

discoveryEndpoint

The .well-known endpoint from your server.

How do I find my PingOne Advanced Identity Cloud .well-known URL?

You can view the .well-known endpoint for an OAuth 2.0 client in the PingOne Advanced Identity Cloud admin console:

Log in to your PingOne Advanced Identity Cloud administration console.
Click Applications, and then select the OAuth 2.0 client you created earlier. For example, sdkPublicClient.
On the Sign On tab, in the Client Credentials section, copy the Discovery URI value.

For example, https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration

If you are using a custom domain, your .well-known is formed as follows:

https://<custom-domain-fqdn>/.well-known/openid-configuration

Learn more in Access OIDC configuration discovery endpoint.

The result resembles the following:

Example Configuration class values

data class Configuration(
    /* The main authentication journey name.  */
    val mainAuthenticationJourney: String = "sdkUsernamePasswordJourney",

    /* The URL of the authentication server. */
    val amURL: String = "https://openam-forgerock-sdks.forgeblocks.com/am",

    /* The name of the cookie used for authentication. */
    val cookieName: String = "iPlanetDirectoryPro",

    /* The realm used for authentication. */
    val realm: String = "alpha",

    /* The OAuth client ID. */
    val oauthClientId: String = "sdkNativeClient",

    /* The OAuth redirect URI. */
    val oauthRedirectURI: String = "https://com.example.reactnative.todo/callback",

    /* The OAuth scopes. */
    val oauthScopes: String = "openid profile email address",

    /* The discovery endpoint for OAuth configuration. */
    val discoveryEndpoint: String = "https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/realms/alpha/.well-known/openid-configuration",

    val registrationServiceName: String = "Registration",
)

Save your changes.

Configure the Ping SDK for iOS

To configure the Ping SDK for iOS:

In XCode, open the sdk-sample-apps/reactnative/reactnative-todo/ios/reactnativetodo.xcworkspace file, from the sample repo you cloned earlier.

Open the reactnativetodo/reactnativetodo/Configuration Swift file, and locate the init method:

The init method in reactnativetodo/reactnativetodo/Configuration

public init(
    mainAuthenticationJourney: String = "[YOUR_MAIN_AUTHENTICATION_JOURNEY_NAME]",
    amURL: String = "[YOUR_AM_URL]",
    cookieName: String = "[COOKIE NAME]",
    realm: String = "[REALM NAME]",
    oauthClientId: String = "[OAUTH_CLIENT_ID]",
    oauthRedirectURI: String = "[OAUTH_REDIRECT_URI]",
    oauthScopes: String = "[OAUTH_SCOPES]",
    discoveryEndpoint: String = "[DISCOVERY_ENDPOINT]",
    registrationServiceId: String = "Registration"
)

Replace the placeholder text strings with the values from your environment:

mainAuthenticationJourney

The name of the authentication journey you created earlier.

For example, sdkUsernamePasswordJourney

amURL

The base URL of the PingAM component of your deployment, including the deployment path.

PingAM example:: https://openam.example.com:8443/openam
PingOne Advanced Identity Cloud example:: https://openam-forgerock-sdks.forgeblocks.com/am

cookieName

The name of the cookie your PingOne Advanced Identity Cloud tenant uses to store SSO tokens in client browsers.

How do I find my PingOne Advanced Identity Cloud cookie name?

To locate the cookie name in an PingOne Advanced Identity Cloud tenant:

Navigate to Tenant settings > Global Settings
Copy the value of the Cookie property.

For example, ch15fefc5407912

realm

The name of the realm in which the OAuth 2.0 clients and authentication journeys are configured.

Usually, root for AM and alpha or bravo for Advanced Identity Cloud.

oauthClientId

The client ID of the public OAuth 2.0 application.

For example, sdkPublicClient

oauthRedirectURI

The redirect_uri as configured in the OAuth 2.0 client profile.

This value must exactly match a value configured in your OAuth 2.0 client.

For example, https://com.example.reactnative.todo/callback

oauthScopes

The scopes you added to your OAuth 2.0 application.

For example, openid profile email address

discoveryEndpoint

The .well-known endpoint from your server.

How do I find my PingOne Advanced Identity Cloud .well-known URL?

You can view the .well-known endpoint for an OAuth 2.0 client in the PingOne Advanced Identity Cloud admin console:

Log in to your PingOne Advanced Identity Cloud administration console.
Click Applications, and then select the OAuth 2.0 client you created earlier. For example, sdkPublicClient.
On the Sign On tab, in the Client Credentials section, copy the Discovery URI value.

For example, https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration

If you are using a custom domain, your .well-known is formed as follows:

https://<custom-domain-fqdn>/.well-known/openid-configuration

Learn more in Access OIDC configuration discovery endpoint.

The result resembles the following:

Example Configuration class values

public init(
    mainAuthenticationJourney: String = "sdkUsernamePasswordJourney",
    amURL: String = "https://openam-forgerock-sdks.forgeblocks.com/am",
    cookieName: String = "iPlanetDirectoryPro",
    realm: String = "alpha",
    oauthClientId: String = "sdkNativeClient",
    oauthRedirectURI: String = "https://com.example.reactnative.todo/callback",
    oauthScopes: String = "openid profile email address",
    discoveryEndpoint: String = "https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/realms/alpha/.well-known/openid-configuration",
    registrationServiceId: String = "Registration"
)

Save your changes.

Ping SDKs

Step 3. Configure connection properties

Configure the API server app

Configure the React Native client app

Configure Android and iOS

Configure the Ping SDK for Android

Configure the Ping SDK for iOS