---
title: Part 2. Running the JavaScript custom UI sample app
description: In this section you configure the embedded login sample JavaScript app to act as your custom UI.
component: orchsdks
page_id: orchsdks:oidc:use-cases/custom-login-ui/02-run-the-custom-ui-app
canonical_url: https://developer.pingidentity.com/orchsdks/oidc/use-cases/custom-login-ui/02-run-the-custom-ui-app.html
revdate: Thu, 20 Feb 2025 10:30:37 +0100
keywords: ["OAuth 2.0", "OpenID Connect", "SDK"]
---

# Part 2. Running the JavaScript custom UI sample app

In this section you configure the **embedded login** sample JavaScript app to act as your custom UI.

This app walks your users through the authentication tree to obtain a session, which it returns to your client app via the authentication server.

1. In a JavaScript-capable IDE, open the `sdk-sample-apps` folder you downloaded earlier.

2. Navigate to the `/javascript/embedded-login` folder, and open the `.env.example` file.

3. Edit the values in the file to match your environment:

   1. In **SERVER\_URL**, enter 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`

   2. In **REALM\_PATH**, enter the realm that contains the authentication journey you will use.

      * PingAM example:

        `root`

      * PingOne Advanced Identity Cloud example:

        `alpha`

   3. In **TREE**, enter the name of the authentication journey to sign on end users.

      Note that the sample custom UI app only supports a limited number of callbacks by default, so choose a simple authentication tree that authenticates with only username and password.

      For example, you can use the default `Login` authentication tree.

   |   |                                                                                                                                 |
   | - | ------------------------------------------------------------------------------------------------------------------------------- |
   |   | As the custom UI does not perform any OAuth 2.0 interactions you can leave the `SCOPE` and `WEB_OAUTH_CLIENT` properties blank. |

   The result will resemble the following:

   Example `.env.example` file

   ```text
   SERVER_URL=https://openam-docs-regular.forgeblocks.com/am
   REALM_PATH=alpha
   SCOPE=
   TIMEOUT=$TIMEOUT
   TREE=Login
   WEB_OAUTH_CLIENT=
   ```

4. Save the file as `.env` in the same folder.

5. Update the `webpack.config.js` file:

   1. Change the `port` value to `9443` so that it does not clash with the client sample app.

   2. Change the `host` value to `0.0.0.0`, so that the app is made available on your local IP address, rather than just `localhost`.

   The result resembles the following:

   ```none
   devServer: {
     port: 9443,
     host: '0.0.0.0',
     ...
   }
   ```

6. From the `/javascript` folder, run the embedded login custom UI app as follows:

   ```none
   cd javascript
   npm run start:embedded-login
   ```

   Webpack compiles the code and serves it on the local IP address of your computer.

7. In a browser, open the local IP address of your computer, with the port number you edited earlier.

   For example, `https://192.168.0.35:9443`

   |   |                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
   | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
   |   | Webpack outputs links to the locations it is serving in the console, that you can click or copy and paste into a browser.Look for the line that includes the text `On Your Network (IPv4)`:```text
   [webpack-dev-server] Project is running at:
   [webpack-dev-server] Loopback: https://localhost:9443/
   [webpack-dev-server] On Your Network (IPv4): https://192.168.0.35:9443/
   [webpack-dev-server] On Your Network (IPv6): https://[fe80::1]:9443/
   ``` |

8. As the custom UI sample app is running on a self-signed SSL certificate on your local IP address, your browser might display a warning message.

   You can ignore this warning for this tutorial:

   * In **Chrome**, click **Advanced** and then click **Proceed to 192.168.0.35 (unsafe)**.

   * In **Firefox**, click **Advanced** and then click **Accept the risk and continue**.

   * In **Safari**, click **Show Details** and then click **visit this website**.

   The custom UI app displays the first interactive node of the configured authentication journey:

   ![custom ui sample login](../../_images/custom-ui-sample-login.png)Figure 1. Custom UI app showing the first interactive node of the configured journey.

With the custom UI sample app running, and your server configured, you can now proceed to test the setup by using one of the OIDC sample apps as a client.