@vaadin/hilla-react-auth 24.6.0-beta4 → 24.7.0-alpha2

package/ProtectedRoute.d.ts

@@ -1,4 +1,4 @@
-import { type IndexRouteObject, type NonIndexRouteObject } from 'react-router-dom';
+import { type IndexRouteObject, type NonIndexRouteObject } from 'react-router';
 import { type AccessProps } from './useAuth.js';
 type CustomMetadata = Record<string, any>;
 type HandleWithAuth = Readonly<{

package/ProtectedRoute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProtectedRoute.d.ts","sourceRoot":"","sources":["src/ProtectedRoute.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAY,KAAK,mBAAmB,EAAe,MAAM,kBAAkB,CAAC;AAC1G,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,cAAc,CAAC;AAE7D,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1C,KAAK,cAAc,GAAG,QAAQ,CAAC;IAAE,MAAM,CAAC,EAAE,WAAW,GAAG,cAAc,CAAA;CAAE,CAAC,CAAC;AAE1E,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3C,KAAK,wBAAwB,GAAG,QAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAC3E,KAAK,2BAA2B,GAAG,QAAQ,CACzC,QAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,EAC7C;IACE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CAClC,CACF,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,GAAG,2BAA2B,CAAC;AAqCzF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,EAAE,YAAY,GAAE,MAAiB,GAAG,mBAAmB,CAe7G;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,EAAE,EAAE,YAAY,GAAE,MAAiB,GAAG,mBAAmB,EAAE,CAMnH"}
+{"version":3,"file":"ProtectedRoute.d.ts","sourceRoot":"","sources":["src/ProtectedRoute.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAY,KAAK,mBAAmB,EAAe,MAAM,cAAc,CAAC;AACtG,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,cAAc,CAAC;AAE7D,KAAK,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1C,KAAK,cAAc,GAAG,QAAQ,CAAC;IAAE,MAAM,CAAC,EAAE,WAAW,GAAG,cAAc,CAAA;CAAE,CAAC,CAAC;AAE1E,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAE3C,KAAK,wBAAwB,GAAG,QAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;AAC3E,KAAK,2BAA2B,GAAG,QAAQ,CACzC,QAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,EAC7C;IACE,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;CAClC,CACF,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,wBAAwB,GAAG,2BAA2B,CAAC;AAqCzF;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,mBAAmB,EAAE,YAAY,GAAE,MAAiB,GAAG,mBAAmB,CAe7G;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,EAAE,EAAE,YAAY,GAAE,MAAiB,GAAG,mBAAmB,EAAE,CAMnH"}

package/ProtectedRoute.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Navigate, useLocation } from "react-router-dom";
+import { Navigate, useLocation } from "react-router";
 import { AuthContext } from "./useAuth.js";
 function ProtectedRoute({ redirectPath, access, element }) {
   const {

package/ProtectedRoute.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["src/ProtectedRoute.tsx"],
-  "sourcesContent": ["import { useContext, type JSX } from 'react';\nimport type { RouteObject } from 'react-router-dom';\nimport { type IndexRouteObject, Navigate, type NonIndexRouteObject, useLocation } from 'react-router-dom';\nimport { type AccessProps, AuthContext } from './useAuth.js';\n\ntype CustomMetadata = Record<string, any>;\n\ntype HandleWithAuth = Readonly<{ handle?: AccessProps & CustomMetadata }>;\n\ntype Override<T, E> = E & Omit<T, keyof E>;\n\ntype IndexRouteObjectWithAuth = Override<IndexRouteObject, HandleWithAuth>;\ntype NonIndexRouteObjectWithAuth = Override<\n  Override<NonIndexRouteObject, HandleWithAuth>,\n  {\n    children?: RouteObjectWithAuth[];\n  }\n>;\nexport type RouteObjectWithAuth = IndexRouteObjectWithAuth | NonIndexRouteObjectWithAuth;\n\ninterface ProtectedRouteProps {\n  redirectPath: string;\n  access: AccessProps;\n  element: JSX.Element;\n}\n\nfunction ProtectedRoute({ redirectPath, access, element }: ProtectedRouteProps): JSX.Element | null {\n  const {\n    state: { initializing, loading, user },\n    hasAccess,\n  } = useContext(AuthContext);\n\n  const location = useLocation();\n\n  if (initializing || loading) {\n    return <div></div>;\n  }\n\n  if (!hasAccess(access)) {\n    return <Navigate to={redirectPath} state={{ from: location }} replace />;\n  }\n\n  return element;\n}\nProtectedRoute.type = 'ProtectedRoute'; // This is for copilot to recognize this\n\nfunction* traverse<T extends RouteObject>(routes: T[]): Generator<T, undefined, undefined> {\n  for (const route of routes) {\n    yield route;\n    if (route.children) {\n      yield* traverse(route.children as T[]);\n    }\n  }\n}\n\n/**\n * Adds protection to a single route that requires authentication.\n * These route should contain the {@link AccessProps.loginRequired} and/or\n * {@link AccessProps.rolesAllowed} property to get the protection. Route\n * without that property won't be protected.\n *\n * @param route - the route to protect\n * @param redirectPath - the path to redirect to if the route is protected\n * and the user is not authenticated.\n * @returns the route extended with protection if needed\n */\nexport function protectRoute(route: RouteObjectWithAuth, redirectPath: string = '/login'): RouteObjectWithAuth {\n  const { handle } = route;\n  const requiresAuth = handle?.loginRequired ?? handle?.requiresLogin ?? handle?.rolesAllowed?.length;\n\n  if (requiresAuth) {\n    route.element = (\n      <ProtectedRoute\n        redirectPath={redirectPath}\n        access={handle as AccessProps}\n        element={route.element as JSX.Element}\n      />\n    );\n  }\n\n  return route;\n}\n\n/**\n * Protects a route tree with {@link protectRoute} function.\n *\n * @param routes - the roots of the route tree that requires protection.\n * @param redirectPath - the path to redirect to if the route is\n * protected and the user is not authenticated.\n * @returns the protected route tree\n */\nexport function protectRoutes(routes: RouteObjectWithAuth[], redirectPath: string = '/login'): RouteObjectWithAuth[] {\n  for (const route of traverse(routes)) {\n    protectRoute(route, redirectPath);\n  }\n\n  return routes;\n}\n"],
+  "sourcesContent": ["import { useContext, type JSX } from 'react';\nimport type { RouteObject } from 'react-router';\nimport { type IndexRouteObject, Navigate, type NonIndexRouteObject, useLocation } from 'react-router';\nimport { type AccessProps, AuthContext } from './useAuth.js';\n\ntype CustomMetadata = Record<string, any>;\n\ntype HandleWithAuth = Readonly<{ handle?: AccessProps & CustomMetadata }>;\n\ntype Override<T, E> = E & Omit<T, keyof E>;\n\ntype IndexRouteObjectWithAuth = Override<IndexRouteObject, HandleWithAuth>;\ntype NonIndexRouteObjectWithAuth = Override<\n  Override<NonIndexRouteObject, HandleWithAuth>,\n  {\n    children?: RouteObjectWithAuth[];\n  }\n>;\nexport type RouteObjectWithAuth = IndexRouteObjectWithAuth | NonIndexRouteObjectWithAuth;\n\ninterface ProtectedRouteProps {\n  redirectPath: string;\n  access: AccessProps;\n  element: JSX.Element;\n}\n\nfunction ProtectedRoute({ redirectPath, access, element }: ProtectedRouteProps): JSX.Element | null {\n  const {\n    state: { initializing, loading, user },\n    hasAccess,\n  } = useContext(AuthContext);\n\n  const location = useLocation();\n\n  if (initializing || loading) {\n    return <div></div>;\n  }\n\n  if (!hasAccess(access)) {\n    return <Navigate to={redirectPath} state={{ from: location }} replace />;\n  }\n\n  return element;\n}\nProtectedRoute.type = 'ProtectedRoute'; // This is for copilot to recognize this\n\nfunction* traverse<T extends RouteObject>(routes: T[]): Generator<T, undefined, undefined> {\n  for (const route of routes) {\n    yield route;\n    if (route.children) {\n      yield* traverse(route.children as T[]);\n    }\n  }\n}\n\n/**\n * Adds protection to a single route that requires authentication.\n * These route should contain the {@link AccessProps.loginRequired} and/or\n * {@link AccessProps.rolesAllowed} property to get the protection. Route\n * without that property won't be protected.\n *\n * @param route - the route to protect\n * @param redirectPath - the path to redirect to if the route is protected\n * and the user is not authenticated.\n * @returns the route extended with protection if needed\n */\nexport function protectRoute(route: RouteObjectWithAuth, redirectPath: string = '/login'): RouteObjectWithAuth {\n  const { handle } = route;\n  const requiresAuth = handle?.loginRequired ?? handle?.requiresLogin ?? handle?.rolesAllowed?.length;\n\n  if (requiresAuth) {\n    route.element = (\n      <ProtectedRoute\n        redirectPath={redirectPath}\n        access={handle as AccessProps}\n        element={route.element as JSX.Element}\n      />\n    );\n  }\n\n  return route;\n}\n\n/**\n * Protects a route tree with {@link protectRoute} function.\n *\n * @param routes - the roots of the route tree that requires protection.\n * @param redirectPath - the path to redirect to if the route is\n * protected and the user is not authenticated.\n * @returns the protected route tree\n */\nexport function protectRoutes(routes: RouteObjectWithAuth[], redirectPath: string = '/login'): RouteObjectWithAuth[] {\n  for (const route of traverse(routes)) {\n    protectRoute(route, redirectPath);\n  }\n\n  return routes;\n}\n"],
   "mappings": "AAmCW;AAnCX,SAAS,kBAA4B;AAErC,SAAgC,UAAoC,mBAAmB;AACvF,SAA2B,mBAAmB;AAuB9C,SAAS,eAAe,EAAE,cAAc,QAAQ,QAAQ,GAA4C;AAClG,QAAM;AAAA,IACJ,OAAO,EAAE,cAAc,SAAS,KAAK;AAAA,IACrC;AAAA,EACF,IAAI,WAAW,WAAW;AAE1B,QAAM,WAAW,YAAY;AAE7B,MAAI,gBAAgB,SAAS;AAC3B,WAAO,oBAAC,SAAI;AAAA,EACd;AAEA,MAAI,CAAC,UAAU,MAAM,GAAG;AACtB,WAAO,oBAAC,YAAS,IAAI,cAAc,OAAO,EAAE,MAAM,SAAS,GAAG,SAAO,MAAC;AAAA,EACxE;AAEA,SAAO;AACT;AACA,eAAe,OAAO;AAEtB,UAAU,SAAgC,QAAiD;AACzF,aAAW,SAAS,QAAQ;AAC1B,UAAM;AACN,QAAI,MAAM,UAAU;AAClB,aAAO,SAAS,MAAM,QAAe;AAAA,IACvC;AAAA,EACF;AACF;AAaO,SAAS,aAAa,OAA4B,eAAuB,UAA+B;AAC7G,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,eAAe,QAAQ,iBAAiB,QAAQ,iBAAiB,QAAQ,cAAc;AAE7F,MAAI,cAAc;AAChB,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR,SAAS,MAAM;AAAA;AAAA,IACjB;AAAA,EAEJ;AAEA,SAAO;AACT;AAUO,SAAS,cAAc,QAA+B,eAAuB,UAAiC;AACnH,aAAW,SAAS,SAAS,MAAM,GAAG;AACpC,iBAAa,OAAO,YAAY;AAAA,EAClC;AAEA,SAAO;AACT;",
   "names": []
 }

package/index.js

@@ -2,7 +2,7 @@ function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
   vaadinObj.registrations ??= [];
   vaadinObj.registrations.push({
     is: feature ? `${"@vaadin/hilla-react-auth"}/${feature}` : "@vaadin/hilla-react-auth",
-    version: "24.6.0-beta4"
+    version: "24.7.0-alpha2"
   });
 }
 export * from "./ProtectedRoute.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/hilla-react-auth",
-  "version": "24.6.0-beta4",
+  "version": "24.7.0-alpha2",
   "description": "Hilla auth utils for React",
   "main": "index.js",
   "module": "index.js",
@@ -46,16 +46,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@vaadin/hilla-frontend": "24.6.0-beta4"
+    "@vaadin/hilla-frontend": "24.7.0-alpha2"
   },
   "peerDependencies": {
     "react": "^18",
-    "react-router-dom": "^6.28.0"
+    "react-dom": "^18",
+    "react-router": "^7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@testing-library/dom": "^10.2.0",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.6",
     "@types/chai-dom": "^1.11.1",
@@ -66,6 +67,7 @@
     "@types/validator": "^13.11.2",
     "@web/test-runner": "^0.19.0",
     "chai-dom": "^1.11.0",
+    "react-router": "^7.0.2",
     "sinon": "^16.0.0",
     "sinon-chai": "^3.7.0",
     "typescript": "5.6.2"