refactor(journey): migrate journey flow from legacy sdk to journey-client

.changeset/journey-client-migration.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/login-widget': major
+---
+
+Migrate the journey flow implementation from `@forgerock/javascript-sdk` to `@forgerock/journey-client`.

.env.example

@@ -4,6 +4,7 @@ FR_AM_COOKIE_NAME=<<<(string) The name of the ForgeRock server cookie>>>
 FR_REALM_PATH=<<<(string) Realm path of AM>>>
 FR_OAUTH_PUBLIC_CLIENT=<<<(string) Your Public OAuth client name/ID>>>
 # FR_OAUTH_SCOPE=openid profile me.read  # optional — AM uses client defaults if omitted
+FR_AM_WELLKNOWN_URL=<<<(string) Your OIDC Discovery Wellknown Endpoint>>>
 
 # BFF session signing
 COOKIE_SECRET=<<<(string) At least 32 characters for HMAC signing>>>

.github/workflows/ci.yml

@@ -32,6 +32,7 @@ jobs:
       FR_AM_COOKIE_NAME: ${{ secrets.VITE_FR_AM_COOKIE_NAME }}
       FR_OAUTH_PUBLIC_CLIENT: ${{ secrets.VITE_FR_OAUTH_PUBLIC_CLIENT }}
       FR_REALM_PATH: ${{ secrets.VITE_FR_REALM_PATH }}
+      FR_AM_WELLKNOWN_URL: ${{ secrets.FR_AM_WELLKNOWN_URL }}
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -122,6 +123,7 @@ jobs:
       FR_AM_COOKIE_NAME: ${{ secrets.VITE_FR_AM_COOKIE_NAME }}
       FR_OAUTH_PUBLIC_CLIENT: ${{ secrets.VITE_FR_OAUTH_PUBLIC_CLIENT }}
       FR_REALM_PATH: ${{ secrets.VITE_FR_REALM_PATH }}
+      FR_AM_WELLKNOWN_URL: ${{ secrets.FR_AM_WELLKNOWN_URL }}
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4

README.md

@@ -34,7 +34,7 @@ The ForgeRock Login Widget is an all-inclusive UI component for adding authentic
 
 It works with React, Vue, Angular, Svelte, and vanilla JavaScript — any modern client-side JavaScript framework. It does not currently support server-side rendering (SSR) or Node.js.
 
-The widget uses the [ForgeRock SDK for JavaScript](https://docs.pingidentity.com/sdks/latest/sdks/tutorials/javascript/index.html) internally and adds a UI rendering layer with state management. This rendering layer is built with [Svelte](https://svelte.dev/) and [Tailwind](https://tailwindcss.com/), but both are compiled away — the resulting widget is framework-agnostic with no runtime dependencies.
+The widget uses [Journey Client](https://developer.pingidentity.com/orchsdks/journey/usage/javascript/index.html) for journey execution, and the [ForgeRock SDK for JavaScript](https://docs.pingidentity.com/sdks/latest/sdks/tutorials/javascript/index.html) for OAuth/OIDC tokens, user info, and request utilities. It adds a UI rendering layer with state management. This rendering layer is built with [Svelte](https://svelte.dev/) and [Tailwind](https://tailwindcss.com/), but both are compiled away — the resulting widget is framework-agnostic with no runtime dependencies.
 
 ## Quick Start
 
@@ -52,7 +52,14 @@ import Widget, { configuration, journey } from '@forgerock/login-widget';
 
 const config = configuration();
 config.set({
+  // REQUIRED for journeys
+  journeyClient: {
+    serverConfig: {
+      wellknown: 'https://your-tenant.forgeblocks.com/am/.well-known/am-configuration',
+    },
+  },
   forgerock: {
+    // REQUIRED if you use OAuth/OIDC tokens, user info, or request()
     serverConfig: {
       baseUrl: 'https://your-tenant.forgeblocks.com/am/',
       timeout: 3000,

TESTING.md

@@ -73,6 +73,7 @@ E2E tests require ForgeRock AM connection details. Set these in your environment
 | `VITE_FR_AM_COOKIE_NAME`      | AM session cookie name |
 | `VITE_FR_OAUTH_PUBLIC_CLIENT` | OAuth 2.0 client ID    |
 | `VITE_FR_REALM_PATH`          | AM realm path          |
+| `FR_AM_WELLKNOWN_URL`         | AM wellknown URL       |
 
 ## Linting
 

apps/login-app/README.md

@@ -50,12 +50,13 @@ pnpm --filter @forgerock/login-app run preview
 
 The app requires environment variables to connect to a ForgeRock AM instance. Set these in a `.env` file at the repository root or export them in your shell.
 
-| Variable                      | Required | Description                                                            |
-| ----------------------------- | -------- | ---------------------------------------------------------------------- |
-| `VITE_FR_AM_URL`              | Yes      | ForgeRock AM base URL (e.g., `https://openam-sdks.forgeblocks.com/am`) |
-| `VITE_FR_AM_COOKIE_NAME`      | Yes      | AM session cookie name                                                 |
-| `VITE_FR_OAUTH_PUBLIC_CLIENT` | No       | OAuth 2.0 public client ID                                             |
-| `VITE_FR_REALM_PATH`          | No       | AM realm path                                                          |
+| Variable                      | Required | Description                                                                                                               |
+| ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `VITE_FR_AM_URL`              | Yes      | ForgeRock AM base URL (e.g., `https://openam-sdks.forgeblocks.com/am`)                                                    |
+| `VITE_FR_AM_COOKIE_NAME`      | Yes      | AM session cookie name                                                                                                    |
+| `VITE_FR_OAUTH_PUBLIC_CLIENT` | No       | OAuth 2.0 public client ID                                                                                                |
+| `VITE_FR_REALM_PATH`          | No       | AM realm path                                                                                                             |
+| `FR_AM_WELLKNOWN_URL`         | Yes      | ForgeRock AM Wellknown URL (e.g., `https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration`) |
 
 ## Type Checking
 

apps/login-app/src/routes/(app)/+layout.server.ts

@@ -1,18 +1,35 @@
 /**
  *
- * Copyright © 2025 Ping Identity Corporation. All right reserved.
+ * Copyright © 2025-2026 Ping Identity Corporation. All right reserved.
  *
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
  *
  **/
 
 import { env } from '$env/dynamic/private';
+import { error } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = () => ({
-  amUrl: env.FR_AM_URL ?? '',
-  clientId: env.FR_OAUTH_PUBLIC_CLIENT ?? '',
-  realmPath: env.FR_REALM_PATH ?? '',
-  scope: env.FR_OAUTH_SCOPE,
-});
+export const load: LayoutServerLoad = () => {
+  const amUrl = env.FR_AM_URL;
+  const clientId = env.FR_OAUTH_PUBLIC_CLIENT;
+  const realmPath = env.FR_REALM_PATH;
+  const wellknown = env.FR_AM_WELLKNOWN_URL;
+  const scope = env.FR_OAUTH_SCOPE;
+
+  if (!amUrl || !realmPath || !wellknown) {
+    throw error(
+      500,
+      'Login App is not configured. Ensure the required environment variables like FR_AM_URL, FR_REALM_PATH, and FR_AM_WELLKNOWN_URL are set before starting the app.',
+    );
+  }
+
+  return {
+    amUrl,
+    clientId,
+    realmPath,
+    scope,
+    wellknown,
+  };
+};

apps/login-app/src/routes/(app)/+layout.ts

@@ -1,6 +1,6 @@
 /**
  *
- * Copyright © 2025 Ping Identity Corporation. All right reserved.
+ * Copyright © 2025-2026 Ping Identity Corporation. All right reserved.
  *
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.

apps/login-app/src/routes/(app)/+page.svelte

@@ -29,7 +29,11 @@
   const journeyParam = $page.url.searchParams.get('journey');
   const suspendedIdParam = $page.url.searchParams.get('suspendedId');
 
-  const journeyStore: JourneyStore = initializeJourney();
+  const journeyStore: JourneyStore = initializeJourney({
+    serverConfig: {
+      wellknown: data.wellknown,
+    },
+  });
 
   let hasSubmitted = false;
   let redirectForm: HTMLFormElement | null = null;
@@ -47,7 +51,6 @@
       await journeyStore.resume(location.href);
       goto('/', { replaceState: true });
     } else {
-
       // noSession set to false is required to receive session token from AM
       const query: Record<string, string> = {
         noSession: 'false',
@@ -62,7 +65,7 @@
       query.gotoOnFail = data.redirectParams?.gotoOnFail;
 
       journeyStore.start({
-        tree: journeyParam || authIndexValue || undefined,
+        journey: journeyParam || authIndexValue || 'Login',
         query,
         // recaptchaAction: 'MyTestAction',
       });

apps/login-app/src/routes/(app)/register/+page.svelte

@@ -1,6 +1,6 @@
 <!--
 
- Copyright © 2025 Ping Identity Corporation. All right reserved.
+ Copyright © 2025-2026 Ping Identity Corporation. All right reserved.
 
  This software may be modified and distributed under the terms
  of the MIT license. See the LICENSE file for details.
@@ -23,7 +23,11 @@
   /** @type {import('./$types').PageData} */
   export let data;
 
-  const journeyStore: JourneyStore = initializeJourney();
+  const journeyStore: JourneyStore = initializeJourney({
+    serverConfig: {
+      wellknown: data.wellknown,
+    },
+  });
   const oauthStore: OAuthStore = initializeOAuth();
   const userStore: UserStore = initializeUser();
 
@@ -34,7 +38,7 @@
 
   // Use if not initializing journey in a "context module"
   onMount(async () => {
-    journeyStore.start({ tree: 'Registration' });
+    journeyStore.start({ journey: 'Registration' });
   });
 
   $: {

apps/login-app/src/routes/e2e/widget/+page.svelte

@@ -21,7 +21,12 @@
   }
 
   onMount(async () => {
-    configuration().set({
+    configuration({
+      journeyClient: {
+        serverConfig: {
+          wellknown: 'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
+        },
+      },
       forgerock: {
         clientId: 'WebOAuthClient',
         redirectUri: `${window.location.origin}/callback`,

apps/login-app/src/routes/e2e/widget/inline/+page.svelte

@@ -1,6 +1,6 @@
 <!--
 
- Copyright © 2025 Ping Identity Corporation. All right reserved.
+ Copyright © 2025-2026 Ping Identity Corporation. All right reserved.
 
  This software may be modified and distributed under the terms
  of the MIT license. See the LICENSE file for details.
@@ -20,10 +20,6 @@
     email: string;
   };
 
-  const config = configuration();
-  const componentEvents = component();
-  const journeyEvents = journey();
-
   let authIndexValueParam = $page.url.searchParams.get('authIndexValue');
   let journeyParam = $page.url.searchParams.get('journey');
   let recaptchaParam = $page.url.searchParams.get('recaptchaAction');
@@ -38,21 +34,6 @@
     userResponse = null;
   }
 
-  componentEvents.subscribe((event) => {
-    if (event.lastAction === 'mount') {
-      console.log('Form mounted');
-    }
-  });
-  journeyEvents.subscribe((event) => {
-    if (event?.user?.successful) {
-      userEvent = event.user;
-      userResponse = event.user.response as UserResponseObj;
-    }
-    if (event.journey.error || event.oauth.error || event.user.error) {
-      console.log('Login failure event fired');
-    }
-  });
-
   onMount(async () => {
     let content;
     /**
@@ -63,7 +44,12 @@
       content = response.ok && (await response.json());
     }
 
-    config.set({
+    configuration({
+      journeyClient: {
+        serverConfig: {
+          wellknown: 'https://openam-sdks.forgeblocks.com/am/oauth2/alpha/.well-known/openid-configuration',
+        },
+      },
       forgerock: {
         clientId: 'WebOAuthClient',
         redirectUri: `${window.location.origin}/callback`,
@@ -78,6 +64,26 @@
         termsAndConditions: 'https://www.forgerock.com/terms',
       },
     });
+
+    const componentEvents = component();
+    const journeyEvents = journey();
+
+    componentEvents.subscribe((event) => {
+      if (event.lastAction === 'mount') {
+        console.log('Form mounted');
+      }
+    });
+
+    journeyEvents.subscribe((event) => {
+      if (event?.user?.successful) {
+        userEvent = event.user;
+        userResponse = event.user.response as UserResponseObj;
+      }
+      if (event.journey.error || event.oauth.error || event.user.error) {
+        console.log('Login failure event fired');
+      }
+    });
+
     new Widget({ target: formEl, props: { type: 'inline' } });
     // Start the  journey after initialization or within the form.onMount event
     journeyEvents.start({
@@ -97,4 +103,4 @@
   </ul>
   <button on:click={logout}>Logout</button>
 {/if}
-<div bind:this={formEl} class={`${userEvent?.successful ? 'tw_hidden' : ''} tw_p-6`} />
+<div bind:this={formEl} class={`${userEvent?.successful ? 'tw_hidden' : ''} tw_p-6`}></div>