@passflow/react 0.14.0 → 0.15.1

package/CHANGELOG.md

@@ -2,6 +2,72 @@
 
 All notable changes to `@passflow/react` are documented in this file.
 
+## [0.15.1] - 2026-11-02
+
+### Fixed
+
+- `PassflowFlow` navigates through its own router whatever the provider's `router` prop says. With the default value, every step inside the flow did a full page load through `window.location` to an unprefixed path, leaving a memory, hash or host router. Hosts that pass `router="react-router"` were not affected.
+- A navigation asked for with `replace: true` inside `PassflowFlow` replaces the history entry. It pushed a new one, because `replace` was handed to React Router as part of the destination.
+- The passwordless OTP screen and the 2FA verify form name the code field with a visible "Verification code" label. They used hidden text only, which fails WCAG labelling (axe `label-title-only`) once a wrong code shows an error.
+
+### Added
+
+- `FieldOtp` takes an optional `label`: the field then draws its own visible label above the boxes. `labelledBy` still works; a field takes one or the other. New stories: With label, With label error.
+- `PassflowProps`, the props of `PassflowFlow`, is exported from the package root.
+
+### Changed
+
+- `lodash` and `tailwind-merge` are no longer dependencies. lodash is CommonJS, so it could not be tree-shaken and added about 70 KB minified to an app's bundle; tailwind-merge resolved Tailwind class conflicts in a library that styles only with `passflow-*` classes.
+
+### Internal
+
+- CI loads the packed package in plain Node through both `require` and `import`, and fails if either throws or the two expose different exports.
+- README examples import from `@passflow/react` instead of the old package name.
+- Two flaky UI tests fixed: the Storybook audits wait for the theme to settle, and the FieldOtp length test no longer depends on keystroke timing.
+
+## [0.15.0] - 2026-11-02
+
+### Breaking
+
+- `react-router` is now a required peer dependency, `^7.0.0 || ^8.0.0`, and is no longer bundled, so the SDK and the host share one router. `react-router-dom` is not a peer. A host on React Router 7 adds `react-router`, which `react-router-dom` 7 already installs; a host on React Router 8 needs React 19.2.7 or later, as React Router 8 itself does. Hosts on React Router 6 are no longer supported. A host that routes with Wouter or TanStack Router installs `react-router` too, because the package imports it.
+- `PassflowFlow` inside a host React Router `<Router>` now uses that router. Mount it under a splat route, `<Route path="/auth/*" element={<PassflowFlow />} />`; `pathPrefix` is then relative to that route, and `routerType` is ignored with a console warning. Before, a nested flow ran a private router of its own. A flow with no host router behaves as before.
+- The CommonJS entry is `dist/index.cjs`, renamed from `dist/index.cjs.js`. Under the package's `"type": "module"`, Node loaded the old file as an empty module, so `require('@passflow/react')` returned nothing; it now returns the full export set. React Router 8 is ESM-only, so a CommonJS consumer on it relies on Node's `require(esm)`.
+- Requires Node `^22.12.0 || ^24.0.0 || >=26.0.0` (`engines`), the same lines as `@passflow/core`.
+
+### Changed
+
+- Requires `@passflow/core` 0.20.1 or later, up from 0.19.0.
+- One-time-code fields are one input instead of one per digit. The browser's one-time-code autofill works, a whole code pastes in one go, and numeric codes accept digits only, with the numeric keypad on phones. The boxes look as before, and `custom_css` aimed at `.passflow-field-otp` still styles each box.
+- An app's `customCss` is rendered as a `<style>` element inside `#passflow-wrapper`, and only when it is set, instead of in `document.head`. No `HelmetProvider` is needed.
+- Developed on React 19. React 18 is still supported and tested in CI.
+
+### Added
+
+- `FieldOtp`, the code field above, with its Storybook stories.
+
+### Fixed
+
+- `TwoFactorSetupMagicLinkFlow` reads `:token` from the host's router. With the router bundled it read a separate copy and never saw the host's route params.
+- Type declarations resolve under `moduleResolution` `node16`, `nodenext` and `bundler`, and the `require` entry has its own `.d.cts` declarations. CI type-checks the packed package as a consumer would, on TypeScript 5.9 and 7, with React 19 and React Router 8 and with React 18 and React Router 7.
+- The ESM and CommonJS entries load in plain Node with no DOM, as server rendering needs. 0.14.0 threw `window is not defined` at module load, and its ESM entry failed to link its named imports from `lodash`.
+- The `option` button's accessible name is all of its visible text, label and hint, so a voice-control user can say what they see (WCAG 2.5.3, flagged by axe 4.14).
+
+### Removed
+
+- The runtime dependencies `react-otp-input`, `react-helmet-async`, `history` and `tailwindcss-scoped-preflight`. `terser` is build-only, and React Router is no longer bundled.
+
+Dependencies: `@simplewebauthn/browser` 14, `react-error-boundary` 6, `query-string` 10 and `tailwind-merge` 3 at runtime, with `input-otp` new. The toolchain moves to TypeScript 7, Vite 8.3, Vitest 5, Biome 2, pnpm 12 and Storybook 10.6; none of it ships.
+
+## [0.14.0] - 2026-11-02
+
+### Changed
+
+- Password sign-up under an OIDC parent reaches the relying party. The provider's interceptor now covers `/auth/register`, so a sign-up on a PKCE app carries `parent_challenge_id` like sign-in does and follows the server's redirect back to the app.
+- The line shown while a session is handed over to the app is `ContinuingStatus`, a themed library component, instead of an inline-styled placeholder.
+- Requires `@passflow/core` 0.19.0 or later, up from 0.18.0.
+
+Needs a server that accepts an OIDC parent on password sign-up (Passflow `src/v0.22.0`).
+
 ## [0.13.0] - 2026-10-30
 
 ### Added

package/README.md

@@ -1,10 +1,10 @@
-# @passflow/passflow-react-sdk
+# @passflow/react
 
 This is a SDK for react application.
 
 ## Table of Contents
 
-- [@passflow/passflow-react-sdk](#passflowpassflow-react-sdk)
+- [@passflow/react](#passflowreact)
   - [Table of Contents](#table-of-contents)
   - [Local Development](#local-development)
     - [Using Local Passflow JS SDK](#using-local-passflow-js-sdk)
@@ -16,7 +16,7 @@ This is a SDK for react application.
   - [Integration](#integration)
     - [Passflow Cloud](#passflow-cloud)
     - [PassflowFlow](#passflowflow)
-    - [React Router DOM](#react-router-dom)
+    - [React Router](#react-router)
     - [Wouter](#wouter)
     - [TanStack Router](#tanstack-router)
   - [Props](#props)
@@ -137,13 +137,17 @@ Both scripts automatically start the demo app and Storybook. `pnpm test` uses th
 ## Installation
 
 ```bash
-pnpm add @passflow/passflow-react-sdk
+pnpm add @passflow/react react-router
 ```
 
+`react-router` (`^7.0.0 || ^8.0.0`) is a required peer dependency and is not bundled, so install it even when the app routes with Wouter or TanStack Router. `react-router-dom` is not needed: from v7 on, `BrowserRouter` and the rest are exported by `react-router`.
+
 ## Requirements
 
-- React 18+
-- React Router DOM v6/v7 or Wouter or TanStack Router
+- React 18+ (React 19.2.7+ with React Router 8)
+- React Router 7 or 8 (React Router 6 is not supported)
+- Node `^22.12.0 || ^24.0.0 || >=26.0.0`
+- Your app may route with React Router, Wouter or TanStack Router
 
 ## Integration
 
@@ -162,7 +166,7 @@ const passflowConfig: PassflowConfig = {
 export const PassflowProviderWrapper: FC<PropsWithChildren> = ({
   children,
 }) => {
-  const navigate = useNavigate(); // from react-router-dom
+  const navigate = useNavigate(); // from react-router
 
   return (
     <PassflowProvider
@@ -248,9 +252,18 @@ authentication-context claims those tokens carry.
 | federatedDisplayMode | "popup" \| "redirect" | Federated authentication display mode |
 | pathPrefix | string | Prefix for all routes (optional) |
 
-### React Router DOM
+Inside an app that already has a React Router `<Router>`, `PassflowFlow` uses that router rather than its own (`routerType` is ignored). Mount it under a splat route so its own routes can match, and `pathPrefix` is relative to that route:
+
+```tsx
+<Routes>
+  <Route path="/" element={<Home />} />
+  <Route path="/auth/*" element={<PassflowFlow successAuthRedirect="/" />} />
+</Routes>
+```
+
+### React Router
 
-Example of integration with React Router DOM:
+Example of integration with React Router:
 PS: The example uses the Declarative approach.
 
 ```tsx
@@ -260,8 +273,8 @@ import {
   SignUp,
   ForgotPassword,
   ForgotPasswordSuccess,
-} from "@passflow/passflow-react-sdk";
-import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
+} from "@passflow/react";
+import { BrowserRouter, Routes, Route, useNavigate } from "react-router";
 
 const passflowConfig = {
   url: import.meta.env.VITE_PASSFLOW_URL,
@@ -331,7 +344,7 @@ import {
   SignUp,
   ForgotPassword,
   ForgotPasswordSuccess,
-} from "@passflow/passflow-react-sdk";
+} from "@passflow/react";
 import { Switch, Route, useLocation } from "wouter";
 
 const passflowConfig = {
@@ -397,7 +410,7 @@ export const App = () => (
 );
 
 // PassflowProviderWrapper.tsx
-import { PassflowProvider } from '@passflow/passflow-react-sdk';
+import { PassflowProvider } from '@passflow/react';
 
 const passflowConfig = {
   url: import.meta.env.VITE_PASSFLOW_URL,
@@ -419,7 +432,7 @@ export const PassflowProviderWrapper = ({ children }) => (
 );
 
 // router/root.tsx
-import { useNavigation } from '@passflow/passflow-react-sdk';
+import { useNavigation } from '@passflow/react';
 import { Outlet, useNavigate } from '@tanstack/react-router';
 
 export const Root = () => {
@@ -438,7 +451,7 @@ import { QueryClient } from '@tanstack/react-query';
 import { createRouter } from '@tanstack/react-router';
 import { queryClient } from '../query';
 import { routerTree } from './routes';
-import { Passflow } from '@passflow/passflow-react-sdk';
+import { Passflow } from '@passflow/react';
 
 export interface RouterContext {
   queryClient: QueryClient;
@@ -466,7 +479,7 @@ import { Outlet, createRootRouteWithContext, createRoute, redirect } from '@tans
 import { RouterContext } from './router';
 import { Root } from './root';
 import { About, Home } from '@/pages';
-import { ForgotPassword, ForgotPasswordSuccess, SignIn, SignUp } from '@passflow/passflow-react-sdk';
+import { ForgotPassword, ForgotPasswordSuccess, SignIn, SignUp } from '@passflow/react';
 import { RootLayout } from '@/layouts';
 
 const redirectToSignin = () => {