@passflow/react 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 All notable changes to `@passflow/react` are documented in this file.
 
+## [0.16.0] - 2026-11-03
+
+### Breaking
+
+- `react-router` is no longer a peer dependency, and the package does not import it. The only peers are `react` and `react-dom`, `^18 || ^19`. `PassflowFlow` keeps its own small router, so it works the same in an app that routes with React Router, TanStack Router, Wouter, another router, or none. A host that installed `react-router` only for this package can remove it.
+- `PassflowFlow` no longer picks up a host React Router `<Router>`, and the console warning about `routerType` inside one is gone. Inside an app router in browser mode it shares the address bar with it: each side sees the other's navigations, and Back reaches both. Mount it on a catch-all route (`/auth/*` in React Router, `/auth/$` in TanStack Router, `<Route path="/auth" nest>` in Wouter).
+- `pathPrefix` is an absolute path from the root of the URL. When it is not given, the flow takes it from the first URL it sees, so `<PassflowFlow />` on `/auth` or `/auth/signin` uses `/auth`. Before, inside a host router, it was relative to the parent route.
+- `TwoFactorSetupMagicLinkFlow` no longer uses React Router's `useParams`. It reads the token from the URL segment after `/two-factor-setup-magic-link/`, or from a new `token` prop.
+
+### Added
+
+- `<PassflowFlow />` with no props works: browser history, prefix from the URL, every screen at a fixed path under it (`/signin`, `/signup`, `/verify-challenge-otp`, `/two-factor-setup-magic-link/:token`, …).
+- Full control: pass `location` and `navigate` together and the app's router owns the location, for example a TanStack Router memory history. Their types are exported as `PassflowFlowLocation` and `PassflowFlowNavigate`.
+- `PassflowFlow` serves the 2FA setup magic link (`/two-factor-setup-magic-link/:token`) as one of its screens.
+
+### Fixed
+
+- Forms inside `PassflowFlow` read search params from the flow's location. In memory or hash mode, or under `location` + `navigate`, they read the address bar, which never carried them; forgot-password then threw "Invalid default method param".
+
+### Internal
+
+- Tests run the zero-config flow inside React Router, TanStack Router and Wouter (jsdom), and inside a TanStack Router app in Chromium. `@tanstack/react-router` and `wouter` are dev dependencies; `react-router` stays one, for those tests and the docs.
+- The consumer type check installs no router.
+
+## [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

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)
@@ -137,17 +137,15 @@ Both scripts automatically start the demo app and Storybook. `pnpm test` uses th
 ## Installation
 
 ```bash
-pnpm add @passflow/react react-router
+pnpm add @passflow/react
 ```
 
-`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`.
+No router is needed. `PassflowFlow` has its own small router, and works on its own or inside an app routed by React Router, TanStack Router, Wouter or anything else.
 
 ## Requirements
 
-- React 18+ (React 19.2.7+ with React Router 8)
-- React Router 7 or 8 (React Router 6 is not supported)
+- React 18 or 19
 - Node `^22.12.0 || ^24.0.0 || >=26.0.0`
-- Your app may route with React Router, Wouter or TanStack Router
 
 ## Integration
 
@@ -246,21 +244,63 @@ authentication-context claims those tokens carry.
 
 ### PassflowFlow
 
+The whole sign-in experience on its own pages: sign-in, sign-up, one-time codes, magic links, password reset, invitations and two-factor. It needs no router and no setup:
+
+```tsx
+<PassflowProvider url="https://auth.example.com" appId="your-app-id">
+  <PassflowFlow />
+</PassflowProvider>
+```
+
 | Prop | Type | Description |
 |------|------|-------------|
 | successAuthRedirect | string | URL to redirect after successful authentication |
-| federatedDisplayMode | "popup" \| "redirect" | Federated authentication display mode |
-| pathPrefix | string | Prefix for all routes (optional) |
+| federatedDisplayMode | "modal" \| "redirect" | Federated authentication display mode |
+| pathPrefix | string | Where the flow lives, such as `/auth`. Optional: worked out from the first URL |
+| routerType | "browser" \| "hash" \| "memory" | The history the flow keeps. Default `browser` |
+| location, navigate | see below | Full control by the app's router. Optional, always together |
+
+**Paths.** The flow's screens are `<prefix>/signin`, `<prefix>/signup`, `<prefix>/verify-challenge-otp`, `<prefix>/verify-challenge-magic-link`, `<prefix>/forgot-password`, `<prefix>/forgot-password/success`, `<prefix>/password/reset`, `<prefix>/invitation`, `<prefix>/two-factor-verify`, `<prefix>/two-factor-setup` and `<prefix>/two-factor-setup-magic-link/:token`. Without `pathPrefix` the flow takes the prefix from the first URL it sees: `/auth/signin` and `/auth` both give `/auth`, `/` gives none. A path under the prefix that names no screen goes to sign-in.
+
+**Inside an app's router.** Mount the flow on a catch-all route; nothing else is needed. The flow moves the address bar and announces it with `popstate`, the event React Router, TanStack Router and Wouter listen to, so the app's router follows the flow and the flow follows the app, Back and Forward included:
+
+```tsx
+// TanStack Router
+const authRoute = createRoute({ getParentRoute: () => rootRoute, path: '/auth/$', component: () => <PassflowFlow /> });
+
+// React Router
+<Route path="/auth/*" element={<PassflowFlow />} />
 
-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:
+// Wouter
+<Route path="/auth" nest><PassflowFlow /></Route>
+```
+
+**`routerType`.** `browser` (default) uses the address bar. `hash` keeps the flow's path after `#`. `memory` leaves the URL alone, for an embedded widget or tests.
+
+**Full control.** When the app's router does not use the address bar (it runs in hash or memory mode), hand the flow its location and a way to move it. `routerType` is then not used:
 
 ```tsx
-<Routes>
-  <Route path="/" element={<Home />} />
-  <Route path="/auth/*" element={<PassflowFlow successAuthRedirect="/" />} />
-</Routes>
+// TanStack Router with a memory or hash history
+function AuthPage() {
+  const router = useRouter();
+  const location = useRouterState({ select: (state) => state.location });
+  return (
+    <PassflowFlow
+      location={{ pathname: location.pathname, search: location.searchStr }}
+      navigate={(to, { replace }) => {
+        const href = `${to.pathname}${to.search}`;
+        if (replace) router.history.replace(href);
+        else router.history.push(href);
+      }}
+    />
+  );
+}
 ```
 
+`TwoFactorSetupMagicLinkFlow` can also be mounted on its own page. It reads the token from the URL (the segment after `/two-factor-setup-magic-link/`), or takes it as a `token` prop.
+
+The sections below wire the app's router into the **standalone form components** (`SignIn`, `SignUp`, …) through `PassflowProvider`'s `navigate` and `router` props. `PassflowFlow` does not need them.
+
 ### React Router
 
 Example of integration with React Router:
@@ -273,7 +313,7 @@ import {
   SignUp,
   ForgotPassword,
   ForgotPasswordSuccess,
-} from "@passflow/passflow-react-sdk";
+} from "@passflow/react";
 import { BrowserRouter, Routes, Route, useNavigate } from "react-router";
 
 const passflowConfig = {
@@ -344,7 +384,7 @@ import {
   SignUp,
   ForgotPassword,
   ForgotPasswordSuccess,
-} from "@passflow/passflow-react-sdk";
+} from "@passflow/react";
 import { Switch, Route, useLocation } from "wouter";
 
 const passflowConfig = {
@@ -410,7 +450,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,
@@ -432,7 +472,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 = () => {
@@ -451,7 +491,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;
@@ -479,7 +519,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 = () => {