Before you begin

Step 1. Downloading the samples

You need to download the SDK sample apps repo, which contains the projects you will use for this tutorial.

In a web browser, navigate to the SDK Sample Apps repository.
Download the source code using one of the following methods:
Download a ZIP file
Click Code, and then click Download ZIP.

Extract the contents of the downloaded ZIP file to a suitable location.
Use a Git-compatible tool to clone the repo locally
Click Code, and then copy the HTTPS URL.

Use the URL to clone the repository to a suitable location.

For example, from the command-line you could run:

git clone https://github.com/ForgeRock/sdk-sample-apps.git

The result of these steps is a local folder named sdk-sample-apps.

Step 2. Installing the dependencies

In the following procedure, you install the required modules and dependencies, including the Ping SDK for JavaScript.

In a terminal window, navigate to the sdk-sample-apps/javascript folder.
To install the required packages, enter the following:
```
npm install
```
The npm tool downloads the required packages, and places them inside a node_modules folder.

Step 3. Hosting the sample apps

In a production scenario your custom login UI app would have its own fully-qualified domain name that your Android, iOS, and JavaScript clients could all connect to.

For simplicity, in this tutorial you will serve your custom login UI app from the local IP address of your host computer.

Using the local IP of your host computer means Android and iOS apps running on a simulator can resolve the address, and also JavaScript apps running locally.

Obtaining your 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.

Creating a DNS alias for the JavaScript client application

You should assign a DNS alias to your localhost address to help differentiate the client application from the custom UI application during this tutorial.

You can choose whatever host name you prefer for your client application. This tutorial uses sdkapp.example.com.

Complete the following steps to configure a DNS alias for your local IP address:

Windows
macOS

As an administrator, in a text editor open the %SystemRoot%\system32\drivers\etc\hosts file.
Add the following:

127.0.0.1 sdkapp.example.com
Close and save the file.

As an administrator, in a text editor open the /etc/hosts file.
Add the following:

127.0.0.1 sdkapp.example.com
Close and save the file.

Ping SDKs

Before you begin

Step 1. Downloading the samples

Step 2. Installing the dependencies

Step 3. Hosting the sample apps

Obtaining your local IP address

Creating a DNS alias for the JavaScript client application