@strato-admin/core 0.1.0 → 0.3.0

package/dist/ra-core/src/auth/useCheckAuth.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Get a callback for calling the authProvider.checkAuth() method.
+ * In case of rejection, redirects to the login page, displays a notification,
+ * and throws an error.
+ *
+ * This is a low level hook. See those more specialized hooks
+ * for common authentication tasks, based on useCheckAuth.
+ *
+ * @see useAuthenticated
+ * @see useAuthState
+ *
+ * @returns {Function} checkAuth callback
+ *
+ * @example
+ *
+ * import { useCheckAuth } from 'react-admin';
+ *
+ * const MyProtectedPage = () => {
+ *     const checkAuth = useCheckAuth();
+ *     useEffect(() => {
+ *         checkAuth().catch(() => {});
+ *     }, []);
+ *     return <p>Private content: EZAEZEZAET</p>
+ * } // tip: use useAuthenticated() hook instead
+ *
+ * const MyPage = () => {
+ *     const checkAuth = useCheckAuth();
+ *     const [authenticated, setAuthenticated] = useState(true); // optimistic auth
+ *     useEffect(() => {
+ *         checkAuth({}, false)
+ *              .then(() => setAuthenticated(true))
+ *              .catch(() => setAuthenticated(false));
+ *     }, []);
+ *     return authenticated ? <Bar /> : <BarNotAuthenticated />;
+ * } // tip: use useAuthState() hook instead
+ */
+export declare const useCheckAuth: () => CheckAuth;
+/**
+ * Check if the current user is authenticated by calling authProvider.checkAuth().
+ * Logs the user out on failure.
+ *
+ * @param {Object} params The parameters to pass to the authProvider
+ * @param {boolean} logoutOnFailure Whether the user should be logged out if the authProvider fails to authenticate them. True by default.
+ * @param {string} redirectTo The login form url. Defaults to '/login'
+ *
+ * @return {Promise} Resolved to the authProvider response if the user passes the check, or rejected with an error otherwise
+ */
+export type CheckAuth = (params?: any, logoutOnFailure?: boolean, redirectTo?: string) => Promise<any>;

package/dist/ra-core/src/auth/useCheckAuth.js

@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
+import useLogout from './useLogout';
+import { useNotify } from '../notification';
+import { useBasename } from '../routing';
+import { removeDoubleSlashes } from '../routing/useCreatePath';
+/**
+ * Get a callback for calling the authProvider.checkAuth() method.
+ * In case of rejection, redirects to the login page, displays a notification,
+ * and throws an error.
+ *
+ * This is a low level hook. See those more specialized hooks
+ * for common authentication tasks, based on useCheckAuth.
+ *
+ * @see useAuthenticated
+ * @see useAuthState
+ *
+ * @returns {Function} checkAuth callback
+ *
+ * @example
+ *
+ * import { useCheckAuth } from 'react-admin';
+ *
+ * const MyProtectedPage = () => {
+ *     const checkAuth = useCheckAuth();
+ *     useEffect(() => {
+ *         checkAuth().catch(() => {});
+ *     }, []);
+ *     return <p>Private content: EZAEZEZAET</p>
+ * } // tip: use useAuthenticated() hook instead
+ *
+ * const MyPage = () => {
+ *     const checkAuth = useCheckAuth();
+ *     const [authenticated, setAuthenticated] = useState(true); // optimistic auth
+ *     useEffect(() => {
+ *         checkAuth({}, false)
+ *              .then(() => setAuthenticated(true))
+ *              .catch(() => setAuthenticated(false));
+ *     }, []);
+ *     return authenticated ? <Bar /> : <BarNotAuthenticated />;
+ * } // tip: use useAuthState() hook instead
+ */
+export const useCheckAuth = () => {
+    const authProvider = useAuthProvider();
+    const notify = useNotify();
+    const logout = useLogout();
+    const basename = useBasename();
+    const loginUrl = removeDoubleSlashes(`${basename}/${defaultAuthParams.loginUrl}`);
+    const checkAuth = useCallback(async (params = {}, logoutOnFailure = true, redirectTo = loginUrl) => {
+        // The authProvider is optional in react-admin
+        if (!authProvider) {
+            return checkAuthWithoutAuthProvider();
+        }
+        try {
+            return await authProvider.checkAuth(params);
+        }
+        catch (error) {
+            if (logoutOnFailure) {
+                logout({}, error && error.redirectTo != null
+                    ? error.redirectTo
+                    : redirectTo);
+                const shouldSkipNotify = error && error.message === false;
+                !shouldSkipNotify &&
+                    notify(getErrorMessage(error, "strato.auth.auth_check_error'), { type: 'error' });
+            }
+            throw error;
+        }
+    }, [authProvider, logout, notify, loginUrl]);
+    return checkAuth;
+};
+const checkAuthWithoutAuthProvider = async () => undefined;
+const getErrorMessage = (error, defaultMessage) => typeof error === 'string'
+    ? error
+    : typeof error === 'undefined' || !error.message
+        ? defaultMessage
+        : error.message;

package/dist/ra-core/src/auth/useGetIdentity.d.ts

@@ -0,0 +1,41 @@
+import { UseQueryOptions, QueryObserverResult } from '@tanstack/react-query';
+import { UserIdentity } from '../types';
+/**
+ * Return the current user identity by calling authProvider.getIdentity() on mount
+ *
+ * The return value updates according to the call state:
+ *
+ * - mount: { isPending: true }
+ * - success: { identity, refetch: () => {}, isPending: false }
+ * - error: { error: Error, isPending: false }
+ *
+ * The implementation is left to the authProvider.
+ *
+ * @returns The current user identity. Destructure as { isPending, identity, error, refetch }.
+ *
+ * @example
+ * import { useGetIdentity, useGetOne } from 'react-admin';
+ *
+ * const PostDetail = ({ id }) => {
+ *     const { data: post, isPending: postLoading } = useGetOne('posts', { id });
+ *     const { identity, isPending: identityLoading } = useGetIdentity();
+ *     if (postLoading || identityLoading) return <>Loading...</>;
+ *     if (!post.lockedBy || post.lockedBy === identity.id) {
+ *         // post isn't locked, or is locked by me
+ *         return <PostEdit post={post} />
+ *     } else {
+ *         // post is locked by someone else and cannot be edited
+ *         return <PostShow post={post} />
+ *     }
+ * }
+ */
+export declare const useGetIdentity: <ErrorType extends Error = Error>(options?: UseGetIdentityOptions<ErrorType>) => UseGetIdentityResult<ErrorType>;
+export interface UseGetIdentityOptions<ErrorType extends Error = Error> extends Omit<UseQueryOptions<UserIdentity, ErrorType>, 'queryKey' | 'queryFn'> {
+    onSuccess?: (data: UserIdentity) => void;
+    onError?: (err: Error) => void;
+    onSettled?: (data?: UserIdentity, error?: Error | null) => void;
+}
+export type UseGetIdentityResult<ErrorType = Error> = QueryObserverResult<UserIdentity, ErrorType> & {
+    identity: UserIdentity | undefined;
+};
+export default useGetIdentity;

package/dist/ra-core/src/auth/useGetIdentity.js

@@ -0,0 +1,86 @@
+import { useEffect, useMemo } from 'react';
+import { useQuery, } from '@tanstack/react-query';
+import useAuthProvider from './useAuthProvider';
+import { useEvent } from '../util';
+const defaultIdentity = {
+    id: '',
+};
+const defaultQueryParams = {
+    staleTime: 5 * 60 * 1000,
+};
+/**
+ * Return the current user identity by calling authProvider.getIdentity() on mount
+ *
+ * The return value updates according to the call state:
+ *
+ * - mount: { isPending: true }
+ * - success: { identity, refetch: () => {}, isPending: false }
+ * - error: { error: Error, isPending: false }
+ *
+ * The implementation is left to the authProvider.
+ *
+ * @returns The current user identity. Destructure as { isPending, identity, error, refetch }.
+ *
+ * @example
+ * import { useGetIdentity, useGetOne } from 'react-admin';
+ *
+ * const PostDetail = ({ id }) => {
+ *     const { data: post, isPending: postLoading } = useGetOne('posts', { id });
+ *     const { identity, isPending: identityLoading } = useGetIdentity();
+ *     if (postLoading || identityLoading) return <>Loading...</>;
+ *     if (!post.lockedBy || post.lockedBy === identity.id) {
+ *         // post isn't locked, or is locked by me
+ *         return <PostEdit post={post} />
+ *     } else {
+ *         // post is locked by someone else and cannot be edited
+ *         return <PostShow post={post} />
+ *     }
+ * }
+ */
+export const useGetIdentity = (options = defaultQueryParams) => {
+    const authProvider = useAuthProvider();
+    const { onSuccess, onError, onSettled, ...queryOptions } = options;
+    const result = useQuery({
+        queryKey: ['auth', 'getIdentity'],
+        queryFn: async ({ signal }) => {
+            if (authProvider &&
+                typeof authProvider.getIdentity === 'function') {
+                return authProvider.getIdentity({ signal });
+            }
+            else {
+                return defaultIdentity;
+            }
+        },
+        ...queryOptions,
+    });
+    const onSuccessEvent = useEvent(onSuccess ?? noop);
+    const onErrorEvent = useEvent(onError ?? noop);
+    const onSettledEvent = useEvent(onSettled ?? noop);
+    useEffect(() => {
+        if (result.data === undefined || result.isFetching)
+            return;
+        onSuccessEvent(result.data);
+    }, [onSuccessEvent, result.data, result.isFetching]);
+    useEffect(() => {
+        if (result.error == null || result.isFetching)
+            return;
+        onErrorEvent(result.error);
+    }, [onErrorEvent, result.error, result.isFetching]);
+    useEffect(() => {
+        if (result.status === 'pending' || result.isFetching)
+            return;
+        onSettledEvent(result.data, result.error);
+    }, [
+        onSettledEvent,
+        result.data,
+        result.error,
+        result.status,
+        result.isFetching,
+    ]);
+    return useMemo(() => ({
+        ...result,
+        identity: result.data,
+    }), [result]);
+};
+export default useGetIdentity;
+const noop = () => { };

package/dist/ra-core/src/auth/useGetPermissions.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Get a callback for calling the authProvider.getPermissions() method.
+ *
+ * @see useAuthProvider
+ *
+ * @returns {Function} getPermissions callback
+ *
+ * This is a low level hook. See those more specialized hooks
+ * offering state handling.
+ *
+ * @see usePermissions
+ *
+ * @example
+ *
+ * import { useGetPermissions } from 'react-admin';
+ *
+ * const Roles = () => {
+ *     const [permissions, setPermissions] = useState([]);
+ *     const getPermissions = useGetPermissions();
+ *     useEffect(() => {
+ *         getPermissions().then(permissions => setPermissions(permissions))
+ *     }, [])
+ *     return (
+ *         <ul>
+ *             {permissions.map((permission, key) => (
+ *                 <li key={key}>{permission}</li>
+ *             ))}
+ *         </ul>
+ *     );
+ * }
+ */
+declare const useGetPermissions: () => GetPermissions;
+/**
+ * Proxy for calling authProvider.getPermissions()
+ *
+ * @param {Object} params The parameters to pass to the authProvider
+ *
+ * @return {Promise} The authProvider response
+ */
+type GetPermissions = (params?: any) => Promise<any>;
+export default useGetPermissions;

package/dist/ra-core/src/auth/useGetPermissions.js

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import useAuthProvider from './useAuthProvider';
+/**
+ * Get a callback for calling the authProvider.getPermissions() method.
+ *
+ * @see useAuthProvider
+ *
+ * @returns {Function} getPermissions callback
+ *
+ * This is a low level hook. See those more specialized hooks
+ * offering state handling.
+ *
+ * @see usePermissions
+ *
+ * @example
+ *
+ * import { useGetPermissions } from 'react-admin';
+ *
+ * const Roles = () => {
+ *     const [permissions, setPermissions] = useState([]);
+ *     const getPermissions = useGetPermissions();
+ *     useEffect(() => {
+ *         getPermissions().then(permissions => setPermissions(permissions))
+ *     }, [])
+ *     return (
+ *         <ul>
+ *             {permissions.map((permission, key) => (
+ *                 <li key={key}>{permission}</li>
+ *             ))}
+ *         </ul>
+ *     );
+ * }
+ */
+const useGetPermissions = () => {
+    const authProvider = useAuthProvider();
+    const getPermissions = useCallback((params = {}) => {
+        // react-query requires the query to return something
+        if (authProvider && authProvider.getPermissions) {
+            return authProvider
+                .getPermissions(params)
+                .then(result => result ?? null);
+        }
+        return Promise.resolve([]);
+    }, [authProvider]);
+    return getPermissions;
+};
+export default useGetPermissions;

package/dist/ra-core/src/auth/useHandleAuthCallback.d.ts

@@ -0,0 +1,20 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { AuthRedirectResult } from '../types';
+/**
+ * This hook calls the `authProvider.handleCallback()` method on mount. This is meant to be used in a route called
+ * by an external authentication service (e.g. Auth0) after the user has logged in.
+ * By default, it redirects to application home page upon success, or to the `redirectTo` location returned by `authProvider. handleCallback`.
+ *
+ * @returns An object containing { isPending, data, error, refetch }.
+ */
+export declare const useHandleAuthCallback: (options?: UseHandleAuthCallbackOptions) => import("@tanstack/react-query").UseQueryResult<void | AuthRedirectResult, Error>;
+/**
+ * Key used to store the previous location in localStorage.
+ * Used by the useHandleAuthCallback hook to redirect the user to their previous location after a successful login.
+ */
+export declare const PreviousLocationStorageKey = "@react-admin/nextPathname";
+export type UseHandleAuthCallbackOptions = Omit<UseQueryOptions<AuthRedirectResult | void>, 'queryKey' | 'queryFn'> & {
+    onSuccess?: (data: AuthRedirectResult | void) => void;
+    onError?: (err: Error) => void;
+    onSettled?: (data?: AuthRedirectResult | void, error?: Error | null) => void;
+};

package/dist/ra-core/src/auth/useHandleAuthCallback.js

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useRedirect, useLocation } from '../routing';
+import useAuthProvider from './useAuthProvider';
+import { useEvent } from '../util';
+/**
+ * This hook calls the `authProvider.handleCallback()` method on mount. This is meant to be used in a route called
+ * by an external authentication service (e.g. Auth0) after the user has logged in.
+ * By default, it redirects to application home page upon success, or to the `redirectTo` location returned by `authProvider. handleCallback`.
+ *
+ * @returns An object containing { isPending, data, error, refetch }.
+ */
+export const useHandleAuthCallback = (options) => {
+    const authProvider = useAuthProvider();
+    const redirect = useRedirect();
+    const location = useLocation();
+    const locationState = location.state;
+    const nextPathName = locationState && locationState.nextPathname;
+    const nextSearch = locationState && locationState.nextSearch;
+    const defaultRedirectUrl = nextPathName ? nextPathName + nextSearch : '/';
+    const { onSuccess, onError, onSettled, ...queryOptions } = options ?? {};
+    let handleCallbackPromise;
+    const queryResult = useQuery({
+        queryKey: ['auth', 'handleCallback'],
+        queryFn: ({ signal }) => {
+            if (!handleCallbackPromise) {
+                handleCallbackPromise =
+                    authProvider &&
+                        typeof authProvider.handleCallback === 'function'
+                        ? authProvider
+                            .handleCallback({ signal })
+                            .then(result => result ?? null)
+                        : Promise.resolve();
+            }
+            return handleCallbackPromise;
+        },
+        retry: false,
+        ...queryOptions,
+    });
+    const onSuccessEvent = useEvent(onSuccess ??
+        ((data) => {
+            // AuthProviders relying on a third party services redirect back to the app can't
+            // use the location state to store the path on which the user was before the login.
+            // So we support a fallback on the localStorage.
+            const previousLocation = localStorage.getItem(PreviousLocationStorageKey);
+            const redirectTo = data?.redirectTo ??
+                previousLocation;
+            if (redirectTo === false) {
+                return;
+            }
+            redirect(redirectTo ?? defaultRedirectUrl);
+        }));
+    const onErrorEvent = useEvent(onError ?? noop);
+    const onSettledEvent = useEvent(onSettled ?? noop);
+    useEffect(() => {
+        if (queryResult.error == null || queryResult.isFetching)
+            return;
+        onErrorEvent(queryResult.error);
+    }, [onErrorEvent, queryResult.error, queryResult.isFetching]);
+    useEffect(() => {
+        if (queryResult.data === undefined || queryResult.isFetching)
+            return;
+        onSuccessEvent(queryResult.data);
+    }, [onSuccessEvent, queryResult.data, queryResult.isFetching]);
+    useEffect(() => {
+        if (queryResult.status === 'pending' || queryResult.isFetching)
+            return;
+        onSettledEvent(queryResult.data, queryResult.error);
+    }, [
+        onSettledEvent,
+        queryResult.data,
+        queryResult.error,
+        queryResult.status,
+        queryResult.isFetching,
+    ]);
+    return queryResult;
+};
+/**
+ * Key used to store the previous location in localStorage.
+ * Used by the useHandleAuthCallback hook to redirect the user to their previous location after a successful login.
+ */
+export const PreviousLocationStorageKey = '@react-admin/nextPathname';
+const noop = () => { };

package/dist/ra-core/src/auth/useIsAuthPending.d.ts

@@ -0,0 +1,13 @@
+import { HintedString } from '../types';
+/**
+ * A hook that returns true if the authProvider is currently checking the authentication status or the user's access rights.
+ * @param params
+ * @param params.action The action to check access for
+ * @param params.resource The resource to check access for (optional). Defaults to the resource of the current ResourceContext.
+ * @returns {boolean} true if the authProvider is currently checking the authentication status or the user's access rights, false otherwise.
+ */
+export declare const useIsAuthPending: (params: UseIsAuthPendingParams) => boolean;
+export type UseIsAuthPendingParams = {
+    resource?: string;
+    action: HintedString<'list' | 'create' | 'edit' | 'show' | 'delete'>;
+};

package/dist/ra-core/src/auth/useIsAuthPending.js

@@ -0,0 +1,30 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useResourceContext } from '../core';
+import useAuthProvider from './useAuthProvider';
+/**
+ * A hook that returns true if the authProvider is currently checking the authentication status or the user's access rights.
+ * @param params
+ * @param params.action The action to check access for
+ * @param params.resource The resource to check access for (optional). Defaults to the resource of the current ResourceContext.
+ * @returns {boolean} true if the authProvider is currently checking the authentication status or the user's access rights, false otherwise.
+ */
+export const useIsAuthPending = (params) => {
+    const { action, ...props } = params;
+    const queryClient = useQueryClient();
+    const authProvider = useAuthProvider();
+    const resource = useResourceContext(props);
+    if (!authProvider) {
+        return false;
+    }
+    const authQueryState = queryClient.getQueryState(['auth', 'checkAuth', {}]);
+    const canAccessQueryState = queryClient.getQueryState([
+        'auth',
+        'canAccess',
+        { action, resource },
+    ]);
+    if (authQueryState?.status === 'pending' ||
+        (authProvider.canAccess && canAccessQueryState?.status === 'pending')) {
+        return true;
+    }
+    return false;
+};

package/dist/ra-core/src/auth/useLogin.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Get a callback for calling the authProvider.login() method
+ * and redirect to the previous authenticated page (or the home page) on success.
+ *
+ * @see useAuthProvider
+ *
+ * @returns {Function} login callback
+ *
+ * @example
+ *
+ * import { useLogin } from 'react-admin';
+ *
+ * const LoginButton = () => {
+ *     const [loading, setLoading] = useState(false);
+ *     const login = useLogin();
+ *     const handleClick = {
+ *         setLoading(true);
+ *         login({ username: 'john', password: 'p@ssw0rd' }, '/posts')
+ *             .then(() => setLoading(false));
+ *     }
+ *     return <button onClick={handleClick}>Login</button>;
+ * }
+ */
+declare const useLogin: () => Login;
+/**
+ * Log a user in by calling the authProvider.login() method
+ *
+ * @param {Object} params Login parameters to pass to the authProvider. May contain username/email, password, etc
+ * @param {string} pathName The path to redirect to after login. By default, redirects to the home page, or to the last page visited after disconnection.
+ *
+ * @return {Promise} The authProvider response
+ */
+type Login = (params: any, pathName?: string) => Promise<any>;
+export default useLogin;

package/dist/ra-core/src/auth/useLogin.js

@@ -0,0 +1,78 @@
+import { useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useNotificationContext } from '../notification';
+import { useBasename, useLocation, useNavigate } from '../routing';
+import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
+import { removeDoubleSlashes } from '../routing/useCreatePath';
+/**
+ * Get a callback for calling the authProvider.login() method
+ * and redirect to the previous authenticated page (or the home page) on success.
+ *
+ * @see useAuthProvider
+ *
+ * @returns {Function} login callback
+ *
+ * @example
+ *
+ * import { useLogin } from 'react-admin';
+ *
+ * const LoginButton = () => {
+ *     const [loading, setLoading] = useState(false);
+ *     const login = useLogin();
+ *     const handleClick = {
+ *         setLoading(true);
+ *         login({ username: 'john', password: 'p@ssw0rd' }, '/posts')
+ *             .then(() => setLoading(false));
+ *     }
+ *     return <button onClick={handleClick}>Login</button>;
+ * }
+ */
+const useLogin = () => {
+    const authProvider = useAuthProvider();
+    const queryClient = useQueryClient();
+    const location = useLocation();
+    const locationState = location.state;
+    const navigate = useNavigate();
+    const basename = useBasename();
+    const { resetNotifications } = useNotificationContext();
+    const nextPathName = locationState && locationState.nextPathname;
+    const nextSearch = locationState && locationState.nextSearch;
+    const afterLoginUrl = removeDoubleSlashes(`${basename}/${defaultAuthParams.afterLoginUrl}`);
+    const login = useCallback((params = {}, pathName) => {
+        if (authProvider) {
+            return authProvider.login(params).then(ret => {
+                resetNotifications();
+                queryClient.invalidateQueries({
+                    queryKey: ['auth', 'getPermissions'],
+                });
+                if (ret && ret.hasOwnProperty('redirectTo')) {
+                    if (ret) {
+                        navigate(ret.redirectTo);
+                    }
+                }
+                else {
+                    const redirectUrl = pathName
+                        ? pathName
+                        : nextPathName + nextSearch || afterLoginUrl;
+                    navigate(redirectUrl);
+                }
+                return ret;
+            });
+        }
+        else {
+            resetNotifications();
+            navigate(afterLoginUrl);
+            return Promise.resolve();
+        }
+    }, [
+        authProvider,
+        queryClient,
+        navigate,
+        nextPathName,
+        nextSearch,
+        resetNotifications,
+        afterLoginUrl,
+    ]);
+    return login;
+};
+export default useLogin;

package/dist/ra-core/src/auth/useLogout.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Get a callback for calling the authProvider.logout() method,
+ * redirect to the login page, and clear the store.
+ *
+ * @see useAuthProvider
+ *
+ * @returns {Function} logout callback
+ *
+ * @example
+ *
+ * import { useLogout } from 'react-admin';
+ *
+ * const LogoutButton = () => {
+ *     const logout = useLogout();
+ *     const handleClick = () => logout();
+ *     return <button onClick={handleClick}>Logout</button>;
+ * }
+ */
+declare const useLogout: () => Logout;
+/**
+ * Log the current user out by calling the authProvider.logout() method,
+ * and redirect them to the login screen.
+ *
+ * @param {Object} params The parameters to pass to the authProvider
+ * @param {string} redirectTo The path name to redirect the user to (optional, defaults to login)
+ * @param {boolean} redirectToCurrentLocationAfterLogin Whether the button shall record the current location to redirect to it after login. true by default.
+ *
+ * @return {Promise} The authProvider response
+ */
+type Logout = (params?: any, redirectTo?: string | false, redirectToCurrentLocationAfterLogin?: boolean) => Promise<any>;
+export default useLogout;