@vaadin/hilla-react-auth 24.4.0-alpha9 → 24.4.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ProtectedRoute.d.ts +16 -6
- package/ProtectedRoute.d.ts.map +1 -1
- package/ProtectedRoute.js +29 -26
- package/ProtectedRoute.js.map +2 -2
- package/index.js +1 -1
- package/package.json +3 -3
- package/useAuth.d.ts +13 -1
- package/useAuth.d.ts.map +1 -1
- package/useAuth.js +15 -6
- package/useAuth.js.map +2 -2
package/ProtectedRoute.d.ts
CHANGED
|
@@ -11,15 +11,25 @@ type NonIndexRouteObjectWithAuth = Override<Override<NonIndexRouteObject, Handle
|
|
|
11
11
|
}>;
|
|
12
12
|
export type RouteObjectWithAuth = IndexRouteObjectWithAuth | NonIndexRouteObjectWithAuth;
|
|
13
13
|
/**
|
|
14
|
-
* Adds protection to
|
|
15
|
-
* These
|
|
16
|
-
* {@link AccessProps.rolesAllowed}
|
|
14
|
+
* Adds protection to a single route that requires authentication.
|
|
15
|
+
* These route should contain the {@link AccessProps.loginRequired} and/or
|
|
16
|
+
* {@link AccessProps.rolesAllowed} property to get the protection. Route
|
|
17
|
+
* without that property won't be protected.
|
|
17
18
|
*
|
|
18
|
-
* @param
|
|
19
|
+
* @param route - the route to protect
|
|
20
|
+
* @param redirectPath - the path to redirect to if the route is protected
|
|
21
|
+
* and the user is not authenticated.
|
|
22
|
+
* @returns the route extended with protection if needed
|
|
23
|
+
*/
|
|
24
|
+
export declare function protectRoute(route: RouteObjectWithAuth, redirectPath?: string): RouteObjectWithAuth;
|
|
25
|
+
/**
|
|
26
|
+
* Protects a route tree with {@link protectRoute} function.
|
|
27
|
+
*
|
|
28
|
+
* @param routes - the roots of the route tree that requires protection.
|
|
19
29
|
* @param redirectPath - the path to redirect to if the route is
|
|
20
30
|
* protected and the user is not authenticated.
|
|
21
|
-
* @returns the
|
|
31
|
+
* @returns the protected route tree
|
|
22
32
|
*/
|
|
23
|
-
export declare
|
|
33
|
+
export declare function protectRoutes(routes: RouteObjectWithAuth[], redirectPath?: string): RouteObjectWithAuth[];
|
|
24
34
|
export {};
|
|
25
35
|
//# sourceMappingURL=ProtectedRoute.d.ts.map
|
package/ProtectedRoute.d.ts.map
CHANGED
|
@@ -1 +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;
|
|
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"}
|
package/ProtectedRoute.js
CHANGED
|
@@ -16,35 +16,38 @@ function ProtectedRoute({ redirectPath, access, element }) {
|
|
|
16
16
|
}
|
|
17
17
|
return element;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (route.children
|
|
24
|
-
|
|
19
|
+
ProtectedRoute.type = "ProtectedRoute";
|
|
20
|
+
function* traverse(routes) {
|
|
21
|
+
for (const route of routes) {
|
|
22
|
+
yield route;
|
|
23
|
+
if (route.children) {
|
|
24
|
+
yield* traverse(route.children);
|
|
25
25
|
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
function protectRoute(route, redirectPath = "/login") {
|
|
29
|
+
const { handle } = route;
|
|
30
|
+
const requiresAuth = handle?.loginRequired ?? handle?.requiresLogin ?? handle?.rolesAllowed?.length;
|
|
31
|
+
if (requiresAuth) {
|
|
32
|
+
route.element = /* @__PURE__ */ jsx(
|
|
33
|
+
ProtectedRoute,
|
|
34
|
+
{
|
|
35
|
+
redirectPath,
|
|
36
|
+
access: handle,
|
|
37
|
+
element: route.element
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
return route;
|
|
42
|
+
}
|
|
43
|
+
function protectRoutes(routes, redirectPath = "/login") {
|
|
44
|
+
for (const route of traverse(routes)) {
|
|
45
|
+
protectRoute(route, redirectPath);
|
|
46
|
+
}
|
|
45
47
|
return routes;
|
|
46
|
-
}
|
|
48
|
+
}
|
|
47
49
|
export {
|
|
50
|
+
protectRoute,
|
|
48
51
|
protectRoutes
|
|
49
52
|
};
|
|
50
53
|
//# sourceMappingURL=ProtectedRoute.js.map
|
package/ProtectedRoute.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/ProtectedRoute.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useContext } 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\
|
|
5
|
-
"mappings": "AAmCW;AAnCX,SAAS,
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@ function __REGISTER__(feature) {
|
|
|
3
3
|
window.Vaadin.registrations ??= [];
|
|
4
4
|
window.Vaadin.registrations.push({
|
|
5
5
|
is: feature ? `${"@vaadin/hilla-react-auth"}/${feature}` : "@vaadin/hilla-react-auth",
|
|
6
|
-
version: "24.4.0-
|
|
6
|
+
version: "24.4.0-beta1"
|
|
7
7
|
});
|
|
8
8
|
}
|
|
9
9
|
export * from "./ProtectedRoute.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/hilla-react-auth",
|
|
3
|
-
"version": "24.4.0-
|
|
3
|
+
"version": "24.4.0-beta1",
|
|
4
4
|
"description": "Hilla auth utils for React",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"React"
|
|
17
17
|
],
|
|
18
18
|
"scripts": {
|
|
19
|
-
"clean:build": "
|
|
19
|
+
"clean:build": "git clean -fx . -e .vite -e node_modules",
|
|
20
20
|
"build": "concurrently npm:build:*",
|
|
21
21
|
"build:esbuild": "tsx ../../../scripts/build.ts",
|
|
22
22
|
"build:dts": "tsc --isolatedModules -p tsconfig.build.json",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@vaadin/hilla-frontend": "24.4.0-
|
|
49
|
+
"@vaadin/hilla-frontend": "24.4.0-beta1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^18",
|
package/useAuth.d.ts
CHANGED
|
@@ -18,8 +18,20 @@ type AuthState<TUser> = Readonly<{
|
|
|
18
18
|
* They can be added to the route type handler as properties.
|
|
19
19
|
*/
|
|
20
20
|
export type AccessProps = Readonly<{
|
|
21
|
+
/**
|
|
22
|
+
* If true, the user must be logged in to access the route.
|
|
23
|
+
*/
|
|
24
|
+
loginRequired?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* If true, the user must be logged in to access the route.
|
|
27
|
+
*
|
|
28
|
+
* @deprecated Use `loginRequired` instead.
|
|
29
|
+
*/
|
|
21
30
|
requiresLogin?: boolean;
|
|
22
|
-
|
|
31
|
+
/**
|
|
32
|
+
* The list of roles that are allowed to access the route.
|
|
33
|
+
*/
|
|
34
|
+
rolesAllowed?: readonly [string, ...string[]];
|
|
23
35
|
}>;
|
|
24
36
|
/**
|
|
25
37
|
* The type of the authentication hook.
|
package/useAuth.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["src/useAuth.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"useAuth.d.ts","sourceRoot":"","sources":["src/useAuth.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,wBAAwB,CAAC;AAGhC,KAAK,aAAa,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;AAClF,KAAK,cAAc,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;AAO1C;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,KAAK,IAAI,MAAM,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;AAEhE,KAAK,SAAS,CAAC,KAAK,IAAI,QAAQ,CAAC;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;CACzC,CAAC,CAAC;AAyFH;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;CAC/C,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,QAAQ,CAAC;IAC3C,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,WAAW,EAAE,WAAW,GAAG,OAAO,CAAC;CAC9C,CAAC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,WAAW;;sBAjIR,OAAO;iBACZ,OAAO;;;;;WAuHT,aAAa;YACZ,cAAc;2BACC,WAAW,GAAG,OAAO;GAkB5C,CAAC;AAEH,UAAU,UAAU,CAAC,KAAK;IACxB,QAAQ,CAAC,CAAC,IAAI,EAAE,KAAK,GAAG,SAAS,MAAM,EAAE,CAAC;CAC3C;AAsED,MAAM,MAAM,QAAQ,CAAC,KAAK,IAAI,MAAM,cAAc,CAAC,KAAK,CAAC,CAAC;AAW1D,UAAU,UAAU,CAAC,KAAK;IACxB,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAChD,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,KAAK,EACjC,oBAAoB,EAAE,SAAS,CAAC,KAAK,CAAC,EACtC,MAAM,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,GACzB,UAAU,CAAC,KAAK,CAAC,CAanB"}
|
package/useAuth.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
login as _login,
|
|
4
|
+
logout as _logout,
|
|
5
|
+
UnauthorizedResponseError
|
|
6
|
+
} from "@vaadin/hilla-frontend";
|
|
3
7
|
import { createContext, useContext, useEffect, useReducer } from "react";
|
|
4
8
|
const LOGIN_FETCH = "LOGIN_FETCH";
|
|
5
9
|
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
|
|
@@ -8,7 +12,12 @@ const LOGOUT = "LOGOUT";
|
|
|
8
12
|
function createAuthenticateThunk(dispatch, getAuthenticatedUser) {
|
|
9
13
|
async function authenticate() {
|
|
10
14
|
dispatch({ type: LOGIN_FETCH });
|
|
11
|
-
const user = await getAuthenticatedUser()
|
|
15
|
+
const user = await getAuthenticatedUser().catch((error) => {
|
|
16
|
+
if (error instanceof UnauthorizedResponseError) {
|
|
17
|
+
return void 0;
|
|
18
|
+
}
|
|
19
|
+
throw error;
|
|
20
|
+
});
|
|
12
21
|
if (user) {
|
|
13
22
|
dispatch({
|
|
14
23
|
user,
|
|
@@ -88,17 +97,17 @@ function AuthProvider({ children, getAuthenticatedUser, config }) {
|
|
|
88
97
|
await _logout();
|
|
89
98
|
unauthenticate();
|
|
90
99
|
}
|
|
91
|
-
function hasAccess(
|
|
92
|
-
const requiresAuth =
|
|
100
|
+
function hasAccess({ loginRequired, requiresLogin, rolesAllowed }) {
|
|
101
|
+
const requiresAuth = loginRequired ?? requiresLogin ?? rolesAllowed;
|
|
93
102
|
if (!requiresAuth) {
|
|
94
103
|
return true;
|
|
95
104
|
}
|
|
96
105
|
if (!state.user) {
|
|
97
106
|
return false;
|
|
98
107
|
}
|
|
99
|
-
if (
|
|
108
|
+
if (rolesAllowed) {
|
|
100
109
|
const userRoles = config?.getRoles ? config.getRoles(state.user) : getDefaultRoles(state.user);
|
|
101
|
-
return
|
|
110
|
+
return rolesAllowed.some((allowedRole) => userRoles.includes(allowedRole));
|
|
102
111
|
}
|
|
103
112
|
return true;
|
|
104
113
|
}
|
package/useAuth.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/useAuth.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n login as _login,\n type LoginResult,\n logout as _logout,\n UnauthorizedResponseError,\n} from '@vaadin/hilla-frontend';\nimport { createContext, type Dispatch, useContext, useEffect, useReducer } from 'react';\n\ntype LoginFunction = (username: string, password: string) => Promise<LoginResult>;\ntype LogoutFunction = () => Promise<void>;\n\nconst LOGIN_FETCH = 'LOGIN_FETCH';\nconst LOGIN_SUCCESS = 'LOGIN_SUCCESS';\nconst LOGIN_FAILURE = 'LOGIN_FAILURE';\nconst LOGOUT = 'LOGOUT';\n\n/**\n * The type of the function that is used to get the authenticated user.\n */\nexport type GetUserFn<TUser> = () => Promise<TUser | undefined>;\n\ntype AuthState<TUser> = Readonly<{\n initializing: boolean;\n loading: boolean;\n user?: TUser;\n error?: string;\n getAuthenticatedUser?: GetUserFn<TUser>;\n}>;\n\ntype LoginFetchAction = Readonly<{\n type: typeof LOGIN_FETCH;\n}>;\n\ntype LoginSuccessAction = Readonly<{\n user: unknown;\n type: typeof LOGIN_SUCCESS;\n}>;\n\ntype LoginFailureAction = Readonly<{\n error: string;\n type: typeof LOGIN_FAILURE;\n}>;\n\ntype LoginActions = LoginFailureAction | LoginFetchAction | LoginSuccessAction;\n\ntype LogoutAction = Readonly<{\n type: typeof LOGOUT;\n}>;\n\nfunction createAuthenticateThunk<TUser>(dispatch: Dispatch<LoginActions>, getAuthenticatedUser: GetUserFn<TUser>) {\n async function authenticate() {\n dispatch({ type: LOGIN_FETCH });\n\n // Get user info from endpoint\n const user = await getAuthenticatedUser().catch((error: unknown) => {\n if (error instanceof UnauthorizedResponseError) {\n // 401 response: the user is not authenticated\n return undefined;\n }\n\n throw error;\n });\n\n if (user) {\n dispatch({\n user,\n type: LOGIN_SUCCESS,\n });\n } else {\n dispatch({\n error: 'Not authenticated',\n type: LOGIN_FAILURE,\n });\n }\n }\n\n return authenticate;\n}\n\nfunction createUnauthenticateThunk(dispatch: Dispatch<LogoutAction>) {\n return () => {\n dispatch({ type: LOGOUT });\n };\n}\n\nconst initialState: AuthState<unknown> = {\n initializing: true,\n loading: false,\n};\n\nfunction reducer(state: AuthState<unknown>, action: LoginActions | LogoutAction) {\n switch (action.type) {\n case LOGIN_FETCH:\n return {\n initializing: false,\n loading: true,\n };\n case LOGIN_SUCCESS:\n return {\n initializing: false,\n loading: false,\n user: action.user,\n };\n case LOGIN_FAILURE:\n return {\n initializing: false,\n loading: false,\n error: action.error,\n };\n case LOGOUT:\n return { initializing: false, loading: false };\n default:\n return state;\n }\n}\n\n/**\n * The properties that can be used to control access to a route.\n * They can be added to the route type handler as properties.\n */\nexport type AccessProps = Readonly<{\n /**\n * If true, the user must be logged in to access the route.\n */\n loginRequired?: boolean;\n /**\n * If true, the user must be logged in to access the route.\n *\n * @deprecated Use `loginRequired` instead.\n */\n requiresLogin?: boolean;\n /**\n * The list of roles that are allowed to access the route.\n */\n rolesAllowed?: readonly [string, ...string[]];\n}>;\n\n/**\n * The type of the authentication hook.\n */\nexport type Authentication<TUser> = Readonly<{\n state: AuthState<TUser>;\n login: LoginFunction;\n logout: LogoutFunction;\n hasAccess(accessProps: AccessProps): boolean;\n}>;\n\n/**\n * The hook that can be used to get the authentication state.\n * It returns the state of the authentication.\n */\nexport const AuthContext = createContext<Authentication<unknown>>({\n state: initialState,\n login() {\n throw new Error('AuthContext not initialized');\n },\n logout() {\n throw new Error('AuthContext not initialized');\n },\n hasAccess(): boolean {\n throw new Error('AuthContext not initialized');\n },\n});\n\ninterface AuthConfig<TUser> {\n getRoles?(user: TUser): readonly string[];\n}\n\ninterface AuthProviderProps<TUser> extends React.PropsWithChildren {\n getAuthenticatedUser: GetUserFn<TUser>;\n config?: AuthConfig<TUser>;\n}\n\ninterface UserWithRoles {\n roles?: any;\n}\n\nconst getDefaultRoles = (user: unknown) => {\n const userWithRoles = user as UserWithRoles;\n return Array.isArray(userWithRoles.roles) ? userWithRoles.roles : [];\n};\n\nfunction AuthProvider<TUser>({ children, getAuthenticatedUser, config }: AuthProviderProps<TUser>) {\n const [state, dispatch] = useReducer(reducer, initialState);\n const authenticate = createAuthenticateThunk(dispatch, getAuthenticatedUser);\n const unauthenticate = createUnauthenticateThunk(dispatch);\n\n async function login(username: string, password: string): Promise<LoginResult> {\n const result = await _login(username, password);\n\n if (!result.error) {\n await authenticate();\n }\n\n return result;\n }\n\n async function logout(): Promise<void> {\n await _logout();\n unauthenticate();\n }\n\n function hasAccess({ loginRequired, requiresLogin, rolesAllowed }: AccessProps): boolean {\n const requiresAuth = loginRequired ?? requiresLogin ?? rolesAllowed;\n if (!requiresAuth) {\n return true;\n }\n\n if (!state.user) {\n return false;\n }\n\n if (rolesAllowed) {\n const userRoles = config?.getRoles ? config.getRoles(state.user as TUser) : getDefaultRoles(state.user);\n return rolesAllowed.some((allowedRole) => userRoles.includes(allowedRole));\n }\n\n return true;\n }\n\n useEffect(() => {\n authenticate().catch(() => {\n // Do nothing\n });\n }, []);\n\n const auth = {\n state,\n login,\n logout,\n hasAccess,\n };\n\n return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;\n}\n\nexport type AuthHook<TUser> = () => Authentication<TUser>;\n\n/**\n * The hook that can be used to authenticate the user.\n * It returns the state of the authentication and the functions\n * to authenticate and unauthenticate the user.\n */\nfunction useAuth<TUser>(): Authentication<TUser> {\n return useContext(AuthContext) as Authentication<TUser>;\n}\n\ninterface AuthModule<TUser> {\n AuthProvider: React.FC<React.PropsWithChildren>;\n useAuth: AuthHook<TUser>;\n}\n\nexport function configureAuth<TUser>(\n getAuthenticatedUser: GetUserFn<TUser>,\n config?: AuthConfig<TUser>,\n): AuthModule<TUser> {\n function PreconfiguredAuthProvider({ children }: React.PropsWithChildren) {\n return (\n <AuthProvider<TUser> getAuthenticatedUser={getAuthenticatedUser} config={config}>\n {children}\n </AuthProvider>\n );\n }\n\n return {\n AuthProvider: PreconfiguredAuthProvider,\n useAuth: useAuth as AuthHook<TUser>,\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|