--- title: Before you begin description: You need to download the SDK sample apps repo, which contains the projects you will use for this tutorial. component: sdks version: latest page_id: sdks:oidc:use-cases/custom-login-ui/00-before-you-begin canonical_url: https://docs.pingidentity.com/sdks/latest/oidc/use-cases/custom-login-ui/00-before-you-begin.html revdate: Thu, 20 Feb 2025 10:30:37 +0100 keywords: ["OAuth 2.0", "OpenID Connect", "SDK"] section_ids: step_1_downloading_the_samples: Step 1. Downloading the samples step_2_installing_the_dependencies: Step 2. Installing the dependencies step_3_hosting_the_sample_apps: Step 3. Hosting the sample apps obtaining_your_local_ip_address: Obtaining your local IP address creating_a_dns_alias_for_the_javascript_client_application: Creating a DNS alias for the JavaScript client application --- # 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. 1. In a web browser, navigate to the [SDK Sample Apps repository](https://github.com/ForgeRock/sdk-sample-apps). 2. Download the source code using one of the following methods: * Download a ZIP file 1. Click **Code**, and then click **Download ZIP**. 2. Extract the contents of the downloaded ZIP file to a suitable location. * Use a Git-compatible tool to clone the repo locally 1. Click **Code**, and then copy the HTTPS URL. 2. Use the URL to clone the repository to a suitable location. For example, from the command-line you could run: ```shell 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 (ForgeRock) SDK for JavaScript. 1. In a terminal window, navigate to the `sdk-sample-apps/javascript` folder. 2. To install the required packages, enter the following: ```shell 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 1. In a command prompt, enter `ipconfig /all` Windows displays information about the network adapters in your computer. > **Collapse: 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 > ``` 2. Ignoring adapters where the **Media State** property is listed as `Media Disconnected`, locate the ethernet or wireless adapter that connects to your router. 3. 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. 1) In a terminal window, enter `ifconfig` macOS displays information about the network interfaces in your computer. > **Collapse: Show example output** > > ``` > lo0: flags=8049 mtu 16384 > options=1203 > inet 127.0.0.1 netmask 0xff000000 > inet6 ::1 prefixlen 128 > inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1 > nd6 options=201 > gif0: flags=8010 mtu 1280 > stf0: flags=0<> mtu 1280 > anpi0: flags=8863 mtu 1500 > options=400 > ether 22:d0:cb:e5:fd:09 > media: none > status: inactive > en3: flags=8863 mtu 1500 > options=404 > 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 > media: autoselect (1000baseT ) > status: active > en1: flags=8963 mtu 1500 > options=460 > ether 36:e5:80:6e:d1:40 > media: autoselect > status: inactive > en2: flags=8963 mtu 1500 > options=460 > ether 36:e5:80:6e:d1:44 > media: autoselect > status: inactive > bridge0: flags=8863 mtu 1500 > options=63 > 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 > ifmaxaddr 0 port 11 priority 0 path cost 0 > member: en2 flags=3 > ifmaxaddr 0 port 12 priority 0 path cost 0 > member: en3 flags=3 > ifmaxaddr 0 port 13 priority 0 path cost 0 > media: > status: inactive > ap1: flags=8863 mtu 1500 > options=6460 > ether d6:0f:2c:90:e9:b6 > nd6 options=201 > media: autoselect (none) > status: inactive > en0: flags=8863 mtu 1500 > options=6460 > ether c6:2a:06:29:ee:28 > nd6 options=201 > media: autoselect > status: inactive > utun0: flags=8051 mtu 1500 > inet6 fe80::a19f:5de6:a4ca:fd90%utun0 prefixlen 64 scopeid 0x13 > nd6 options=201 > ``` 2) 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`. 3) 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 1. As an administrator, in a text editor open the `%SystemRoot%\system32\drivers\etc\hosts` file. 2. Add the following: `127.0.0.1 sdkapp.example.com` 3. Close and save the file. 1) As an administrator, in a text editor open the `/etc/hosts` file. 2) Add the following: `127.0.0.1 sdkapp.example.com` 3) Close and save the file.