---
title: OIDC sign-on to PingOne tutorial for JavaScript
description: A tutorial for using the JavaScript OIDC sign-on module with PingOne.
component: orchsdks
page_id: orchsdks:oidc:try-it-out/javascript/pingone/index
canonical_url: https://developer.pingidentity.com/orchsdks/oidc/try-it-out/javascript/pingone/index.html
revdate: Thu, 2 Apr 2026 11:33:37 +0100
keywords: ["OAuth 2.0", "OpenID Connect", "Tutorial", "Source Code", "Integration", "SDK", "JavaScript", "PingOne"]
section_ids:
  before_you_begin: Before you begin
  step_1_download_the_samples: Step 1. Download the samples
  step_2_configure_connection_properties: Step 2. Configure connection properties
  step_3_test_the_app: Step 3. Test the app
---

# OIDC sign-on to PingOne tutorial for JavaScript

[icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript

* [Prepare](00_before-you-begin.html)

* [Download](01_download-sample-repo.html)

* [Configure](02_configure_connection_properties.html)

* [Run](03_test_the_app.html)

**In this tutorial you update a sample app that uses OIDC-based sign-on to obtain tokens by redirecting to the PingOne UI for authentication.**

The sample connects to the `.well-known` endpoint of your PingOne tenant to obtain the correct URIs to authenticate the user, and redirects to your PingOne tenant's login UI.

After authentication, PingOne redirects the browser back to your application, which then obtains an OAuth 2.0 access token and displays the related user information.

## [Before you begin](00_before-you-begin.html)

Before you begin this tutorial ensure you have set up your PingOne tenant with the required configuration.

For example, you will need to have an OAuth 2.0 client application set up, and a demo user to authenticate.

[**Complete prerequisites**[icon: chevrons-right, set=fas, size=xs]](00_before-you-begin.html)

## [Step 1. Download the samples](01_download-sample-repo.html)

To start this tutorial, you need to download the SDK sample apps repo, which contains the projects you will use.

[**Start step 1**[icon: chevrons-right, set=fas, size=xs]](01_download-sample-repo.html)

## [Step 2. Configure connection properties](02_configure_connection_properties.html)

In this step, you configure the sample apps to connect to the OAuth 2.0 applications you created in PingOne.

[**Start step 2**[icon: chevrons-right, set=fas, size=xs]](02_configure_connection_properties.html)

## [Step 3. Test the app](03_test_the_app.html)

To test the apps, run the samples that you configured in the previous step.

The samples connect to your PingOne tenant to obtain the correct URIs to authenticate the user, and redirects the browser to your PingOne tenant.

After authentication, PingOne redirects the browser back to your application, which then obtains an OAuth 2.0 access token.

[**Test app**[icon: chevrons-right, set=fas, size=xs]](03_test_the_app.html)