feat(oidc-client): implement stronger patterns

Author: cerebrl

e2e/oidc-app/src/main.ts

@@ -1,63 +1,36 @@
 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',
+    config: {
+      clientId: 'WebOAuthClient',
+      redirectUri: 'http://localhost:8443/',
+      scope: 'openid',
+      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);
+  // create object from URL query parameters
+  const urlParams = new URLSearchParams(window.location.search);
+  const code = urlParams.get('code');
+  // const state = urlParams.get('state');
+  // get error and error_description if they exist
+  const error = urlParams.get('error');
+  // const errorDescription = urlParams.get('error_description');
+
+  if (!code && !error) {
+    const response = await oidcClient.authorize.background();
+
+    if ('error' in response) {
+      console.error('Authorization Error:', response);
+      window.location.assign(response.redirectUrl);
+      return;
+    } else if ('code' in response) {
+      console.log('Authorization Code:', response.code);
+    }
   }
 }
 

packages/oidc-client/README.md

@@ -1,3 +1,26 @@
 # oidc-client
 
 A generic OpenID Connect (OIDC) client library for JavaScript and TypeScript, designed to work with any OIDC-compliant identity provider.
+
+```js
+// Initialize OIDC Client
+const oidcClient = oidc({
+  /* config */
+});
+
+// Authorize API
+const authResponse = oidcClient.authorize.background(); // Returns code and state if successful, error and Auth URL if not
+const authUrl = oidcClient.authorize.url(); // Returns Auth URL or error
+
+// Tokens API
+const newTokens = oidcClient.tokens.exchange({
+  /* code, state */
+}); // Returns new tokens or error
+const existingTokens = oidcClient.tokens.get(); // Returns existing tokens or error
+const revokeResponse = oidcClient.tokens.revoke(); // Returns null or error
+const endSessionResponse = oidcClient.tokens.endSession(); // Returns null or error
+
+// User API
+const user = oidcClient.user.info(); // Returns user object or error
+const logoutResponse = oidcClient.user.logout(); // Returns null or error
+```

packages/oidc-client/package.json

@@ -31,7 +31,6 @@
     "@forgerock/sdk-oidc": "workspace:*",
     "@forgerock/sdk-request-middleware": "workspace:*",
     "@forgerock/sdk-types": "workspace:*",
-    "@forgerock/storage": "workspace:*",
     "@reduxjs/toolkit": "catalog:"
   },
   "nx": {

packages/oidc-client/src/index.ts

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

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

@@ -0,0 +1,67 @@
+import { iFrameManager } from '@forgerock/iframe-manager';
+import { createAuthorizeUrl, GetAuthorizationUrlOptions } from '@forgerock/sdk-oidc';
+
+import { createAuthorizeOptions, handleError, handleResponse } from './authorize.request.utils.js';
+
+import type { WellKnownResponse } from '@forgerock/sdk-types';
+
+import type { OidcConfig } from './config.types.js';
+
+export async function authorize(
+  wellknown: WellKnownResponse,
+  config: OidcConfig,
+  options?: GetAuthorizationUrlOptions,
+) {
+  const authorizePath = wellknown.authorization_endpoint;
+  const optionsWithDefaults = createAuthorizeOptions(config, options);
+
+  let response: Record<string, unknown>;
+
+  try {
+    /**
+     * If we support the pi.flow field, this means we are using a PingOne server.
+     * PingOne servers do not support redirection through iframes because they
+     * set iframe's to DENY.
+     */
+    if (wellknown.response_modes_supported?.includes('pi.flow')) {
+      /**
+       * We need to make a post (or a get) request and both are supported by
+       * PingOne.
+       */
+      const authorizeUrl = await createAuthorizeUrl(authorizePath, {
+        ...optionsWithDefaults,
+        prompt: 'none',
+        responseMode: 'pi.flow',
+      });
+      const res = await fetch(authorizeUrl, {
+        method: 'POST',
+        credentials: 'include',
+      });
+
+      response = await res.json();
+    } else {
+      const authorizeUrl = await createAuthorizeUrl(authorizePath, {
+        ...optionsWithDefaults,
+        prompt: 'none',
+      });
+      response = await iFrameManager().getParamsByRedirect({
+        url: authorizeUrl,
+        /***
+         * https://datatracker.ietf.org/doc/html/rfc6749#section-4.1.2
+         * The client MUST ignore unrecognized response parameters.
+         */
+        successParams: ['code', 'state'],
+        errorParams: ['error', 'error_description'],
+        timeout: config.serverConfig.timeout || 3000,
+      });
+    }
+
+    // Normalize response, for both success and failure, to handle both
+    // fetch and iframe
+    return await handleResponse(response, authorizePath, optionsWithDefaults);
+  } catch (error) {
+    // If an error occurs, we return an error response with the authorize URL
+    // so the application can handle the redirect.
+    return handleError(error, authorizePath, optionsWithDefaults);
+  }
+}

packages/oidc-client/src/lib/authorize.request.types.ts

@@ -0,0 +1,12 @@
+export interface AuthorizeSuccessResponse {
+  code: string;
+  state: string;
+  redirectUrl?: string; // Optional, used when the response is from a P1 server
+}
+
+export interface AuthorizeErrorResponse {
+  error: string;
+  error_description: string;
+  redirectUrl: string; // URL to redirect the user to for re-authorization
+  type: 'auth_error';
+}

packages/oidc-client/src/lib/authorize.request.utils.ts

@@ -0,0 +1,80 @@
+import { createAuthorizeUrl, GetAuthorizationUrlOptions } from '@forgerock/sdk-oidc';
+
+import { AuthorizeErrorResponse, AuthorizeSuccessResponse } from './authorize.request.types.js';
+import { OidcConfig } from './config.types.js';
+
+type OptionalAuthorizeOptions = Partial<GetAuthorizationUrlOptions>;
+
+export function createAuthorizeOptions(
+  config: OidcConfig,
+  options?: OptionalAuthorizeOptions,
+): GetAuthorizationUrlOptions {
+  return {
+    clientId: config.clientId,
+    redirectUri: config.redirectUri,
+    scope: config.scope || 'openid',
+    responseType: config.responseType || 'code',
+    ...options,
+  };
+}
+
+export async function handleResponse(
+  response: Record<string, unknown>,
+  authorizePath: string,
+  options: GetAuthorizationUrlOptions,
+): Promise<AuthorizeSuccessResponse | AuthorizeErrorResponse> {
+  // Test if response is from a fetch to PingOne
+  if ('authorizeResponse' in response) {
+    const authorizeResponse = response.authorizeResponse as AuthorizeSuccessResponse;
+    return authorizeResponse;
+  }
+  // Test if response is from an iframe
+  if ('code' in response && 'state' in response) {
+    const authorizeResponse = response as unknown as AuthorizeSuccessResponse;
+    return authorizeResponse;
+  }
+
+  /**
+   * If we reach here, it means the response is missing code or state.
+   * Let's create a new authorize URL with `prompt=login` to redirect the user to the
+   * authorization endpoint provide it to the application so it can handle the redirect.
+   */
+  const newAuthorizeUrl = await createAuthorizeUrl(authorizePath, options);
+
+  if ('error' in response && 'error_description' in response) {
+    const errorResponse = {
+      error: response.error as string,
+      error_description: response.error_description as string,
+      type: 'auth_error',
+      redirectUrl: newAuthorizeUrl,
+    } as AuthorizeErrorResponse;
+
+    return errorResponse;
+  } else {
+    return {
+      error_description: 'Unknown authorization error',
+      redirectUrl: newAuthorizeUrl,
+      type: 'auth_error',
+    } as AuthorizeErrorResponse;
+  }
+}
+
+export async function handleError(
+  error: unknown,
+  authorizePath: string,
+  options: GetAuthorizationUrlOptions,
+): Promise<AuthorizeErrorResponse> {
+  const message = error instanceof Error ? error.message : '';
+  /**
+   * Let's create a new authorize URL with `prompt=login` to redirect the user to the
+   * authorization endpoint provide it to the application so it can handle the redirect.
+   */
+  const newAuthorizeUrl = await createAuthorizeUrl(authorizePath, options);
+
+  return {
+    error: 'network_error',
+    error_description: message || 'An error occurred while fetching the authorization URL',
+    redirectUrl: newAuthorizeUrl,
+    type: 'auth_error',
+  };
+}