--- title: Before you begin description: Outlines the prerequisites and server configuration steps required before starting the JavaScript OIDC sign-on module tutorial for PingAM. component: orchsdks page_id: orchsdks:oidc:try-it-out/javascript/pingam/00_before-you-begin canonical_url: https://developer.pingidentity.com/orchsdks/oidc/try-it-out/javascript/pingam/00_before-you-begin.html revdate: Thu, 2 Apr 2026 11:33:37 +0100 keywords: ["OAuth 2.0", "OpenID Connect", "Tutorial", "Source Code", "Integration", "SDK", "JavaScript", "PingAM", "prerequisites"] section_ids: server_configuration: Server configuration --- # Before you begin [icon: circle-check, set=far]PingAM [icon: js, set=fab]JavaScript * **Prepare** * [Download](01_download-sample-repo.html) * [Configure](02_configure_connection_properties.html) * [Run](03_test_the_app.html) To successfully complete this tutorial refer to the prerequisites in this section. The tutorial also requires a configured PingAM server. * Node and NPM This sample requires a minimum Node.js version of `18`, and is tested on versions `18` and `20`. To get a supported version of Node.js, refer to the [Node.js download page](https://nodejs.org/en/download/). You will also need `npm` to build the code and run the samples. ## Server configuration This tutorial requires you to configure your PingAM server as follows: > **Collapse: Task 1. Create a demo user** > > The samples and tutorials in this documentation often require that you have an identity set up so that you can test authentication. > > To create a demo user in PingAM, follow these steps: > > 1. Log in to the PingAM admin UI as an administrator. > > 2. Navigate to [icon: address-card, set=fa]Identities, and then click [icon: plus, set=fa]Add Identity. > > 3. Enter the following details: > > * **User ID** = `demo` > > * **Password** = `Ch4ng3it!` > > * **Email Address** = `demo.user@example.com` > > 4. Click Create. > **Collapse: Task 2. Create an authentication tree** > > Authentication trees provide fine-grained authentication by allowing multiple paths and decision points throughout the authentication flow. Authentication trees are made up of nodes that define actions taken during authentication. > > Each node performs a single task, such as collecting a username or making a simple decision. Nodes can have multiple outcomes rather than just success or failure. > > To create a simple tree for use when testing the Orchestration SDKs, follow these steps: > > 1. Under Realm Overview, click Authentication Trees, then click Create Tree. > > 2. Enter a tree name, for example `sdkUsernamePasswordJourney`, and then click Create. > > The authentication tree designer appears, showing the Start entry point connected to the Failure exit point. > > 3. Drag the following nodes from the Components panel on the left side into the designer area: > > * **Page Node** > > * **Username Collector** > > * **Password Collector** > > * **Data Store Decision** > > 4. Drag and drop the **Username Collector** and **Password Collector** nodes onto the **Page Node**, so that they both appear on the same page when logging in. > > 5. Connect the nodes as follows: > > ![trees node login example](../../../../_images/trees-node-login-example.png)Figure 1. Example username and password authentication tree > > 6. Select the **Page Node**, and in the Properties pane, set the Stage property to `UsernamePassword`. > > | | | > | - | ---------------------------------------------------------------------------------------------------------- | > | | You can configure the node properties by selecting a node and altering properties in the right-hand panel. | > > One of the samples uses this specific value to determine the custom UI to display. > > 7. Click **Save**. > **Collapse: Task 3. Register a confidential OAuth 2.0 client** > > Confidential clients are able to store credentials securely and are commonly used for server-to-server communication. > > To register a *confidential* OAuth 2.0 client application for use with the SDKs in AM, follow these steps: > > 1. Log in to the PingAM admin UI as an administrator. > > 2. Navigate to [icon: list-alt, set=fa]Applications > OAuth 2.0 > Clients, and then click [icon: plus, set=fa]Add Client. > > 3. In Client ID, enter `sdkConfidentialClient`. > > 4. In Client Secret, enter a strong password and make a note of it for later use. > > For example, `5tr0ngP@S5w0rd!` > > | | | > | - | --------------------------------------------------------------------------------------------------------------------------------------------- | > | | The client secret is not available to view after this step.If you forget it, you must reset the secret and reconfigure any connected clients. | > > 5. In Default Scopes, enter `am-introspect-all-tokens`. > > PingAM creates the new OAuth 2.0 client and displays the properties for further configuration. > > 6. On the Advanced tab: > > 1. Enable the Implied consent property. > > 7. Click Save Changes. > **Collapse: Task 4. Register a public OAuth 2.0 client** > > Public clients do not use a client secret to obtain tokens because they are unable to keep them hidden. The Orchestration SDKs commonly use this type of client to obtain tokens, as they cannot guarantee safekeeping of the client credentials in a browser or on a mobile device. > > To register a *public* OAuth 2.0 client application for use with the SDKs in AM, follow these steps: > > 1. Log in to the PingAM admin UI as an administrator. > > 2. Navigate to [icon: list-alt, set=fa]Applications > OAuth 2.0 > Clients, and then click [icon: plus, set=fa]Add Client. > > 3. In Client ID, enter `sdkPublicClient`. > > 4. Leave Client secret empty. > > 5. In Redirection URIs, enter the following values: > > `https://localhost:8443/callback.html` > > | | | > | - | ---------------------------------------------------------------------- | > | | Also add any other domains where you will be hosting SDK applications. | > > 6. In Scopes, enter the following values: > > `openid profile email address` > > 7. Click Create. > > PingAM creates the new OAuth 2.0 client, and displays the properties for further configuration. > > 8. On the Core tab: > > 1. In Client type, select `Public`. > > 2. Disable Allow wildcard ports in redirect URIs. > > 3. Click Save Changes. > > 9. On the Advanced tab: > > 1. In Grant Types, enter the following values: > > ```none > Authorization Code > Refresh Token > ``` > > 2. In Token Endpoint Authentication Method, select `None`. > > 3. Enable the Implied consent property. > > 10. Click Save Changes. > **Collapse: Task 5. Configure the OAuth 2.0 provider** > > The provider specifies the supported OAuth 2.0 configuration options for a realm. > > To ensure the PingAM OAuth 2.0 provider service is configured for use with the Orchestration SDKs, follow these steps: > > 1. Log in to the PingAM admin UI as an administrator. > > 2. In the left panel, click [icon: plug, set=fa]Services. > > 3. In the list of services, click OAuth2 Provider. > > 4. On the Core tab, ensure Issue Refresh Tokens is enabled. > > 5. On the Consent tab, ensure Allow Clients to Skip Consent is enabled. > > 6. Click Save Changes. > **Collapse: Task 6. Configure CORS** > > [Cross-origin resource sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (CORS) lets user agents make cross-domain server requests. In PingAM, you can configure CORS to allow browsers from trusted domains to access PingAM protected resources. For example, you might want a custom web application running on your own domain to get an end-user's profile information using the PingAM REST API. > > The Orchestration SDK for JavaScript samples and tutorials all use `https://localhost:8443` as the host domain, which you should add to your CORS configuration. > > If you are using a different URL for hosting SDK applications, ensure you add them to the CORS configuration as accepted origin domains. > > To enable CORS in PingAM, and create a CORS filter to allow requests from your configured domain names, follow these steps: > > 1. Log in to the PingAM admin UI as an administrator. > > 2. Navigate to Configure > Global Services > CORS Service > Configuration, and set the Enable the CORS filter property to `true`. > > | | | > | - | -------------------------------------------------------------------------------------------------------------------- | > | | If this property is not enabled, CORS headers are not added to responses from PingAM, and CORS is disabled entirely. | > > 3. On the Secondary Configurations tab, click Add a Secondary Configuration. > > 4. In the Name field, enter `OrchSDK`. > > 5. in the Accepted Origins field, enter any DNS aliases you use for your SDK apps. > > This documentation assumes the following configuration: > > | Property | Values | > | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | > | `Accepted Origins` | `https://localhost:8443``http://localhost:9443` | > | `Accepted Methods` | `GET``POST` | > | `Accepted Headers` | `accept-api-version``x-requested-with``content-type``authorization``if-match``x-requested-platform``iPlanetDirectoryPro` \[[1](#_footnotedef_1 "View footnote.")]`ch15fefc5407912` \[[2](#_footnotedef_2 "View footnote.")]***[1](#_footnoteref_1). Cookie name value in PingAM servers.[2](#_footnoteref_2). In PingOne Advanced Identity Cloud tenants, go to **Tenant Settings > Global Settings > Cookie** to find this dynamic cookie name value. | > > 6. Click Create. > > PingAM displays the configuration of your new CORS filter. > > 7. On the CORS filter configuration page: > > 1. Ensure Enable the CORS filter is enabled. > > 2. Set the Max Age property to `600` > > 3. Ensure Allow Credentials is enabled. > > 8. Click Save Changes.