---
title: OIDC login to PingFederate tutorial for JavaScript
description: Prepare
component: sdks
version: latest
page_id: sdks:oidc:tutorials/javascript/pingfed/index
canonical_url: https://docs.pingidentity.com/sdks/latest/oidc/tutorials/javascript/pingfed/index.html
keywords: ["OAuth 2.0", "OpenID Connect", "Tutorial", "Source Code", "Integration", "SDK", "JavaScript"]
section_ids:
  before_you_begin: Before you begin
  step_1_download_the_samples: Step 1. Download the samples
  step_2_install_the_ping_forgerock_sdk: Step 2. Install the Ping (ForgeRock) SDK
  step_3_configure_connection_properties: Step 3. Configure connection properties
  step_4_test_the_app: Step 4. Test the app
---

# OIDC login to PingFederate tutorial for JavaScript

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

* [Download](01_downloading-forgerocksdk-core-project-js.html)

* [Install](02_configuring-forgerocksdk-core-project-js.html)

* [Configure](03_configuring-sample-for-pingone-js.html)

* [Run](04_running-sample-pingone-js.html)

***

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

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

After authentication, PingFederate 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 PingFederate server with the required configuration.

For example, you will need to configure CORS, have an OAuth 2.0 client application set up.

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

## [Step 1. Download the samples](01_downloading-forgerocksdk-core-project-js.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_downloading-forgerocksdk-core-project-js.html)

## [Step 2. Install the Ping (ForgeRock) SDK](02_configuring-forgerocksdk-core-project-js.html)

The sample projects need a number of dependencies that you can install by using the `npm` command.

For example, the Ping (ForgeRock) SDK for JavaScript itself is one of the dependencies.

[**Start step 2**[icon: chevrons-right, set=fas, size=xs]](02_configuring-forgerocksdk-core-project-js.html)

## [Step 3. Configure connection properties](03_configuring-sample-for-pingone-js.html)

In this step, you configure the sample app to connect to the OAuth 2.0 application you created in PingFederate.

[**Start step 3**[icon: chevrons-right, set=fas, size=xs]](03_configuring-sample-for-pingone-js.html)

## [Step 4. Test the app](04_running-sample-pingone-js.html)

In the following procedure, you run the sample app that you configured in the previous step.

The sample connects to your PingFederate server to obtain the correct URIs to authenticate the user, and redirects the browser to your PingFederate server.

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

[**Test app**[icon: chevrons-right, set=fas, size=xs]](04_running-sample-pingone-js.html)