+ );
+}
diff --git a/javascript/reactjs-todo/client/views/logout.js b/javascript/reactjs-todo-journey/client/views/logout.js
similarity index 87%
rename from javascript/reactjs-todo/client/views/logout.js
rename to javascript/reactjs-todo-journey/client/views/logout.js
index 97cbb5e9..75739aed 100644
--- a/javascript/reactjs-todo/client/views/logout.js
+++ b/javascript/reactjs-todo-journey/client/views/logout.js
@@ -3,7 +3,7 @@
*
* login.js
*
- * Copyright (c) 2024 - 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2024 - 2026 Ping Identity Corporation. All rights reserved.
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*/
@@ -20,7 +20,7 @@ import Loading from '../components/utilities/loading';
*/
export default function Logout() {
/**
- * The destructing of the hook's array results in index 0 having the state value,
+ * The destructuring of the hook's array results in index 0 having the state value,
* and index 1 having the "setter" method to set new state values.
*/
const [, { setAuthentication, setEmail, setUser }] = useContext(AppContext);
@@ -47,7 +47,7 @@ export default function Logout() {
logout();
- // All methods/functions used herein are are "stable"
+ // All methods/functions used herein are "stable"
}, []);
return ;
diff --git a/javascript/reactjs-todo/client/views/register.js b/javascript/reactjs-todo-journey/client/views/register.js
similarity index 95%
rename from javascript/reactjs-todo/client/views/register.js
rename to javascript/reactjs-todo-journey/client/views/register.js
index fb3dadac..53b00b85 100644
--- a/javascript/reactjs-todo/client/views/register.js
+++ b/javascript/reactjs-todo-journey/client/views/register.js
@@ -3,7 +3,7 @@
*
* register.js
*
- * Copyright (c) 2024 - 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2024 - 2026 Ping Identity Corporation. All rights reserved.
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*/
diff --git a/javascript/reactjs-todo/client/views/todos.js b/javascript/reactjs-todo-journey/client/views/todos.js
similarity index 94%
rename from javascript/reactjs-todo/client/views/todos.js
rename to javascript/reactjs-todo-journey/client/views/todos.js
index a0b84ec1..c689cd40 100755
--- a/javascript/reactjs-todo/client/views/todos.js
+++ b/javascript/reactjs-todo-journey/client/views/todos.js
@@ -3,7 +3,7 @@
*
* todos.js
*
- * Copyright (c) 2024 - 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2024 - 2026 Ping Identity Corporation. All rights reserved.
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*/
@@ -27,7 +27,7 @@ export default function Todos() {
/**
* Use local, component state for todos. Though, this could be moved to
* the global state if that's preferred over doing API calls in React views.
- * The destructing of the hook's array results in index 0 having the state value,
+ * The destructuring of the hook's array results in index 0 having the state value,
* and index 1 having the "setter" method to set new state values.
*/
const [state] = useContext(AppContext);
@@ -64,7 +64,7 @@ export default function Todos() {
const Todos = hasFetched ? (
{/**
- * We we've fetched the todos, iterate over them for display.
+ * We've fetched the todos, iterate over them for display.
* If no todos were returned, show the "no todos" message.
*/}
{todos.length ? (
diff --git a/javascript/reactjs-todo/e2e/embedded-login.spec.js b/javascript/reactjs-todo-journey/e2e/embedded-login.spec.js
similarity index 100%
rename from javascript/reactjs-todo/e2e/embedded-login.spec.js
rename to javascript/reactjs-todo-journey/e2e/embedded-login.spec.js
diff --git a/javascript/reactjs-todo/e2e/protect.spec.js b/javascript/reactjs-todo-journey/e2e/protect.spec.js
similarity index 100%
rename from javascript/reactjs-todo/e2e/protect.spec.js
rename to javascript/reactjs-todo-journey/e2e/protect.spec.js
diff --git a/javascript/reactjs-todo/e2e/register-new-user.spec.js b/javascript/reactjs-todo-journey/e2e/register-new-user.spec.js
similarity index 100%
rename from javascript/reactjs-todo/e2e/register-new-user.spec.js
rename to javascript/reactjs-todo-journey/e2e/register-new-user.spec.js
diff --git a/javascript/reactjs-todo/e2e/social-login.spec.js b/javascript/reactjs-todo-journey/e2e/social-login.spec.js
similarity index 100%
rename from javascript/reactjs-todo/e2e/social-login.spec.js
rename to javascript/reactjs-todo-journey/e2e/social-login.spec.js
diff --git a/javascript/reactjs-todo/e2e/utils/demo-user.js b/javascript/reactjs-todo-journey/e2e/utils/demo-user.js
similarity index 81%
rename from javascript/reactjs-todo/e2e/utils/demo-user.js
rename to javascript/reactjs-todo-journey/e2e/utils/demo-user.js
index 706d9d57..4c39debd 100644
--- a/javascript/reactjs-todo/e2e/utils/demo-user.js
+++ b/javascript/reactjs-todo-journey/e2e/utils/demo-user.js
@@ -1,6 +1,6 @@
/*
*
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*
diff --git a/javascript/reactjs-todo/e2e/virtual-authenticator.spec.js b/javascript/reactjs-todo-journey/e2e/virtual-authenticator.spec.js
similarity index 100%
rename from javascript/reactjs-todo/e2e/virtual-authenticator.spec.js
rename to javascript/reactjs-todo-journey/e2e/virtual-authenticator.spec.js
diff --git a/javascript/reactjs-todo/package.json b/javascript/reactjs-todo-journey/package.json
similarity index 98%
rename from javascript/reactjs-todo/package.json
rename to javascript/reactjs-todo-journey/package.json
index 61b52e86..98a815aa 100644
--- a/javascript/reactjs-todo/package.json
+++ b/javascript/reactjs-todo-journey/package.json
@@ -1,5 +1,5 @@
{
- "name": "reactjs-todo",
+ "name": "reactjs-todo-journey",
"version": "1.0.0",
"main": "index.js",
"description": "A Ping authenticated sample web app written in React",
diff --git a/javascript/reactjs-todo/playwright.config.ts b/javascript/reactjs-todo-journey/playwright.config.ts
similarity index 84%
rename from javascript/reactjs-todo/playwright.config.ts
rename to javascript/reactjs-todo-journey/playwright.config.ts
index 13562244..5f607785 100644
--- a/javascript/reactjs-todo/playwright.config.ts
+++ b/javascript/reactjs-todo-journey/playwright.config.ts
@@ -17,7 +17,7 @@ export default defineConfig({
},
webServer: [
{
- command: 'npm run start:reactjs-todo',
+ command: 'npm run start:reactjs-todo-journey',
url,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
@@ -30,17 +30,14 @@ export default defineConfig({
JOURNEY_REGISTER: 'Registration',
PORT: '9443',
SERVER_URL: 'https://openam-sdks.forgeblocks.com/am',
- WELLKNOWN_URL:
- 'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
REALM_PATH: 'alpha',
SCOPE: 'profile me.read email',
TIMEOUT: '3000',
WEB_OAUTH_CLIENT: 'CentralLoginOAuthClient-',
REST_OAUTH_CLIENT: 'RestOAuthClient',
REST_OAUTH_SECRET: process.env.REST_OAUTH_SECRET || '',
- CENTRALIZED_LOGIN: 'false',
INIT_PROTECT: 'journey',
- PINGONE_ENV_ID: '02fb4743-189a-4bc7-9d6c-a919edfe6447'
+ PINGONE_ENV_ID: '02fb4743-189a-4bc7-9d6c-a919edfe6447',
},
ignoreHTTPSErrors: true,
},
diff --git a/javascript/reactjs-todo/public/callback.html b/javascript/reactjs-todo-journey/public/callback.html
similarity index 100%
rename from javascript/reactjs-todo/public/callback.html
rename to javascript/reactjs-todo-journey/public/callback.html
diff --git a/javascript/reactjs-todo/public/index.html b/javascript/reactjs-todo-journey/public/index.html
similarity index 100%
rename from javascript/reactjs-todo/public/index.html
rename to javascript/reactjs-todo-journey/public/index.html
diff --git a/javascript/reactjs-todo/webpack.config.js b/javascript/reactjs-todo-journey/webpack.config.js
similarity index 92%
rename from javascript/reactjs-todo/webpack.config.js
rename to javascript/reactjs-todo-journey/webpack.config.js
index 0d854df2..abec14ee 100644
--- a/javascript/reactjs-todo/webpack.config.js
+++ b/javascript/reactjs-todo-journey/webpack.config.js
@@ -3,7 +3,7 @@
*
* webpack.config.js
*
- * Copyright (c) 2024 - 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2024 - 2026 Ping Identity Corporation. All rights reserved.
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*/
@@ -26,11 +26,9 @@ module.exports = () => {
const JOURNEY_LOGIN = process.env.JOURNEY_LOGIN || localEnv.JOURNEY_LOGIN;
const JOURNEY_REGISTER = process.env.JOURNEY_REGISTER || localEnv.JOURNEY_REGISTER;
const WEB_OAUTH_CLIENT = process.env.WEB_OAUTH_CLIENT || localEnv.WEB_OAUTH_CLIENT;
- const CENTRALIZED_LOGIN = process.env.CENTRALIZED_LOGIN || localEnv.CENTRALIZED_LOGIN;
const REALM_PATH = process.env.REALM_PATH || localEnv.REALM_PATH;
const SCOPE = process.env.SCOPE || localEnv.SCOPE;
const SERVER_TYPE = process.env.SERVER_TYPE || localEnv.SERVER_TYPE;
- const WELLKNOWN_URL = process.env.WELLKNOWN_URL || localEnv.WELLKNOWN_URL;
const INIT_PROTECT = process.env.INIT_PROTECT || localEnv.INIT_PROTECT;
const PINGONE_ENV_ID = process.env.PINGONE_ENV_ID || localEnv.PINGONE_ENV_ID;
@@ -124,11 +122,9 @@ module.exports = () => {
'process.env.JOURNEY_LOGIN': JSON.stringify(JOURNEY_LOGIN),
'process.env.JOURNEY_REGISTER': JSON.stringify(JOURNEY_REGISTER),
'process.env.WEB_OAUTH_CLIENT': JSON.stringify(WEB_OAUTH_CLIENT),
- 'process.env.CENTRALIZED_LOGIN': JSON.stringify(CENTRALIZED_LOGIN),
'process.env.REALM_PATH': JSON.stringify(REALM_PATH),
'process.env.SCOPE': JSON.stringify(SCOPE),
'process.env.SERVER_TYPE': JSON.stringify(SERVER_TYPE),
- 'process.env.WELLKNOWN_URL': JSON.stringify(WELLKNOWN_URL),
'process.env.INIT_PROTECT': JSON.stringify(INIT_PROTECT),
'process.env.PINGONE_ENV_ID': JSON.stringify(PINGONE_ENV_ID),
}),
diff --git a/javascript/reactjs-todo-oidc/.env.example b/javascript/reactjs-todo-oidc/.env.example
new file mode 100644
index 00000000..99860400
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/.env.example
@@ -0,0 +1,10 @@
+API_URL=
+DEBUGGER_OFF=true
+DEVELOPMENT=
+REALM_PATH=alpha
+WEB_OAUTH_CLIENT=
+SCOPE=
+WELLKNOWN_URL=
+INIT_PROTECT=
+# required when PingOne Protect callbacks are present
+PINGONE_ENV_ID=
diff --git a/javascript/reactjs-todo-oidc/.eslintrc.js b/javascript/reactjs-todo-oidc/.eslintrc.js
new file mode 100644
index 00000000..f8174159
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/.eslintrc.js
@@ -0,0 +1,39 @@
+module.exports = {
+ env: {
+ browser: true,
+ es2021: true,
+ },
+ ignorePatterns: [
+ '**/node_modules/**',
+ '**/dist/**',
+ 'public',
+ 'playwright-report',
+ 'test-results',
+ ],
+ extends: ['standard', 'plugin:react/recommended', 'prettier'],
+ overrides: [
+ {
+ env: {
+ node: true,
+ },
+ files: ['.eslintrc.{js,cjs}'],
+ parserOptions: {
+ sourceType: 'script',
+ },
+ },
+ ],
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ },
+ plugins: ['react'],
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+ rules: {
+ 'react/prop-types': 'off',
+ 'no-debugger': 'off',
+ },
+};
diff --git a/javascript/reactjs-todo-oidc/.gitignore b/javascript/reactjs-todo-oidc/.gitignore
new file mode 100644
index 00000000..f8048ca1
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/.gitignore
@@ -0,0 +1,9 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/javascript/reactjs-todo-oidc/README.md b/javascript/reactjs-todo-oidc/README.md
new file mode 100644
index 00000000..28620433
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/README.md
@@ -0,0 +1,119 @@
+# React JS Todo OIDC Sample App
+
+## Disclaimers
+
+This sample code is provided "as is" and is not a supported product of Ping. Its purpose is solely to demonstrate how the Ping JavaScript SDK can be implemented within a React application using centralized OIDC login. This is not a demonstration of React itself or instructional for _how_ to build a React app. There are many aspects to routing, state management, tooling, and other areas of building a React app that are outside the scope of this project. For information about creating a React app, [visit React's official documentation](https://reactjs.org/docs/create-a-new-react-app.html).
+
+## Requirements
+
+1. An instance of Ping's Access Manager (AM), either within Ping Advanced Identity Cloud, your own private installation, or locally installed on your computer
+2. Node >= 18 (recommended: install via the [official package installer](https://nodejs.org/en/))
+3. Knowledge of using the Terminal/Command Line
+4. Ability to generate security certs (recommended: mkcert; [installation instructions here](https://github.com/FiloSottile/mkcert#installation))
+5. This project cloned to your computer
+
+## Setup
+
+Once you have the 5 requirements above met, we can build the project.
+
+### Set Up Your AM Instance
+
+#### Configure CORS
+
+1. Allowed origins: `https://localhost:8443`
+2. Allowed methods: `GET` `POST`
+3. Allowed headers: `Content-Type` `X-Requested-With` `X-Requested-Platform` `Accept-API-Version` `Authorization`
+4. Allow credentials: enable
+
+#### Create Your OAuth Clients
+
+1. Create a public (SPA) OAuth client for the web app: no secret, scopes including `openid profile email`, implicit consent enabled, and no "token authentication endpoint method".
+ - Redirect URI: `https://localhost:8443/callback.html`
+ - Post logout redirect URI: `https://localhost:8443/`
+2. Create a confidential (Node.js) OAuth client for the API server: with a secret, default scope of `am-introspect-all-tokens`, and `client_secret_basic` as the "token authentication endpoint method".
+
+#### Configure OIDC Discovery
+
+Set your `.env` values to point to your realm-specific OpenID configuration endpoint (`WELLKNOWN_URL`) and keep `SCOPE` configured with at least `openid`.
+
+### Configure Your `.env` File
+
+Change the name of `.env.example` to `.env` and replace the bracketed values (e.g. `<<>>`) with your values.
+
+Example with annotations:
+
+```text
+API_URL=http://localhost:9443
+DEBUGGER_OFF=true
+DEVELOPMENT=true
+REALM_PATH=<<>>
+WEB_OAUTH_CLIENT=<<>>
+SCOPE="openid profile email"
+WELLKNOWN_URL=<<>>
+INIT_PROTECT=bootstrap
+PINGONE_ENV_ID=<<>>
+```
+
+### Installing Dependencies and Run Build
+
+Run commands from the JavaScript workspace root:
+
+```sh
+cd javascript
+npm install
+```
+
+### Run the Servers
+
+Run the command below to start both the client app and `todo-api`:
+
+```sh
+cd javascript
+npm run start:reactjs-todo-oidc
+```
+
+Now, you should be able to visit `https://localhost:8443`, which is your web app or client (the Relying Party in OAuth terms). This client will make requests to your AM instance (the Authorization Server in OAuth terms), and `http://localhost:9443` as the REST API for your todos (the Resource Server).
+
+### Accept Cert Exceptions
+
+You will likely have to accept security certificate exceptions for both your React app and the Node.js server. To accept the cert from the Node.js server, you can visit `http://localhost:9443/healthcheck` in your browser. Once you receive `OK`, your Node.js server is running on the correct domain and port, and the cert is accepted.
+
+## Learn About Integration Touchpoints
+
+This project has debugging statements that can be activated to pause execution at each SDK integration point. A comment above each `debugger` statement explains the purpose of the integration point.
+
+If you'd like to use this feature as a learning tool, open the developer tools of your browser and rerun the app locally. It will automatically pause at these points of integration.
+
+For local development, if you want to turn these debuggers off, set the environment variable `DEBUGGER_OFF=true`.
+
+## Modifying This Project
+
+### React Client
+
+To modify the client portion of this project, you'll need to be familiar with the following React patterns:
+
+1. [Functional components and composition](https://reactjs.org/docs/components-and-props.html)
+2. [Hooks (including custom hooks)](https://reactjs.org/docs/hooks-intro.html)
+3. [Context API](https://reactjs.org/docs/hooks-reference.html#usecontext)
+4. [React Router](https://reactrouter.com/)
+
+You'll also want a [basic understanding of Webpack](https://webpack.js.org/concepts/) and the following:
+
+1. [Babel transformation for React](https://webpack.js.org/loaders/babel-loader/#root)
+2. [Plugins for Sass-to-CSS processing](https://webpack.js.org/loaders/sass-loader/#root)
+
+#### Styling and CSS
+
+We heavily leveraged [Twitter Bootstrap](https://getbootstrap.com/) and [it's utility classes](https://getbootstrap.com/docs/5.0/utilities/api/), but you will see classes with the prefix `cstm_`. These are custom classes, hence the `cstm` shorthand, and they are explicitly used to denote an additional style application on top of Bootstrap's styling.
+
+### REST API Server
+
+To modify the API server, you'll need a [basic understanding of Node](https://nodejs.org/en/about/) as well as the following things:
+
+1. [Express](https://expressjs.com/)
+2. [PouchDB](https://pouchdb.com/)
+3. [Superagent](https://www.npmjs.com/package/superagent)
+
+## TypeScript?
+
+The Ping JavaScript SDK is developed with TypeScript, so type definitions are available. This sample application does not utilize TypeScript, but if you'd like to see a version of this written in TypeScript, let us know.
diff --git a/javascript/reactjs-todo-oidc/babel.config.js b/javascript/reactjs-todo-oidc/babel.config.js
new file mode 100644
index 00000000..463de36c
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ presets: ['@babel/preset-react'],
+};
diff --git a/javascript/reactjs-todo-oidc/client/README.md b/javascript/reactjs-todo-oidc/client/README.md
new file mode 100644
index 00000000..c24f2e6a
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/README.md
@@ -0,0 +1,69 @@
+# React JS Todo OIDC Client
+
+This folder contains the React client for `reactjs-todo-oidc`, which demonstrates centralized OIDC login with `@forgerock/oidc-client`.
+Unlike journey-based samples, this client does not render embedded login callbacks and does not expose a `/register` route.
+
+## Authentication flow
+
+1. User clicks **Sign In** on `/`.
+2. `client/views/login.js` redirects to the configured authorization endpoint.
+3. OIDC callback returns to `/callback.html`, which forwards query params to `/login`.
+4. `/login` exchanges the authorization code for tokens and loads user profile info.
+5. Authenticated users can access `/todos`; unauthenticated users are redirected to `/login`.
+
+## Runtime configuration
+
+Copy `.env.example` to `.env` at `javascript/reactjs-todo-oidc/.env`, then set values for your environment:
+
+```text
+SERVER_URL=<<>>
+WELLKNOWN_URL=<<>>
+REALM_PATH=<<>>
+WEB_OAUTH_CLIENT=<<>>
+SCOPE="openid profile email"
+API_URL=http://localhost:9443
+REST_OAUTH_CLIENT=<<>>
+REST_OAUTH_SECRET=<<>>
+DEBUGGER_OFF=true
+INIT_PROTECT=bootstrap
+PINGONE_ENV_ID=<<>>
+```
+
+Notes:
+
+- `WELLKNOWN_URL` is the source of truth for OIDC discovery in this sample.
+- `SCOPE` should include `openid` so logout and userinfo flows have the expected token set.
+- `SERVER_URL` is kept in `.env` for parity with sample conventions, though OIDC discovery uses `WELLKNOWN_URL`.
+
+## Running locally
+
+Run from the JavaScript workspace root:
+
+```sh
+cd javascript
+npm install
+npm run start:reactjs-todo-oidc
+```
+
+Then visit:
+
+- App: `https://localhost:8443`
+- API healthcheck: `http://localhost:9443/healthcheck`
+
+## Build, lint, and E2E
+
+From `javascript/`:
+
+```sh
+npm run build --workspace reactjs-todo-oidc
+npm run lint --workspace reactjs-todo-oidc
+npm run e2e --workspace reactjs-todo-oidc -- e2e/oidc-login.spec.js --project=chromium
+```
+
+## Key client files
+
+- `client/constants.js`: OIDC config construction (`CONFIG`) and env-backed constants
+- `client/context/oidc.context.js`: OIDC client init, token-based auth state, logout handling
+- `client/views/login.js`: centralized-login redirect, token exchange, and auth state hydration
+- `client/utilities/route.js`: protected-route auth validation
+- `public/callback.html`: callback forwarder to `/login`
diff --git a/javascript/reactjs-todo-oidc/client/components/README.md b/javascript/reactjs-todo-oidc/client/components/README.md
new file mode 100644
index 00000000..45805b6a
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/README.md
@@ -0,0 +1,3 @@
+# Components
+
+These are React based units of code that could potentially be used anywhere, to an extent. They are the units that compose a view. These could be actual React components or custom React hooks.
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/account-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/account-icon.js
new file mode 100644
index 00000000..956c6d61
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/account-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * account-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function AccountIcon - React component for the user icon representing the account
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function AccountIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/action-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/action-icon.js
new file mode 100644
index 00000000..0174f511
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/action-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * action-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function ActionIcon - React component that displays the action, "three dots" icon representing the a menu
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function ActionIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/alert-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/alert-icon.js
new file mode 100644
index 00000000..6f8b1508
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/alert-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * alert-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function AlertIcon - React component that displays the alert icon representing the a warning
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function AlertIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/apple-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/apple-icon.js
new file mode 100644
index 00000000..cbaa6aac
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/apple-icon.js
@@ -0,0 +1,40 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * apple-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function AppleIcon - React component for the user icon representing the apple icon
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function AppleIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/eye-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/eye-icon.js
new file mode 100644
index 00000000..888caccc
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/eye-icon.js
@@ -0,0 +1,48 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * eye-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function AlertIcon - React component that displays the eye (password visible) icon
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function EyeIcon({ classes = '', visible = true, size = '24px' }) {
+ if (visible) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/finger-print-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/finger-print-icon.js
new file mode 100644
index 00000000..5f35d51c
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/finger-print-icon.js
@@ -0,0 +1,36 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * finger-print-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function FingerPrintIcon - React component that displays the finger print icon representing login
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function FingerPrintIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/forgerock-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/forgerock-icon.js
new file mode 100644
index 00000000..d2a46cc5
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/forgerock-icon.js
@@ -0,0 +1,61 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * forgerock-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function ForgeRockIcon - React component that displays the Ping brand icon
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function ForgeRockIcon({ classes = '', size = '24px' }) {
+ return (
+ //
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/google-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/google-icon.js
new file mode 100644
index 00000000..2df153cc
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/google-icon.js
@@ -0,0 +1,47 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * google-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function GoogleIcon - React component for the user icon representing the google icon
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function GoogleIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/home-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/home-icon.js
new file mode 100644
index 00000000..9a0c9f14
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/home-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * home-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function HomeIcon - Displays the home icon representing the home page
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function HomeIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/key-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/key-icon.js
new file mode 100644
index 00000000..ef764475
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/key-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * key-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function KeyIcon - React component that displays the key icon representing login
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function KeyIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/left-arrow-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/left-arrow-icon.js
new file mode 100644
index 00000000..54bb7191
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/left-arrow-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * left-arrow-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function LeftArrowIcon - React component that displays the left arrow representing "back"
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function LeftArrowIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/lock-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/lock-icon.js
new file mode 100644
index 00000000..9a449d34
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/lock-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * lock-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function LockIcon - React component that displays the lock icon representing security
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function LockIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/new-user-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/new-user-icon.js
new file mode 100644
index 00000000..ea740290
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/new-user-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * new-user-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function NewUserIcon - React component that displays the new user (user with +) icon representing registration
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function NewUserIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/ping-logo-square-color.svg b/javascript/reactjs-todo-oidc/client/components/icons/ping-logo-square-color.svg
new file mode 100644
index 00000000..50683bbf
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/ping-logo-square-color.svg
@@ -0,0 +1,12 @@
+
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/react-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/react-icon.js
new file mode 100644
index 00000000..af822bfb
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/react-icon.js
@@ -0,0 +1,32 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * react-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function ReactIcon - React component that displays the React brand icon
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function ReactIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/todo-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/todo-icon.js
new file mode 100644
index 00000000..ee70bf7f
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/todo-icon.js
@@ -0,0 +1,48 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * todo-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function TodoIcon - React component that displays either the circle or circle with check icon representing the todo
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function TodoIcon({ classes, completed, size }) {
+ if (completed) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/todos-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/todos-icon.js
new file mode 100644
index 00000000..ad139b50
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/todos-icon.js
@@ -0,0 +1,33 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * todos-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function TodosIcon - React component that displays the multiple checks icon representing the todos page
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function TodosIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/icons/verified-icon.js b/javascript/reactjs-todo-oidc/client/components/icons/verified-icon.js
new file mode 100644
index 00000000..9d5921d3
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/icons/verified-icon.js
@@ -0,0 +1,37 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * verified-icon.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React from 'react';
+
+/**
+ * @function VerifiedIcon - React component that displays the verified checkmark icon representing the validation
+ * @param {Object} props - React props object
+ * @param {string} props.classes - A string of classnames to be set on component
+ * @param {string} props.size - A string representing the intended size of the rendering
+ * @returns {Object} - React JSX Object
+ */
+export default function VerifiedIcon({ classes = '', size = '24px' }) {
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/layout/card.js b/javascript/reactjs-todo-oidc/client/components/layout/card.js
new file mode 100644
index 00000000..3086b6b9
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/layout/card.js
@@ -0,0 +1,29 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * card.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+
+/**
+ * @function Card - React component that displays the alert icon representing the a warning
+ * @param {Object} props - React props object
+ * @param {Object} props.children - The child React components that are passed in
+ * @returns {Object} - React JSX Object
+ */
+export default function Card(props) {
+ const theme = useContext(ThemeContext);
+
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/layout/footer.js b/javascript/reactjs-todo-oidc/client/components/layout/footer.js
new file mode 100644
index 00000000..c3e5b6cb
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/layout/footer.js
@@ -0,0 +1,32 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * footer.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+
+/**
+ * @function Footer - Footer React component
+ * @returns {Object} - React component object
+ */
+export default function Footer() {
+ const theme = useContext(ThemeContext);
+
+ return (
+
+
+ The React name and logomark are properties of Facebook,
+ and their use herein is for learning and illustrative purposes only.
+
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/layout/header.js b/javascript/reactjs-todo-oidc/client/components/layout/header.js
new file mode 100755
index 00000000..9c8a2222
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/layout/header.js
@@ -0,0 +1,143 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * header.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import AccountIcon from '../icons/account-icon';
+import { OidcContext } from '../../context/oidc.context';
+import { ThemeContext } from '../../context/theme.context';
+import ForgeRockIcon from '../icons/forgerock-icon';
+import HomeIcon from '../icons/home-icon';
+import ReactIcon from '../icons/react-icon';
+import TodosIcon from '../icons/todos-icon';
+
+/**
+ * @function Header - Header React view
+ * @returns {Object} - React component object
+ */
+export default function Header() {
+ /**
+ * Collects the global state for detecting user auth for rendering
+ * appropriate navigational items.
+ * The destructuring of the hook's array results in index 0 having the state value,
+ * and index 1 having the "setter" method to set new state values.
+ */
+ const [oidcState] = useContext(OidcContext);
+ const theme = useContext(ThemeContext);
+ const location = useLocation();
+
+ let TodosItem;
+ let LoginOrOutItem;
+
+ /**
+ * Render different navigational items depending on authenticated status
+ */
+ if (oidcState.isAuthenticated) {
+ TodosItem = [
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todo/todo.js b/javascript/reactjs-todo-oidc/client/components/todo/todo.js
new file mode 100644
index 00000000..d3ae7a5e
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todo/todo.js
@@ -0,0 +1,96 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * todo.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+import ActionIcon from '../icons/action-icon';
+import TodoIcon from '../icons/todo-icon';
+
+/**
+ * @function Todo - Used for display a single todo and its details
+ * @param {Object} props - The object representing React's props
+ * @param {Object} props.setTodoActionId - Method from parent for passing the ID of todo
+ * @param {Object} props.todo - The todo object passed from the parent component
+ * @returns {Object} - React JSX view
+ */
+export default function Todo({ completeTodo, setSelectedDeleteTodo, setSelectedEditTodo, item }) {
+ const theme = useContext(ThemeContext);
+
+ /**
+ * The destructuring of the hook's array results in index 0 having the state value,
+ * and index 1 having the "setter" method to set new state values.
+ */
+ const [todo, setTodo] = useState(item);
+ const todoClasses = `cstm_todo-label ${
+ todo.completed ? 'cstm_todo-label_complete' : 'cstm_todo-label_incomplete'
+ } ${'col d-flex align-items-center fs-5 w-100 p-3'}`;
+
+ useEffect(() => {
+ setTodo(item);
+ }, [item]);
+
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/create.js b/javascript/reactjs-todo-oidc/client/components/todos/create.js
new file mode 100644
index 00000000..ec8e0304
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/create.js
@@ -0,0 +1,74 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * create-todo.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, useRef, useState } from 'react';
+
+import apiRequest from '../../utilities/request';
+import { OidcContext } from '../../context/oidc.context';
+import { ThemeContext } from '../../context/theme.context';
+
+/**
+ * @function CreateTodo - React component for displaying the input and button pair for todo creation
+ * @param {Object} props - React props object
+ * @param {Function} props.addTodo - The function that adds the todo to the local collection
+ * @returns {Object} - React component object
+ */
+export default function CreateTodo({ addTodo }) {
+ const [{ oidcClient }] = useContext(OidcContext);
+ const theme = useContext(ThemeContext);
+
+ const [creatingTodo, setCreatingTodo] = useState(false);
+ const textInput = useRef(null);
+
+ async function createTodo(e) {
+ e.preventDefault();
+
+ setCreatingTodo(true);
+
+ const title = e.target.elements[0].value;
+ const newTodo = await apiRequest('todos', 'POST', { title }, oidcClient);
+
+ addTodo(newTodo);
+ setCreatingTodo(false);
+ textInput.current.value = '';
+ }
+
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/delete.js b/javascript/reactjs-todo-oidc/client/components/todos/delete.js
new file mode 100644
index 00000000..5d5a4b95
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/delete.js
@@ -0,0 +1,63 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * delete.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+
+/**
+ * @function Delete - Used for display a modal that ensures intention for todo deletion
+ * @param {Object} props - The object representing React's props
+ * @param {Object} props.deleteTodo - The todo object that is requested to be deleted
+ * @returns {Object} - React component object
+ */
+export default function Delete({ deleteTodo }) {
+ const theme = useContext(ThemeContext);
+
+ return (
+
+
+
+
+
Are you sure you want to delete this todo?
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/edit.js b/javascript/reactjs-todo-oidc/client/components/todos/edit.js
new file mode 100644
index 00000000..c4fe3bd2
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/edit.js
@@ -0,0 +1,96 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * edit.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, useRef } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+
+/**
+ * @function Edit - Used for a single todo for edit within a modal popup
+ * @param {Object} props - The object representing React's props
+ * @param {Object} props.selectedEditTodo - The todo object representing what is selected for edit
+ * @param {Function} props.setSelectedEditTodo - The function to set the newly edited todo
+ * @param {Function} props.editTodo - The function to add the edited todo back to the collection
+ * @returns {Object} - React component object
+ */
+export default function Edit({ selectedEditTodo, setSelectedEditTodo, editTodo }) {
+ const theme = useContext(ThemeContext);
+ const textInput = useRef(null);
+
+ function updateTitle(e) {
+ setSelectedEditTodo({ ...selectedEditTodo, title: e.target.value });
+ }
+
+ function submit(e, type) {
+ e.preventDefault();
+
+ editTodo(selectedEditTodo);
+
+ // TODO: Improve modal handling
+ if (type === 'form') {
+ document.getElementById('closeEditModalBtn').click();
+ }
+ }
+
+ return (
+
+
+
+
+
Edit Todo
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/fetch.js b/javascript/reactjs-todo-oidc/client/components/todos/fetch.js
new file mode 100644
index 00000000..b7e269e9
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/fetch.js
@@ -0,0 +1,49 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * fetch.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import { useEffect } from 'react';
+
+import apiRequest from '../../utilities/request';
+
+/**
+ * @function useTodoFetch - A custom React hook for fetching todos from API
+ * @param {Function} dispatch - The function to pass in an action with data to result in new state
+ * @param {Function} setFetched - A function for setting the state of hasFetched
+ * @param {Function} setApiError - A function for setting API error messages
+ * @param {Object} oidcClient - The OIDC client instance
+ * @returns {undefined} - this doesn't directly return anything, but calls dispatch to set data
+ */
+export default function useTodoFetch(dispatch, setFetched, setApiError, oidcClient) {
+ /**
+ * Since we are making an API call, which is a side-effect,
+ * we will wrap this in a useEffect, which will re-render the
+ * view once the API request returns.
+ */
+ useEffect(() => {
+ async function getTodos() {
+ // Request the todos from our resource API
+ const fetchedTodos = await apiRequest('todos', 'GET', undefined, oidcClient);
+
+ if (fetchedTodos.error) {
+ setApiError(
+ 'The Todo API server is not running. Please start it with npm run start:todo-api from the javascript directory.',
+ );
+ setFetched(true);
+ return;
+ }
+ setFetched(true);
+ dispatch({ type: 'init-todos', payload: { todos: fetchedTodos } });
+ }
+
+ getTodos();
+
+ // oidcClient is guaranteed non-null by the loading gate in index.js
+ }, []);
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/reducer.js b/javascript/reactjs-todo-oidc/client/components/todos/reducer.js
new file mode 100644
index 00000000..d7a561fe
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/reducer.js
@@ -0,0 +1,52 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * reducer.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+/**
+ * @function reducer - A simple reducer for managing the state of todos
+ * @param {Object} state - The state of todos before applying the action
+ * @param {Object} action - Action object
+ * @param {string} action.type - Action type that describes what to do
+ * @param {Object} action.payload - The new state to be applied
+ * @returns {Array} - the new array of update todos
+ */
+export default function reducer(state, action) {
+ switch (action.type) {
+ case 'init-todos':
+ return [...action.payload.todos];
+ case 'add-todo':
+ return [action.payload.todo, ...state];
+ case 'delete-todo':
+ return state.filter((todo) => todo._id !== action.payload._id);
+ case 'complete-todo':
+ return state.map((todo) => {
+ if (todo._id === action.payload._id) {
+ return {
+ ...todo,
+ completed: action.payload.completed,
+ };
+ } else {
+ return todo;
+ }
+ });
+ case 'edit-todo':
+ return state.map((todo) => {
+ if (todo._id === action.payload._id) {
+ return {
+ ...todo,
+ title: action.payload.title,
+ };
+ } else {
+ return todo;
+ }
+ });
+ default:
+ throw new Error('Form action type not recognized.');
+ }
+}
diff --git a/javascript/reactjs-todo-oidc/client/components/todos/todo.js b/javascript/reactjs-todo-oidc/client/components/todos/todo.js
new file mode 100755
index 00000000..f26ba773
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/components/todos/todo.js
@@ -0,0 +1,101 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * todo.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+
+import { ThemeContext } from '../../context/theme.context';
+import ActionIcon from '../icons/action-icon';
+import TodoIcon from '../icons/todo-icon';
+
+/**
+ * @function Todo - Used for display a single todo and its details
+ * @param {Object} props - The object representing React's props
+ * @param {Function} props.completeTodo - A function for toggling a todo's complete state
+ * @param {Function} props.setSelectedDeleteTodo - A function for setting the todo for deletion
+ * @param {Function} props.setSelectedEditTodo - A function for setting the todo for edit
+ * @param {Object} props.item - The todo item instance to be rendered
+ * @returns {Object} - React component object
+ */
+export default function Todo({ completeTodo, setSelectedDeleteTodo, setSelectedEditTodo, item }) {
+ const theme = useContext(ThemeContext);
+
+ /**
+ * The destructuring of the hook's array results in index 0 having the state value,
+ * and index 1 having the "setter" method to set new state values.
+ */
+ const [todo, setTodo] = useState(item);
+ const todoClasses = `cstm_todo-label ${
+ todo.completed ? 'cstm_todo-label_complete' : 'cstm_todo-label_incomplete'
+ } ${'col d-flex align-items-center fs-5 w-100 p-3'}`;
+
+ useEffect(() => {
+ setTodo(item);
+ }, [item]);
+
+ return (
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/views/login.js b/javascript/reactjs-todo-oidc/client/views/login.js
new file mode 100755
index 00000000..96d603c5
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/views/login.js
@@ -0,0 +1,107 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * login.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import React, { useContext, useEffect, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+
+import BackHome from '../components/utilities/back-home';
+import Loading from '../components/utilities/loading';
+import Card from '../components/layout/card';
+import { OidcContext } from '../context/oidc.context';
+
+/**
+ * @function Login - React view for Login
+ * @returns {Object} - React component object
+ */
+export default function Login() {
+ const [{ oidcClient }, methods] = useContext(OidcContext);
+ const navigate = useNavigate();
+ const [params] = useSearchParams();
+
+ const codeParam = params.get('code');
+ const errorParam = params.get('error');
+ const stateParam = params.get('state');
+ const [state, setState] = useState({
+ loadingMessage: '',
+ });
+
+ useEffect(() => {
+ async function checkCentralizedLogin() {
+ try {
+ if (!oidcClient) {
+ setState({
+ loadingMessage: 'Initializing application...',
+ });
+ return;
+ }
+
+ if (codeParam && stateParam) {
+ const tokens = await oidcClient.token.exchange(codeParam, stateParam);
+ if ('error' in tokens) {
+ setState({
+ loadingMessage: 'Sign in failed. Please try again.',
+ });
+ console.error(`Error: token exchange; ${tokens.error}`);
+ return;
+ }
+
+ const user = await oidcClient.user.info();
+ if ('error' in user) {
+ setState({
+ loadingMessage: 'Sign in failed. Please try again.',
+ });
+ console.error(`Error: get current user; ${user.error}`);
+ return;
+ }
+
+ setState({
+ loadingMessage: 'Success! Redirecting ...',
+ });
+
+ methods.setUser(user.name);
+ methods.setEmail(user.email);
+ methods.setAuthentication(true);
+ navigate('/');
+ } else if (errorParam) {
+ setState({
+ loadingMessage: 'Sign in failed. Please try again.',
+ });
+ } else {
+ setState({
+ loadingMessage: 'Redirecting ...',
+ });
+ const authorizeUrl = await oidcClient.authorize.url();
+ if (typeof authorizeUrl !== 'string' && 'error' in authorizeUrl) {
+ setState({
+ loadingMessage: 'Sign in failed. Please try again.',
+ });
+ console.error(`Error: centralized login; ${authorizeUrl.error}`);
+ return;
+ }
+ window.location.assign(authorizeUrl);
+ }
+ } catch (error) {
+ console.error(`Error: centralized login; ${error}`);
+ }
+ }
+
+ checkCentralizedLogin();
+ }, [oidcClient]);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/client/views/logout.js b/javascript/reactjs-todo-oidc/client/views/logout.js
new file mode 100644
index 00000000..34ef5bb5
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/views/logout.js
@@ -0,0 +1,49 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * logout.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, useEffect } from 'react';
+
+import { OidcContext } from '../context/oidc.context';
+import Loading from '../components/utilities/loading';
+
+/**
+ * @function Logout - React view for Logout
+ * @returns {Object} - React component object
+ */
+export default function Logout() {
+ /**
+ * The destructuring of the hook's array results in index 0 having the state value,
+ * and index 1 having the "setter" method to set new state values.
+ */
+ const [, { setAuthentication, setEmail, setUser }] = useContext(OidcContext);
+
+ useEffect(() => {
+ async function logout() {
+ try {
+ /**
+ * Logout and clear existing, stored data.
+ * Note that setAuthentication(false) triggers the OIDC client logout,
+ * revoking tokens and ending the session.
+ */
+ setAuthentication(false);
+ setEmail('');
+ setUser('');
+ } catch (error) {
+ console.error(`Error: logout; ${error}`);
+ }
+ }
+
+ logout();
+
+ // All methods/functions used herein are "stable"
+ }, []);
+
+ return ;
+}
diff --git a/javascript/reactjs-todo-oidc/client/views/todos.js b/javascript/reactjs-todo-oidc/client/views/todos.js
new file mode 100755
index 00000000..1e9e7a9d
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/client/views/todos.js
@@ -0,0 +1,127 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * todos.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import React, { useContext, Fragment, useReducer, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { OidcContext } from '../context/oidc.context';
+import { ThemeContext } from '../context/theme.context';
+import CreateTodo from '../components/todos/create';
+import DeleteModal from '../components/todos/delete';
+import EditModal from '../components/todos/edit';
+import useTodoFetch from '../components/todos/fetch';
+import reducer from '../components/todos/reducer';
+import Todo from '../components/todos/todo';
+import apiRequest from '../utilities/request';
+
+/**
+ * @function Todos - React view for retrieving & displaying todo collection
+ * @returns {Object} - React component object
+ */
+export default function Todos() {
+ /**
+ * Use local, component state for todos. Though, this could be moved to
+ * the global state if that's preferred over doing API calls in React views.
+ * The destructuring of the hook's array results in index 0 having the state value,
+ * and index 1 having the "setter" method to set new state values.
+ */
+ const [{ oidcClient }] = useContext(OidcContext);
+ const theme = useContext(ThemeContext);
+ const [hasFetched, setFetched] = useState(false);
+ const [apiError, setApiError] = useState(null);
+ const [todos, dispatch] = useReducer(reducer, []);
+ const [selectedDeleteTodo, setSelectedDeleteTodo] = useState(null);
+ const [selectedEditTodo, setSelectedEditTodo] = useState(null);
+
+ useTodoFetch(dispatch, setFetched, setApiError, oidcClient);
+
+ function addTodo(newTodo) {
+ dispatch({ type: 'add-todo', payload: { todo: newTodo } });
+ }
+
+ async function completeTodo(_id, completed) {
+ dispatch({ type: 'complete-todo', payload: { _id, completed } });
+ await apiRequest(`todos/${_id}`, 'POST', { completed }, oidcClient);
+ }
+
+ async function deleteTodo() {
+ dispatch({ type: 'delete-todo', payload: { _id: selectedDeleteTodo._id } });
+ await apiRequest(`todos/${selectedDeleteTodo._id}`, 'DELETE', undefined, oidcClient);
+ }
+
+ async function editTodo({ _id, title }) {
+ dispatch({ type: 'edit-todo', payload: { _id, title } });
+ await apiRequest(`todos/${_id}`, 'POST', { title }, oidcClient);
+ }
+
+ /**
+ * Dynamic React component for rendering either the loading component,
+ * an error message, or the Todos collection component.
+ */
+ const Todos = apiError ? (
+
+ Unable to load todos: {apiError}.{' '}
+ Please sign in to continue.
+
+ ) : hasFetched ? (
+
+ {/**
+ * We've fetched the todos, iterate over them for display.
+ * If no todos were returned, show the "no todos" message.
+ */}
+ {todos.length ? (
+ todos.map((item) => {
+ return (
+
+ );
+ })
+ ) : (
+
+
+
+ No todos yet. Create one above!
+
+
+
+ )}
+
+ ) : (
+
+
+ Collecting your todos ...
+
+ );
+
+ return (
+
+
+
Your Todos
+
Create and manage your todos.
+
+
+ {Todos}
+
+
+
+
+
+ );
+}
diff --git a/javascript/reactjs-todo-oidc/e2e/oidc-login.spec.js b/javascript/reactjs-todo-oidc/e2e/oidc-login.spec.js
new file mode 100644
index 00000000..04d53f59
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/e2e/oidc-login.spec.js
@@ -0,0 +1,142 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * oidc-login.spec.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ *
+ */
+import { test, expect } from '@playwright/test';
+import { password, username } from './utils/demo-user';
+
+const BASE_URL = 'https://localhost:8443';
+
+function escapeRegExp(value) {
+ return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getConfiguredOidcHost() {
+ const configuredWellKnownUrl = test.info().config.metadata?.oidcWellKnownUrl;
+ if (typeof configuredWellKnownUrl !== 'string') {
+ return null;
+ }
+
+ return new URL(configuredWellKnownUrl).hostname;
+}
+
+async function submitLoginForm(page, testUsername = username, testPassword = password) {
+ const usernameField = page.getByLabel('Username');
+ const userNameField = page.getByLabel('User Name');
+
+ if (
+ await usernameField
+ .first()
+ .isVisible({ timeout: 3000 })
+ .catch(() => false)
+ ) {
+ await usernameField.first().fill(testUsername);
+ } else {
+ await userNameField.first().fill(testUsername);
+ }
+
+ await page.getByLabel('Password').first().fill(testPassword);
+ await page
+ .getByRole('button', { name: /Next|Sign On|Login/i })
+ .first()
+ .click();
+}
+
+async function openCentralizedLogin(page) {
+ await page.context().clearCookies();
+ await page.goto(BASE_URL);
+ await page.evaluate(() => window.localStorage.clear());
+ await page.getByRole('link', { name: 'Sign In', exact: true }).click();
+ await page.waitForURL(/openam-sdks\.forgeblocks\.com|\/mock\/authorize/, { timeout: 60000 });
+}
+
+test('React OIDC - home page loads with sign-in CTA', async ({ page }) => {
+ await page.goto('/');
+
+ await expect(page.getByRole('link', { name: 'Sign In', exact: true })).toBeVisible();
+});
+
+test('React OIDC - sign in starts centralized login flow', async ({ page }) => {
+ await page.goto('/');
+
+ const configuredOidcHost = getConfiguredOidcHost();
+ const redirectPattern = configuredOidcHost
+ ? new RegExp(`${escapeRegExp(configuredOidcHost)}|\\/mock\\/authorize`)
+ : /openam-sdks\.forgeblocks\.com|\/mock\/authorize/;
+
+ await page.getByRole('link', { name: 'Sign In', exact: true }).click();
+ await page.waitForURL(redirectPattern);
+
+ const authorizeUrl = new URL(page.url());
+ if (authorizeUrl.pathname.includes('/mock/authorize')) {
+ expect(authorizeUrl.searchParams.get('client_id')).toBeTruthy();
+ expect(authorizeUrl.searchParams.get('redirect_uri')).toContain('/callback.html');
+ expect(authorizeUrl.searchParams.get('state')).toBeTruthy();
+ } else {
+ expect(authorizeUrl.hostname).toBe(configuredOidcHost || 'openam-sdks.forgeblocks.com');
+ }
+});
+
+test('React OIDC - real sign in flow with valid credentials', async ({ page }) => {
+ test.setTimeout(120000);
+
+ await openCentralizedLogin(page);
+ await submitLoginForm(page);
+ await page.waitForURL(`${BASE_URL}/**`, { timeout: 60000 });
+ await expect(page.locator('#account_dropdown')).toBeVisible();
+ await expect(page.getByRole('link', { name: 'Sign In', exact: true })).toHaveCount(0);
+
+ await page.getByRole('link', { name: 'Todos', exact: true }).click();
+ await page.waitForURL(`${BASE_URL}/todos`);
+ await expect(page.getByRole('heading', { name: 'Your Todos' })).toBeVisible();
+});
+
+test('React OIDC - login then logout, pass', async ({ page }) => {
+ test.setTimeout(120000);
+
+ await openCentralizedLogin(page);
+ await submitLoginForm(page);
+ await page.waitForURL(`${BASE_URL}/**`, { timeout: 60000 });
+ await expect(page.locator('#account_dropdown')).toBeVisible();
+
+ await page.locator('#account_dropdown').click();
+ await page.getByRole('link', { name: 'Sign Out' }).click();
+ await page.waitForURL(`${BASE_URL}/logout`);
+ await page.waitForURL(`${BASE_URL}/`, { timeout: 60000 });
+ await expect(page.getByRole('link', { name: 'Sign In', exact: true })).toBeVisible();
+ await expect(page.locator('#account_dropdown')).toHaveCount(0);
+});
+
+test('React OIDC - real sign in flow with invalid credentials', async ({ page }) => {
+ test.setTimeout(120000);
+
+ await openCentralizedLogin(page);
+ await submitLoginForm(page, 'invalidUsername', 'invalidPassword');
+
+ await expect(
+ page.getByText(
+ /Invalid username and\/or password|Validation Error|Login failure|Authentication failed/i,
+ ),
+ ).toBeVisible({ timeout: 60000 });
+ await expect(page.locator('#account_dropdown')).toHaveCount(0);
+});
+
+test('React OIDC - login error query shows failure message', async ({ page }) => {
+ await page.goto('/login?error=access_denied');
+
+ await expect(page.getByText('Sign in failed. Please try again.')).toBeVisible();
+});
+
+test('React OIDC - login error page can navigate back home', async ({ page }) => {
+ await page.goto('/login?error=access_denied');
+ await page.getByRole('link', { name: 'Home' }).click();
+
+ await expect(page).toHaveURL('/');
+ await expect(page.getByRole('link', { name: 'Sign In', exact: true })).toBeVisible();
+});
diff --git a/javascript/reactjs-todo-oidc/e2e/oidc-protected-route.spec.js b/javascript/reactjs-todo-oidc/e2e/oidc-protected-route.spec.js
new file mode 100644
index 00000000..7354334d
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/e2e/oidc-protected-route.spec.js
@@ -0,0 +1,21 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * oidc-protected-route.spec.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ *
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('React - OIDC Protected Route', () => {
+ test('Unauthenticated user navigating to /todos is redirected to /login, pass', async ({
+ page,
+ }) => {
+ await page.goto('/todos');
+ await page.waitForURL(/\/(login|mock\/authorize)|openam-sdks\.forgeblocks\.com/);
+ await expect(page).toHaveURL(/\/(login|mock\/authorize)|openam-sdks\.forgeblocks\.com/);
+ });
+});
diff --git a/javascript/reactjs-todo-oidc/e2e/oidc-todo.spec.js b/javascript/reactjs-todo-oidc/e2e/oidc-todo.spec.js
new file mode 100644
index 00000000..f03c29f7
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/e2e/oidc-todo.spec.js
@@ -0,0 +1,128 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * oidc-todo.spec.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ *
+ */
+import { test, expect } from '@playwright/test';
+import { username, password } from './utils/demo-user';
+
+const BASE_URL = 'https://localhost:8443';
+
+test.describe.serial('React - OIDC Todo', () => {
+ test.setTimeout(120000);
+
+ const createdTodoText = `Test create todo ${Date.now()}`;
+ const editedTodoText = `${createdTodoText} edited`;
+
+ async function loginAndGoToTodos(page, checkTodosApi = false) {
+ await page.goto(BASE_URL);
+ await page.getByRole('link', { name: 'Sign In', exact: true }).click();
+
+ await page.waitForURL(/openam-sdks\.forgeblocks\.com|\/mock\/authorize/, {
+ timeout: 60000,
+ });
+
+ const usernameField = page.getByLabel('Username');
+ const userNameField = page.getByLabel('User Name');
+ if (
+ await usernameField
+ .first()
+ .isVisible({ timeout: 3000 })
+ .catch(() => false)
+ ) {
+ await usernameField.first().fill(username);
+ } else {
+ await userNameField.first().fill(username);
+ }
+ await page.getByLabel('Password').first().fill(password);
+ await page
+ .getByRole('button', { name: /Sign On|Next|Login/i })
+ .first()
+ .click();
+
+ await page.waitForURL(`${BASE_URL}/**`, { timeout: 30000 });
+ const todosResponsePromise = checkTodosApi
+ ? page.waitForResponse(
+ (response) => response.url().includes('/todos') && response.request().method() === 'GET',
+ { timeout: 30000 },
+ )
+ : Promise.resolve(null);
+ await page.getByRole('link', { name: 'Todos', exact: true }).click();
+ await page.waitForURL(`${BASE_URL}/todos`);
+ await expect(page.getByRole('heading', { name: 'Your Todos' })).toBeVisible();
+ await expect(page.getByText('Collecting your todos')).toHaveCount(0);
+
+ if (checkTodosApi) {
+ const todosResponse = await todosResponsePromise;
+ await expect(todosResponse.ok()).toBeTruthy();
+ const payload = await todosResponse.json();
+ await expect(Array.isArray(payload)).toBeTruthy();
+ }
+ }
+
+ async function signOut(page) {
+ await page.locator('#account_dropdown').click();
+ await page.getByRole('link', { name: 'Sign Out' }).click();
+ await page.waitForURL(`${BASE_URL}/logout`);
+ await page.waitForURL(BASE_URL, { timeout: 30000 });
+
+ // Ensure we're properly logged out by checking for Sign In button
+ await expect(page.getByRole('link', { name: 'Sign In', exact: true })).toBeVisible({
+ timeout: 10000,
+ });
+ }
+
+ async function openTodoActions(page, todoText) {
+ const todoRow = page.locator('li', { has: page.getByText(todoText, { exact: true }) }).first();
+ await expect(todoRow).toBeVisible();
+ await todoRow.locator('button[id^="todo_action_"]').click();
+ }
+
+ test('Fetch todos API response is valid, pass', async ({ page }) => {
+ await loginAndGoToTodos(page, true);
+ await expect(page.getByText('Unable to load todos:')).toHaveCount(0);
+ });
+
+ test('Create todo then sign out/in and fetch it again, pass', async ({ page }) => {
+ await loginAndGoToTodos(page);
+ await page.getByPlaceholder('What needs doing?').fill(createdTodoText);
+ await page.getByRole('button', { name: 'Create' }).click();
+ await expect(page.getByText(createdTodoText, { exact: true })).toBeVisible();
+
+ await signOut(page);
+ await loginAndGoToTodos(page);
+ await expect(page.getByText(createdTodoText, { exact: true })).toBeVisible();
+ });
+
+ test('Edit todo then refresh and ensure changes persist, pass', async ({ page }) => {
+ await loginAndGoToTodos(page);
+ await expect(page.getByText(createdTodoText, { exact: true })).toBeVisible();
+
+ await openTodoActions(page, createdTodoText);
+ await page.getByRole('button', { name: 'Edit', exact: true }).click();
+ await page.getByLabel('Update todo text').fill(editedTodoText);
+ await page.getByRole('button', { name: 'Update Todo', exact: true }).click();
+ await expect(page.getByText(editedTodoText, { exact: true })).toBeVisible();
+
+ await page.reload();
+ await page.waitForURL(`${BASE_URL}/todos`);
+ await expect(page.getByText('Collecting your todos')).toHaveCount(0);
+ await expect(page.getByText(editedTodoText, { exact: true })).toBeVisible();
+ });
+
+ test('Delete todo and ensure it is no longer listed, pass', async ({ page }) => {
+ await loginAndGoToTodos(page);
+ await expect(page.getByText(editedTodoText, { exact: true })).toBeVisible();
+
+ await openTodoActions(page, editedTodoText);
+ await page.getByRole('button', { name: 'Delete', exact: true }).click();
+ await page.getByRole('button', { name: 'Delete Todo', exact: true }).click();
+
+ await expect(page.getByText(editedTodoText, { exact: true })).toHaveCount(0);
+ });
+});
diff --git a/javascript/reactjs-todo-oidc/e2e/utils/demo-user.js b/javascript/reactjs-todo-oidc/e2e/utils/demo-user.js
new file mode 100644
index 00000000..4c39debd
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/e2e/utils/demo-user.js
@@ -0,0 +1,10 @@
+/*
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ *
+ */
+export const username = 'JsAmSampleAppsE2E@user.com';
+export const password = 'Demo_12345!';
+export const displayName = 'Demo User';
diff --git a/javascript/reactjs-todo-oidc/package.json b/javascript/reactjs-todo-oidc/package.json
new file mode 100644
index 00000000..b69827c4
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/package.json
@@ -0,0 +1,62 @@
+{
+ "name": "reactjs-todo-oidc",
+ "version": "1.0.0",
+ "main": "index.js",
+ "description": "A Ping authenticated sample web app written in React",
+ "devDependencies": {
+ "@babel/cli": "^7.14.5",
+ "@babel/core": "^7.14.6",
+ "@babel/eslint-parser": "^7.14.7",
+ "@babel/preset-env": "^7.14.5",
+ "@babel/preset-react": "^7.14.5",
+ "@playwright/test": "^1.42.0",
+ "@types/node": "^20.11.24",
+ "autoprefixer": "^10.2.6",
+ "babel-loader": "^8.2.2",
+ "bootstrap": "^5.0.1",
+ "css-loader": "^5.2.6",
+ "eslint": "^8.57.0",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-config-standard": "^17.1.0",
+ "eslint-plugin-import": "^2.29.1",
+ "eslint-plugin-jsx": "^0.1.0",
+ "eslint-plugin-n": "^16.6.2",
+ "eslint-plugin-prettier": "^3.4.0",
+ "eslint-plugin-promise": "^6.1.1",
+ "eslint-plugin-react": "^7.34.1",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "local-web-server": "^4.2.1",
+ "mini-css-extract-plugin": "^1.6.0",
+ "postcss": "^8.3.5",
+ "postcss-loader": "^6.1.0",
+ "prettier": "^2.3.2",
+ "sass": "^1.35.1",
+ "sass-loader": "^12.1.0",
+ "shx": "^0.3.3",
+ "style-loader": "^2.0.0",
+ "webpack": "^5.72.0",
+ "webpack-cli": "^5.1.4"
+ },
+ "dependencies": {
+ "@forgerock/oidc-client": "latest",
+ "@forgerock/protect": "latest",
+ "cookie-parser": "^1.4.5",
+ "cors": "^2.8.5",
+ "dotenv": "^10.0.0",
+ "express": "^4.17.1",
+ "pouchdb": "^7.2.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.19.0",
+ "uuid": "^8.3.2"
+ },
+ "scripts": {
+ "build": "webpack",
+ "start": "webpack serve --mode development",
+ "lint": "eslint . --fix",
+ "e2e": "playwright test",
+ "e2e:ui": "playwright test --ui"
+ },
+ "author": "",
+ "license": "ISC"
+}
diff --git a/javascript/reactjs-todo-oidc/playwright.config.ts b/javascript/reactjs-todo-oidc/playwright.config.ts
new file mode 100644
index 00000000..1cbfd7d6
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/playwright.config.ts
@@ -0,0 +1,73 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const url = process.env.PLAYWRIGHT_TEST_BASE_URL || 'https://localhost:8443';
+
+export default defineConfig({
+ testDir: 'e2e',
+ fullyParallel: true,
+ forbidOnly: !!process.env.CI,
+ retries: process.env.CI ? 2 : 0,
+ workers: process.env.CI ? 1 : undefined,
+ reporter: 'html',
+ use: {
+ trace: 'on',
+ baseURL: `${url}`,
+ ignoreHTTPSErrors: true,
+ headless: !!process.env.CI,
+ },
+ webServer: [
+ {
+ command: 'npm run start',
+ url,
+ timeout: 120 * 1000,
+ reuseExistingServer: false,
+ cwd: './',
+ env: {
+ API_URL: 'http://localhost:9443',
+ DEBUGGER_OFF: 'true',
+ DEVELOPMENT: 'false',
+ PORT: '8443',
+ SERVER_URL: 'https://openam-sdks.forgeblocks.com/am',
+ WELLKNOWN_URL:
+ 'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
+ REALM_PATH: 'alpha',
+ SCOPE: 'openid profile me.read email',
+ TIMEOUT: '3000',
+ WEB_OAUTH_CLIENT: 'CentralLoginOAuthClient-',
+ REST_OAUTH_CLIENT: 'RestOAuthClient',
+ REST_OAUTH_SECRET: process.env.REST_OAUTH_SECRET || '',
+ INIT_PROTECT: 'bootstrap',
+ PINGONE_ENV_ID: '02fb4743-189a-4bc7-9d6c-a919edfe6447',
+ },
+ ignoreHTTPSErrors: true,
+ },
+ {
+ command: 'npm run start',
+ url: 'http://localhost:9443/healthcheck',
+ timeout: 120 * 1000,
+ reuseExistingServer: false,
+ cwd: '../todo-api/',
+ env: {
+ PORT: '9443',
+ SERVER_TYPE: 'AIC',
+ SERVER_URL: 'https://openam-sdks.forgeblocks.com/am',
+ REALM_PATH: 'alpha',
+ REST_OAUTH_CLIENT: 'RestOAuthClient',
+ REST_OAUTH_SECRET: process.env.REST_OAUTH_SECRET || '',
+ },
+ ignoreHTTPSErrors: true,
+ },
+ ],
+ /* Configure projects for major browsers */
+ projects: [
+ {
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
+ },
+ {
+ name: 'firefox',
+ grepInvert: /WebAuthN/i,
+ use: { ...devices['Desktop Firefox'] },
+ },
+ ],
+});
diff --git a/javascript/reactjs-todo-oidc/public/callback.html b/javascript/reactjs-todo-oidc/public/callback.html
new file mode 100644
index 00000000..16afb733
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/public/callback.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/reactjs-todo-oidc/public/index.html b/javascript/reactjs-todo-oidc/public/index.html
new file mode 100755
index 00000000..ca8e6473
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/public/index.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ping: A Sample React (Web) Todo App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript/reactjs-todo-oidc/webpack.config.js b/javascript/reactjs-todo-oidc/webpack.config.js
new file mode 100644
index 00000000..aeb9060c
--- /dev/null
+++ b/javascript/reactjs-todo-oidc/webpack.config.js
@@ -0,0 +1,131 @@
+/*
+ * ping-sample-web-react-todo-oidc
+ *
+ * webpack.config.js
+ *
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+const dotenv = require('dotenv');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
+
+module.exports = () => {
+ // Pull the local .env configuration, if present
+ const localEnv = dotenv.config().parsed || {};
+
+ // Use process environment variables for prod, but fallback to local .env for dev
+ const SERVER_URL = process.env.SERVER_URL || localEnv.SERVER_URL;
+ const APP_URL = process.env.APP_URL || localEnv.APP_URL;
+ const API_URL = process.env.API_URL || localEnv.API_URL;
+ const DEBUGGER_OFF = process.env.DEBUGGER_OFF || localEnv.DEBUGGER_OFF;
+ const DEVELOPMENT = process.env.DEVELOPMENT || localEnv.DEVELOPMENT;
+ const WEB_OAUTH_CLIENT = process.env.WEB_OAUTH_CLIENT || localEnv.WEB_OAUTH_CLIENT;
+ const REALM_PATH = process.env.REALM_PATH || localEnv.REALM_PATH;
+ const SCOPE = process.env.SCOPE || localEnv.SCOPE;
+ const SERVER_TYPE = process.env.SERVER_TYPE || localEnv.SERVER_TYPE;
+ const WELLKNOWN_URL = process.env.WELLKNOWN_URL || localEnv.WELLKNOWN_URL;
+ const INIT_PROTECT = process.env.INIT_PROTECT || localEnv.INIT_PROTECT;
+ const PINGONE_ENV_ID = process.env.PINGONE_ENV_ID || localEnv.PINGONE_ENV_ID;
+
+ return {
+ // Point to the top level source file
+ entry: {
+ app: './client/index.js',
+ },
+ resolve: {
+ extensions: ['', '.js', '.jsx'],
+ },
+ // This helps provide better debugging in browsers
+ devtool: 'source-map',
+ // The location of where the built files are placed
+ output: {
+ path: path.resolve(__dirname, 'public'),
+ filename: '[name].js',
+ },
+ // Dictates some behavior in Webpack, "development" is a bit quicker
+ mode: DEVELOPMENT === 'true' ? 'development' : 'production',
+ // Modules are essentially plugins that can extend/modify Webpack
+ // Here, we are using it to transpile React's JSX to ordinary functions
+ module: {
+ rules: [
+ {
+ // If JavaScript file ...
+ test: /\.js$/,
+ exclude: /(node_modules)/,
+ use: {
+ // Babel is a JavaScript transpiler (kind of like a compiler)
+ // It converts unsupported features to something browser's can use
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ // Transforms for browsers that support ESModules (e.g. modern browsers)
+ // and include standard React transformations
+ ['@babel/preset-env', { targets: { esmodules: true } }],
+ ['@babel/preset-react'],
+ ],
+ },
+ },
+ },
+ {
+ // If SCSS file ...
+ test: /\.(scss)$/,
+ use: [
+ // Injects CSS into DOM
+ 'style-loader',
+ // Extracts CSS imported into project into separate output
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ esModule: false,
+ },
+ },
+ // Allows for the loading of CSS via "import"
+ 'css-loader',
+ // Allows for post-processing of CSS
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ plugins: () => [require('autoprefixer')],
+ },
+ },
+ },
+ // Processes SCSS into CSS
+ 'sass-loader',
+ ],
+ },
+ ],
+ },
+ devServer: {
+ allowedHosts: ['localhost', 'react.example.com', '.example.com'],
+ server: 'https',
+ open: true,
+ client: {
+ overlay: false,
+ },
+ port: 8443,
+ historyApiFallback: true,
+ },
+ plugins: [
+ new MiniCssExtractPlugin(),
+ new webpack.DefinePlugin({
+ // Inject all the environment variable into the Webpack build
+ 'process.env.SERVER_URL': JSON.stringify(SERVER_URL),
+ 'process.env.APP_URL': JSON.stringify(APP_URL),
+ 'process.env.API_URL': JSON.stringify(API_URL),
+ 'process.env.DEBUGGER_OFF': JSON.stringify(DEBUGGER_OFF),
+ 'process.env.WEB_OAUTH_CLIENT': JSON.stringify(WEB_OAUTH_CLIENT),
+ 'process.env.REALM_PATH': JSON.stringify(REALM_PATH),
+ 'process.env.SCOPE': JSON.stringify(SCOPE),
+ 'process.env.SERVER_TYPE': JSON.stringify(SERVER_TYPE),
+ 'process.env.WELLKNOWN_URL': JSON.stringify(WELLKNOWN_URL),
+ 'process.env.INIT_PROTECT': JSON.stringify(INIT_PROTECT),
+ 'process.env.PINGONE_ENV_ID': JSON.stringify(PINGONE_ENV_ID),
+ }),
+ ],
+ };
+};
diff --git a/javascript/reactjs-todo/client/views/login.js b/javascript/reactjs-todo/client/views/login.js
deleted file mode 100755
index 5a289a66..00000000
--- a/javascript/reactjs-todo/client/views/login.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * forgerock-sample-web-react
- *
- * login.js
- *
- * Copyright (c) 2024 - 2025 Ping Identity Corporation. All rights reserved.
- * This software may be modified and distributed under the terms
- * of the MIT license. See the LICENSE file for details.
- */
-import React, { useContext, useEffect, useState } from 'react';
-import { Link, useSearchParams, useNavigate } from 'react-router-dom';
-
-import BackHome from '../components/utilities/back-home';
-import Loading from '../components/utilities/loading';
-import Card from '../components/layout/card';
-import { AppContext } from '../global-state';
-import Form from '../components/journey/form';
-
-import { CENTRALIZED_LOGIN } from '../constants';
-
-import { TokenManager, UserManager } from '@forgerock/javascript-sdk';
-
-/**
- * @function Login - React view for Login
- * @returns {Object} - React component object
- */
-export default function Login() {
- // Used for setting global authentication state
- const [contextState, methods] = useContext(AppContext);
-
- // Used for redirection after success
- const navigate = useNavigate();
- const [params] = useSearchParams();
-
- // Get the code and state from the URL query parameters
- const codeParam = params.get('code');
- const errorParam = params.get('error');
- const stateParam = params.get('state');
- const centralLogin = params.get('centralLogin');
- const journey = params.get('journey');
-
- // Get environment variable
- const isCentralizedLogin = CENTRALIZED_LOGIN === 'true' || centralLogin === 'true';
- const [state, setState] = useState({
- loadingMessage: '',
- });
-
- useEffect(() => {
- async function checkCentralizedLogin() {
- if (isCentralizedLogin) {
- if (codeParam && stateParam) {
- /** *****************************************************************
- * SDK INTEGRATION POINT
- * Summary: Get OAuth/OIDC tokens with Authorization Code Flow w/PKCE.
- * ------------------------------------------------------------------
- * Details:When the user return to this app after successfully logging in,
- * the URL will include code and state query parameters that need to
- * be passed in to complete the OAuth flow giving the user access
- ***************************************************************** */
- setState({
- loadingMessage: 'Success! Redirecting ...',
- });
- await authorize(codeParam, stateParam);
- } else if (errorParam) {
- // Do nothing as it will redirect for central login
- } else {
- /** *****************************************************************
- * SDK INTEGRATION POINT
- * Summary: Get OAuth/OIDC tokens with Authorization Code Flow w/PKCE.
- * ------------------------------------------------------------------
- * The key-value of `login: redirect` is what allows central-login.
- * Passing no arguments or a key-value of `login: 'embedded'` means
- * the app handles authentication locally
- ***************************************************************** */
- setState({
- loadingMessage: 'Redirecting ...',
- });
- await TokenManager.getTokens({ login: 'redirect' });
- }
- }
- }
- checkCentralizedLogin();
- }, []);
-
- async function authorize(codeParam, stateParam) {
- await TokenManager.getTokens({ query: { code: codeParam, state: stateParam } });
- const user = await UserManager.getCurrentUser();
- methods.setUser(user.name);
- methods.setEmail(user.email);
- methods.setAuthentication(true);
- navigate('/');
- }
-
- if (!isCentralizedLogin) {
- return (
-
-
-
-
-
-
-
- );
- } else {
- return (
-
-
-
-
-
- );
- }
-}
diff --git a/javascript/reactjs-todo/e2e/centralized-login.spec.js b/javascript/reactjs-todo/e2e/centralized-login.spec.js
deleted file mode 100644
index 98a127f3..00000000
--- a/javascript/reactjs-todo/e2e/centralized-login.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { password, username } from './utils/demo-user';
-
-test('React - Login with Centralized Login', async ({ page }) => {
- await page.goto('https://localhost:8443/?centralLogin=true');
-
- await page.getByRole('link', { name: 'Sign In', exact: true }).click();
-
- await page.getByLabel('User Name').fill(username);
- await page.getByLabel('Password').first().fill(password);
- await page.getByRole('button', { name: 'Next' }).click();
-
- // TODO: It should be fixed evantually. This line has been added as after succesfully logging in, the server
- // stops responding and it is necessary to reload the page in order for it to work. FYI: Only happens when running
- // e2e tests.
- await page.waitForTimeout(3000);
-
- await page.reload();
-
- await expect(page.getByText('Welcome back')).toBeVisible();
-});