--- title: Step 2. Configure connection properties description: Explains how to configure the connection properties in the sample app for the JavaScript OIDC sign-on module tutorial with PingOne. component: orchsdks page_id: orchsdks:oidc:try-it-out/javascript/pingone/02_configure_connection_properties canonical_url: https://developer.pingidentity.com/orchsdks/oidc/try-it-out/javascript/pingone/02_configure_connection_properties.html revdate: Thu, 2 Apr 2026 11:33:37 +0100 keywords: ["OAuth 2.0", "OpenID Connect", "Tutorial", "Source Code", "Integration", "SDK", "JavaScript", "PingOne", "connection properties"] section_ids: react-env: Configure the ReactJS client app react-api-server-env: Configure the API server app --- # Step 2. Configure connection properties [icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript * [Prepare](00_before-you-begin.html) * [Download](01_download-sample-repo.html) * **Configure** * [Run](03_test_the_app.html) There are two projects in this tutorial that require configuration: * [Client ReactJS app](#react-env) The front-end client app, written in ReactJS, that handles the UI and authentication journeys. * [Backend API server](#react-api-server-env) A backend REST API server that uses a confidential OAuth 2.0 client to contact the authorization server. The API server handles storage and retrieval of your personal "Todo" items. ## Configure the ReactJS client app 1. In the IDE of your choice, open the `sdk-sample-apps` folder you cloned previously. 2. Copy the `.env.example` file in the `sdk-sample-apps/javascript/reactjs-todo-oidc` folder and save it with the name `.env` within this same directory. Example client `sdk-sample-apps/javascript/reactjs-todo-oidc/.env` file ```properties WEB_OAUTH_CLIENT= WELLKNOWN_URL= SCOPE= #SERVER - 'PINGAM' or 'PINGONE' SERVER= API_URL=http://localhost:9443 PORT=8443 DEBUGGER_OFF=true DEVELOPMENT=true ``` 3. Update the configuration block with the details of your server environment. * *WEB\_OAUTH\_CLIENT* The client ID of the public OAuth 2.0 application in PingOne. For example, `6c7eb89a-66e9-ab12-cd34-eeaf795650b2` * *WELLKNOWN\_URL* The `.well-known` endpoint from your server. > **Collapse: How do I find my PingOne .well-known URL?** > > To find the `.well-known` endpoint for an OAuth 2.0 client in PingOne: > > 1. Log in to your PingOne administration console. > > 2. Go to **Applications > Applications**, and then select your OAuth 2.0 client. > > For example, sdkPublicClient. > > 3. On the **Overview** tab, expand the **Connection Details** section, and then copy the **OIDC Discovery Endpoint** value. > > ![Locating the .well-known URL in a PingOne client profile.](../../../../_images/p1-client-well-known.png) For example, `https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration` * *SCOPE* The scopes you added to your public OAuth 2.0 application. Scopes should be space-separated, and the entire value should be enclosed in single-quotes. For example, `'openid profile email phone revoke'` * *SERVER* Enter `'PINGONE'` for PingOne servers. * *API\_URL* The URL and port number on which you are running the TODO API backend server. For example, `http://localhost:9443` * *PORT* The port number from which to server the client app. Defaults to `8443` * *DEBUGGER\_OFF* Set to `true`, to disable `debug` statements in the app. These statements are for learning the integration points at runtime in your browser. When you open the browser's developer tools, the app pauses at each integration point. Code comments are placed above each one explaining their use. * *DEVELOPMENT* When `true`, this provides better debugging during development. The result will resemble the following: Example client `sdk-sample-apps/javascript/reactjs-todo-oidc/.env` file ```properties WEB_OAUTH_CLIENT=6c7eb89a-66e9-ab12-cd34-eeaf795650b2 WELLKNOWN_URL=https://auth.pingone.com/3072206d-c6ce-ch15-m0nd-f87e972c7cc3/as/.well-known/openid-configuration SCOPE='openid profile email phone revoke' #SERVER - 'PINGAM' or 'PINGONE' SERVER=PINGONE API_URL=http://localhost:9443 PORT=8443 DEBUGGER_OFF=true DEVELOPMENT=true ``` 4. Save your changes. ## Configure the API server app 1. In the IDE of your choice, open the `sdk-sample-apps` folder you cloned previously. 2. Copy the `.env.example` file in the `sdk-sample-apps/javascript/todo-api` folder and save it with the name `.env` within this same directory. The file contains configuration to connect to the same public OAuth 2.0 client as the TODO app itself: Example default API server `sdk-sample-apps/javascript/todo-api/.env` file ```properties # 'AIC' or 'PINGONE' SERVER_TYPE= # AM URL for AIC or PingOne base URL with env ID for PingOne SERVER_URL= PORT= # 'alpha' or 'bravo' for AIC server type. Not used for PingOne. REALM_PATH= # Confidential client ID for AIC or WebApp public client ID for PingOne REST_OAUTH_CLIENT= # Confidential client secret for AIC. Not used for PingOne. REST_OAUTH_SECRET= ``` 3. Update the configuration block with the details of your server environment. * *SERVER\_TYPE* Ensures the sample app uses the correct behavior for the different servers it supports, for example the endpoint to use for introspecting tokens received from the client app. For PingOne tenants, specify `PINGONE`. * *SERVER\_URL* The URL of the authorization server to connect to. Enter the base URL of the authentication endpoint for your PingOne instance, followed by the environment ID. For example, in the Canada region, your server URL value might be `https://auth.pingone.ca/3072206d-c6ce-ch15-m0nd-f87e972c7cc3` | | | | - | ------------------------------------------------------------------------------------------------------------------- | | | Do not use the console URL (`https://console.pingone.ca`) or app URL (`https://apps.pingone.ca`) for this property. | * *PORT* The port number on which to run the TODO API server. You'll need this port number when configuring the client app to connect to the TODO API server. If not specified, the TODO API server defaults to running on port `9443` * *REALM\_PATH* This value is not required for PingOne servers. * *REST\_OAUTH\_CLIENT* Enter the ID of the same public client you used for the client application earlier. For example, `6c7eb89a-66e9-ab12-cd34-eeaf795650b2` * *REST\_OAUTH\_SECRET* This value is not required for PingOne servers. The result will resemble the following: Example completed API server `sdk-sample-apps/javascript/todo-api/.env` file ```properties # 'AIC' or 'PINGONE' SERVER_TYPE=PINGONE # AM URL for AIC or PingOne base URL with env ID for PingOne SERVER_URL=https://auth.pingone.ca/3072206d-c6ce-ch15-m0nd-f87e972c7cc3 PORT=9443 # 'alpha' or 'bravo' for AIC server type. Not used for PingOne. REALM_PATH= # Confidential client ID for AIC or WebApp public client ID for PingOne REST_OAUTH_CLIENT=6c7eb89a-66e9-ab12-cd34-eeaf795650b2 # Confidential client secret for AIC. Not used for PingOne. REST_OAUTH_SECRET= ``` 4. Save your changes.