@vaadin/hilla-react-auth 24.4.0-alpha21 → 24.4.0-alpha22

package/ProtectedRoute.d.ts

@@ -11,14 +11,24 @@ type NonIndexRouteObjectWithAuth = Override<Override<NonIndexRouteObject, Handle
 }>;
 export type RouteObjectWithAuth = IndexRouteObjectWithAuth | NonIndexRouteObjectWithAuth;
 /**
- * Adds protection to routes that require authentication.
- * These routes should contain the {@link AccessProps.loginRequired} and/or
- * {@link AccessProps.rolesAllowed} properties.
+ * Adds protection to a single route that requires authentication.
+ * These route should contain the {@link AccessProps.loginRequired} and/or
+ * {@link AccessProps.rolesAllowed} property to get the protection. Route
+ * without that property won't be protected.
  *
- * @param routes - the routes to check if any of them needs to be protected
+ * @param route - the route to protect
+ * @param redirectPath - the path to redirect to if the route is protected
+ * and the user is not authenticated.
+ * @returns the route extended with protection if needed
+ */
+export declare function protectRoute(route: RouteObjectWithAuth, redirectPath?: string): RouteObjectWithAuth;
+/**
+ * Protects a route tree with {@link protectRoute} function.
+ *
+ * @param routes - the roots of the route tree that requires protection.
  * @param redirectPath - the path to redirect to if the route is
  * protected and the user is not authenticated.
- * @returns the routes extended with protection if needed
+ * @returns the protected route tree
  */
 export declare function protectRoutes(routes: RouteObjectWithAuth[], redirectPath?: string): RouteObjectWithAuth[];
 export {};

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;AAoCzF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,mBAAmB,EAAE,EAAE,YAAY,GAAE,MAAiB,GAAG,mBAAmB,EAAE,CAiBnH"}
+{"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;AAoCzF;;;;;;;;;;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

@@ -24,24 +24,29 @@ function* traverse(routes) {
     }
   }
 }
+function protectRoute(route, redirectPath = "/login") {
+  const { handle } = route;
+  const requiresAuth = handle?.loginRequired ?? handle?.requiresLogin ?? handle?.rolesAllowed?.length;
+  if (requiresAuth) {
+    route.element = /* @__PURE__ */ jsx(
+      ProtectedRoute,
+      {
+        redirectPath,
+        access: handle,
+        element: route.element
+      }
+    );
+  }
+  return route;
+}
 function protectRoutes(routes, redirectPath = "/login") {
   for (const route of traverse(routes)) {
-    const { handle } = route;
-    const requiresAuth = handle?.loginRequired ?? handle?.requiresLogin ?? handle?.rolesAllowed?.length;
-    if (requiresAuth) {
-      route.element = /* @__PURE__ */ jsx(
-        ProtectedRoute,
-        {
-          redirectPath,
-          access: handle,
-          element: route.element
-        }
-      );
-    }
+    protectRoute(route, redirectPath);
   }
   return routes;
 }
 export {
+  protectRoute,
   protectRoutes
 };
 //# sourceMappingURL=ProtectedRoute.js.map

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}\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 routes that require authentication.\n * These routes should contain the {@link AccessProps.loginRequired} and/or\n * {@link AccessProps.rolesAllowed} properties.\n *\n * @param routes - the routes to check if any of them needs to be protected\n * @param redirectPath - the path to redirect to if the route is\n * protected and the user is not authenticated.\n * @returns the routes extended with protection if needed\n */\nexport function protectRoutes(routes: RouteObjectWithAuth[], redirectPath: string = '/login'): RouteObjectWithAuth[] {\n  for (const route of traverse(routes)) {\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\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;AAEA,UAAU,SAAgC,QAAiD;AACzF,aAAW,SAAS,QAAQ;AAC1B,UAAM;AACN,QAAI,MAAM,UAAU;AAClB,aAAO,SAAS,MAAM,QAAe;AAAA,IACvC;AAAA,EACF;AACF;AAYO,SAAS,cAAc,QAA+B,eAAuB,UAAiC;AACnH,aAAW,SAAS,SAAS,MAAM,GAAG;AACpC,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,eAAe,QAAQ,iBAAiB,QAAQ,iBAAiB,QAAQ,cAAc;AAE7F,QAAI,cAAc;AAChB,YAAM,UACJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,QAAQ;AAAA,UACR,SAAS,MAAM;AAAA;AAAA,MACjB;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
+  "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}\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;AAEA,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

@@ -3,7 +3,7 @@ function __REGISTER__(feature) {
   window.Vaadin.registrations ??= [];
   window.Vaadin.registrations.push({
     is: feature ? `${"@vaadin/hilla-react-auth"}/${feature}` : "@vaadin/hilla-react-auth",
-    version: "24.4.0-alpha21"
+    version: "24.4.0-alpha22"
   });
 }
 export * from "./ProtectedRoute.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/hilla-react-auth",
-  "version": "24.4.0-alpha21",
+  "version": "24.4.0-alpha22",
   "description": "Hilla auth utils for React",
   "main": "index.js",
   "module": "index.js",
@@ -46,7 +46,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vaadin/hilla-frontend": "24.4.0-alpha21"
+    "@vaadin/hilla-frontend": "24.4.0-alpha22"
   },
   "peerDependencies": {
     "react": "^18",