feat: implement-authorize-oidc-client

introduce the oidc-client with the authorize api. authoirize handles the
calling of authorize routes based on the well-known config.

when a p1 env is detected, it will use a post request
otherwise, a background request is done via a hidden iframe

Author: ryanbas21

.changeset/dirty-queens-design.md

@@ -0,0 +1,7 @@
+---
+'@forgerock/iframe-manager': minor
+'@forgerock/sdk-oidc': minor
+'@forgerock/oidc-client': minor
+---
+
+authorize functionality in oidc-client

.gitignore

@@ -6,6 +6,7 @@
 .npm/_logs
 
 # Generated code
+logs/*
 tmp/
 e2e/**/dist
 */dist/*

CLAUDE.md

@@ -0,0 +1,91 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the Ping JavaScript SDK - a monorepo containing multiple packages for web applications integrating with the Ping platform. The SDK provides APIs for user authentication, device management, and accessing Ping-secured resources.
+
+## Development Commands
+
+### Core Commands
+
+- `pnpm build` - Build all affected packages
+- `pnpm test` - Run tests for all affected packages
+- `pnpm lint` - Lint all affected packages
+- `pnpm format` - Format code using Prettier
+- `pnpm nx typecheck` - Run TypeScript type checking
+
+### Package Management
+
+- `pnpm create-package` - Generate a new library package using Nx
+- `pnpm nx serve <package-name>` - Serve a specific package in development
+- `pnpm nx test <package-name> --watch` - Run tests for a specific package in watch mode
+
+### E2E Testing
+
+- `pnpm test:e2e` - Run end-to-end tests for affected packages
+- Individual e2e apps are in `e2e/` directory with their own test suites
+
+## Architecture
+
+### Monorepo Structure
+
+The repository uses **Nx** as the monorepo tool with the following structure:
+
+```
+packages/
+├── davinci-client/          # DaVinci flow orchestration client
+├── device-client/           # Device management (binding, profiles, WebAuthn)
+├── oidc-client/            # OpenID Connect authentication client
+├── protect/                # Ping Protect fraud detection
+├── sdk-effects/            # Effect-based utilities (logger, storage, etc.)
+│   ├── iframe-manager/
+│   ├── logger/
+│   ├── oidc/
+│   ├── sdk-request-middleware/
+│   └── storage/
+├── sdk-types/              # Shared TypeScript types
+└── sdk-utilities/          # Common utilities (PKCE, URL handling)
+```
+
+### Key Packages
+
+- **davinci-client**: State management for DaVinci authentication flows using Redux Toolkit
+- **oidc-client**: OIDC authentication with token management and storage
+- **device-client**: Device binding, profiles, OATH, Push, and WebAuthn capabilities
+- **protect**: Fraud detection and risk assessment integration
+- **sdk-effects**: Effect-based architecture packages for common functionalities
+
+### Technology Stack
+
+- **Package Manager**: pnpm with workspace configuration
+- **Build Tool**: Vite for building and bundling
+- **Testing**: Vitest for unit tests, Playwright for e2e tests
+- **State Management**: Redux Toolkit (in davinci-client)
+- **TypeScript**: Strict typing with composite project configuration
+- **Linting**: ESLint with Prettier integration
+
+### Nx Configuration
+
+- Uses target defaults for build, test, lint, and typecheck
+- Caching enabled for build and test targets
+- Workspace layout configured for packages and e2e apps
+- Parallel execution limited to 1 for consistency
+
+### Package Dependencies
+
+Packages use workspace references (`workspace:*`) for internal dependencies and catalog references (`catalog:`) for shared external dependencies like `@reduxjs/toolkit`.
+
+### Testing Strategy
+
+- Unit tests: Vitest with coverage reporting
+- E2E tests: Playwright with dedicated test apps in `e2e/` directory
+- Mock API server available in `e2e/mock-api-v2/` for testing
+
+## Development Notes
+
+- All packages are built as ES modules with TypeScript declarations
+- Use `pnpm nx affected` commands to run tasks only on changed packages
+- The repository uses conventional commits and automated releases via changesets
+- Individual packages can be tested independently using their specific build/test scripts

e2e/oidc-app/package.json

@@ -9,6 +9,7 @@
     "serve": "pnpm nx nxServe"
   },
   "dependencies": {
+    "@forgerock/javascript-sdk": "^4.8.2",
     "@forgerock/oidc-client": "workspace:*"
   },
   "nx": {

e2e/oidc-app/src/main.ts

@@ -1 +1,64 @@
-console.log('Starting OIDC App...');
+import { oidc } from '@forgerock/oidc-client';
+import {
+  CallbackType,
+  Config,
+  FRAuth,
+  FRStep,
+  NameCallback,
+  PasswordCallback,
+} from '@forgerock/javascript-sdk';
+
+async function app() {
+  await Config.setAsync({
+    clientId: 'WebOAuthClient',
+    redirectUri: window.location.origin + '/',
+    scope: 'openid profile email me.read',
+    serverConfig: {
+      wellknown:
+        'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
+    },
+  });
+
+  const step = await FRAuth.start();
+  console.log('Step:', step);
+
+  if ('callbacks' in step) {
+    const name = step.getCallbackOfType<NameCallback>(CallbackType.NameCallback);
+
+    const password = step.getCallbackOfType<PasswordCallback>(CallbackType.PasswordCallback);
+
+    name.setName('devicetestuser');
+    password.setPassword('password');
+  }
+
+  const success = await FRAuth.next(step as FRStep);
+  console.log('success:', success);
+
+  const oidcClient = await oidc({
+    serverConfig: {
+      wellknown:
+        'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
+    },
+  });
+
+  if (oidcClient.error || !oidcClient.authorizeSilently || !oidcClient.createAuthorizeUrl) {
+    console.error('Error initializing oidc client:', oidcClient.error);
+    return;
+  }
+
+  const result = await oidcClient.authorizeSilently({
+    clientId: 'WebOAuthClient',
+    redirectUri: window.location.origin + '/',
+    responseType: 'code',
+    scope: 'openid',
+  });
+
+  if ('error' in result) {
+    console.error('Error during authorization:', result.error);
+    return;
+  } else {
+    console.log('returning resolved params,', result);
+  }
+}
+
+app();

packages/oidc-client/package.json

@@ -26,8 +26,13 @@
     "test:watch": "pnpm nx nxTest --watch"
   },
   "dependencies": {
+    "@forgerock/iframe-manager": "workspace:*",
+    "@forgerock/sdk-logger": "workspace:*",
+    "@forgerock/sdk-oidc": "workspace:*",
+    "@forgerock/sdk-request-middleware": "workspace:*",
     "@forgerock/sdk-types": "workspace:*",
-    "@forgerock/storage": "workspace:*"
+    "@forgerock/storage": "workspace:*",
+    "@reduxjs/toolkit": "catalog:"
   },
   "nx": {
     "tags": ["scope:package"]

packages/oidc-client/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/token-store.js';
+export * from './lib/client.store.js';

packages/oidc-client/src/lib/authorize.slice.ts

@@ -0,0 +1,23 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';
+
+const authorizeSlice = createApi({
+  reducerPath: 'authorizeSlice',
+  baseQuery: fetchBaseQuery({
+    credentials: 'include',
+    prepareHeaders: (headers) => {
+      headers.set('Content-Type', 'application/json');
+      headers.set('Accept', 'application/json');
+      headers.set('x-requested-with', 'ping-sdk');
+      headers.set('x-requested-platform', 'javascript');
+
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    handleAuthorize: builder.query<string, string>({
+      query: (authorizeUrl) => authorizeUrl,
+    }),
+  }),
+});
+
+export { authorizeSlice };

packages/oidc-client/src/lib/client.store.ts

@@ -0,0 +1,120 @@
+import { iFrameManager } from '@forgerock/iframe-manager';
+import { createAuthorizeUrl, GetAuthorizationUrlOptions } from '@forgerock/sdk-oidc';
+import { createOidcStore } from './store.js';
+import { fetchWellKnownConfig } from './wellknown.api.js';
+import { RequestMiddleware } from '@forgerock/sdk-request-middleware';
+import { handleAuthorize, recreateAuthorizeUrl } from './client.store.utils.js';
+
+interface OIDCConfig {
+  prefix?: string;
+  serverConfig: {
+    wellknown: string;
+  };
+  middleware?: RequestMiddleware[];
+  logger?: ReturnType<typeof import('@forgerock/sdk-logger').logger>;
+}
+
+interface AuthorizeSuccessResponse {
+  code: string;
+  state: string;
+  redirectUrl?: string; // Optional, used when the response is from a P1 server
+}
+
+interface AuthorizeUrlResponse {
+  authorizeUrl: string;
+}
+
+interface AuthorizeErrorResponse {
+  error: string;
+  error_description?: string;
+  state?: string;
+}
+
+type AuthorizeResponse = AuthorizeSuccessResponse | AuthorizeUrlResponse | AuthorizeErrorResponse;
+
+export type { AuthorizeSuccessResponse, AuthorizeErrorResponse, AuthorizeResponse, OIDCConfig };
+
+export async function oidc(config: OIDCConfig) {
+  const store = createOidcStore({ requestMiddleware: config.middleware, logger: config.logger });
+  const iframeMgr = iFrameManager();
+
+  if (!config?.serverConfig?.wellknown) {
+    return {
+      error: 'requires a wellknown url initializing this factory.',
+    };
+  }
+
+  const wellKnownUrl = config.serverConfig.wellknown;
+  const { data, error } = await store.dispatch(
+    fetchWellKnownConfig.endpoints.fetchWellKnownConfig.initiate(wellKnownUrl),
+  );
+  if (error || !data) {
+    return {
+      error: `Error fetching wellknown config`,
+    };
+  }
+
+  /**
+   * if true, then we need to use GET or POST (p1?)
+   * if false, we use iframe.
+   */
+  const supportsPiFlow = data.response_modes_supported?.includes('pi.flow');
+
+  return {
+    createAuthorizeUrl: createAuthorizeUrl,
+    authorizeSilently: async (
+      options: GetAuthorizationUrlOptions,
+      timeout = 3000,
+    ): Promise<AuthorizeResponse | { error: string }> => {
+      const authorizePath = data.authorization_endpoint;
+
+      const authorizeUrl = await createAuthorizeUrl(authorizePath, options);
+
+      try {
+        /**
+         * If we support the pi flow field,
+         * this means we are using a p1 server. p1 servers
+         * do not support redirection through iframes because they
+         * set iframe's to DENY.
+         */
+        if (supportsPiFlow) {
+          /**
+           * We need to make a post (or a get) request
+           * and both are supported by p1.
+           */
+          return handleAuthorize(authorizeUrl);
+        }
+
+        const resolvedParams = await iframeMgr.getParamsByRedirect({
+          url: authorizeUrl,
+          /***
+           * https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2
+           * The client MUST ignore unrecognized response parameters.
+           * The authorization code string size is left undefined by this specification.
+           * The client should avoid making assumptions about code value sizes.
+           * The authorization server SHOULD document the size of any value it issues.
+           */
+          successParams: ['code', 'state'],
+          errorParams: ['error', 'error_description'],
+          timeout,
+        });
+
+        if ('error' in resolvedParams) {
+          return recreateAuthorizeUrl(resolvedParams, authorizePath, options);
+        }
+
+        const { code, state } = resolvedParams;
+
+        return {
+          code,
+          state,
+        };
+      } catch (iframeError: unknown) {
+        return {
+          error: 'iframe_error',
+          error_description: (iframeError as Error)?.message || 'Authorization iframe failed',
+        };
+      }
+    },
+  };
+}