Step 4. Configure the sample

In this tutorial, you configure the custom UI sample from the ForgeRock JavaScript SDK to connect to the authentication tree/journey you created when setting up your server configuration.

Configuration properties define how the SDK connects to the ForgeRock Identity Platform. The custom UI sample requires the following configuration properties:

Property Description

Property	Description
`clientId`	The `client_id` of the OAuth 2.0 client profile to use.
`redirectUri`	The `redirect_uri` as configured in the OAuth 2.0 client profile.
`scope`	A space-separated list of scopes to request when performing an OAuth 2.0 authorization flow.
`serverConfig`	An interface for configuring how the SDK contacts the AM server. The interface contains `baseUrl` and `timeout`.
`serverConfig: {baseUrl}`	The base URL of the AM instance to connect to, including port and deployment path. For example, `https://openam-forgerock-sdks.forgeblocks.com/am/`.
`serverConfig: {timeout}`	A timeout, in milliseconds, for each request that communicates with AM. For example, for 30 seconds, specify `30000`.
`realmPath`	The realm or realm path in which the tree is configured. The default is the top-level realm; `root`).
`tree`	The name of the tree to use.

clientId

The client_id of the OAuth 2.0 client profile to use.

redirectUri

The redirect_uri as configured in the OAuth 2.0 client profile.

scope

A space-separated list of scopes to request when performing an OAuth 2.0 authorization flow.

serverConfig

An interface for configuring how the SDK contacts the AM server. The interface contains baseUrl and timeout.

serverConfig: {baseUrl}

The base URL of the AM instance to connect to, including port and deployment path. For example, https://openam-forgerock-sdks.forgeblocks.com/am/.

serverConfig: {timeout}

A timeout, in milliseconds, for each request that communicates with AM. For example, for 30 seconds, specify 30000.

realmPath

The realm or realm path in which the tree is configured. The default is the top-level realm; root).

tree

The name of the tree to use.

To configure the custom UI sample

In Terminal, open the forgerock-javascript-sdk project created earlier.
Navigate to samples > embedded-login, and open the src/main.js file.

In the main.js file, update the configuration settings as follows:

forgerock.Config.set({
  clientId: 'sdkPublicClient',
  redirectUri: 'https://sdkapp.example.com:8443/callback',
  scope: 'openid profile email address phone me.read',
  serverConfig: {
    baseUrl: https://openam-forgerock-sdks.forgeblocks.com/am/,
    timeout: '5000'
  },
  realmPath: alpha, // Self-managed AM: 'root', Cloud AM: 'alpha' or 'beta'.
  tree: '<Your_auth_tree>',
});

You will see these values are populated in the embedded login with process.env.VARIABLE_NAME.

You can choose to leverage the .env.example file in the folder by making a copy in the same directory called .env, and updating the values there. Alternatively, replace the values with your settings directly in the config object as above.

Example: Self-managed configuration

forgerock.Config.set({
  clientId: 'sdkPublicClient',
  redirectUri: 'https://sdkapp.example.com:8443/callback',
  scope: 'openid profile email address phone me.read',
  serverConfig: {
    baseUrl: 'https://openam.example.com:8443/openam',
    timeout: '5000'
  },
  realmPath: 'root',
  tree: 'sdkUsernamePasswordJourney',
});

Example: Cloud configuration

forgerock.Config.set({
  clientId: 'sdkPublicClient',
  redirectUri: 'https://sdkapp.example.com:8443/callback/',
  scope: 'openid profile email address phone',
  serverConfig: {
    baseUrl: 'https://openam-forgerock-sdks.forgeblocks.com/am/',
    timeout: '5000' // 90000 or less
  },
 realmPath: 'alpha',
 tree: 'sdkUsernamePasswordJourneyNew',
});

ForgeRock Developer Experience

Step 4. Configure the sample

To configure the custom UI sample