---
title: Try out the Journey module for JavaScript
description: PingOne Advanced Identity Cloud PingAM JavaScript
component: orchsdks
page_id: orchsdks:journey:try-it-out/javascript/index
canonical_url: https://developer.pingidentity.com/orchsdks/journey/try-it-out/javascript/index.html
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
---

# Try out the Journey module for JavaScript

[icon: circle-check, set=far]PingOne Advanced Identity Cloud [icon: circle-check, set=far]PingAM [icon: js, set=fab]JavaScript

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

* [Download](01_download_samples.html)

* [Configure](02_configure_samples_for_journeys.html)

* [Run](03_run_the_samples.html)

**In this tutorial you configure and run the *reactjs-todo-journey* sample ReactJS single-page app, and make use of a Node.js REST API server backend app.**

The sample supports many of the callbacks used by authentication journeys in Advanced Identity Cloud and PingAM, including advanced use cases such as [external IdP integration](../../use-cases/external-idp/index.html) and [PingOne Protect](../../use-cases/protect/index.html).

> **Collapse: What does the  sample support?**
>
> | Feature        | Supported by sample                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
> | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
> | Orchestration  | * Advanced Identity Cloud/PingAM - Journeys                                                                                                                                                                                                                                                                                                                                                                                                                                     |
> | Implementation | - Embedded *(tooltip: Provides its own user interface within the app to handle callbacks, rather than redirecting to the Identity Provider UI.)*                                                                                                                                                                                                                                                                                                                                |
> | Language       | * ReactJS                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
> | Callbacks      | - `BooleanAttributeInputCallback`
>
> - `ChoiceCallback`
>
> - `ConfirmationCallback`
>
> - `KbaCreateCallback`
>
> - `NameCallback`
>
> - `PasswordCallback`
>
> - `PingOneProtectEvaluationCallback`
>
> - `PingOneProtectInitializeCallback`
>
> - `RedirectCallback`
>
> - `SelectIdPCallback`
>
> - `StringAttributeInputCallback`
>
> - `TermsAndConditionsCallback`
>
> - `TextOutputCallback`
>
> - `ValidatedCreatePasswordCallback`
>
> - `ValidatedCreateUsernameCallback`
>
> - WebAuthn (Register/Authenticate) |
> | Integrations   | * PingOne Protect                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

![The to-do sample app](../../_images/sample-apps/javascript/react-journey-todos.png)Figure 1. Screenshot of the to-do page of the sample app

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

Before you begin this tutorial ensure you have set up your PingOne Advanced Identity Cloud tenant or PingAM server with the required configuration.

For example, you will need to configure CORS, have an OAuth 2.0 client application set up, as well as an authentication journey for the app to navigate.

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

## [Step 1. Download the samples](01_download_samples.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_samples.html)

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

Configure both the Todo client app, and the API backend server app to connect to the OAuth 2.0 application you created in PingOne Advanced Identity Cloud or PingAM.

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

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

In this step you run the sample applications, authenticate as a user, view the tokens and user info, and then end the session by signing out.

[**Try it out**[icon: chevrons-right, set=fas, size=xs]](03_run_the_samples.html)