Merge pull request marmelab#10392 from marmelab/login-getPermissions-cache

Fix `useLogin` should invalidate the `getPermissions` cache

Author: djhi

packages/ra-core/src/auth/useLogin.spec.tsx

@@ -7,6 +7,7 @@ import { CoreAdminContext } from '../core/CoreAdminContext';
 import useLogin from './useLogin';
 
 import { TestMemoryRouter } from '../routing';
+import { PermissionsState } from './useLogin.stories';
 
 describe('useLogin', () => {
     describe('redirect after login', () => {
@@ -99,4 +100,14 @@ describe('useLogin', () => {
             expect(screen.queryByText('Login')).not.toBeNull();
         });
     });
+
+    it('should invalidate the getPermissions cache', async () => {
+        render(<PermissionsState />);
+        await screen.findByText('PERMISSIONS: guest');
+        fireEvent.click(screen.getByText('Login'));
+        await screen.findByText('PERMISSIONS: admin');
+        fireEvent.click(screen.getByText('Logout'));
+        await screen.findByText('LOADING');
+        await screen.findByText('PERMISSIONS: guest');
+    });
 });

packages/ra-core/src/auth/useLogin.stories.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import usePermissions from './usePermissions';
+import { CoreAdminContext, TestMemoryRouter, useLogin, useLogout } from '..';
+
+export default {
+    title: 'ra-core/auth/useLogin',
+};
+
+const getAuthProviderWithLoginAndLogout = () => {
+    let isLoggedIn = false;
+    return {
+        login: () => {
+            isLoggedIn = true;
+            return Promise.resolve();
+        },
+        logout: () => {
+            isLoggedIn = false;
+            return Promise.resolve();
+        },
+        checkAuth: () => (isLoggedIn ? Promise.resolve() : Promise.reject()),
+        checkError: () => Promise.reject('bad method'),
+        getPermissions: () =>
+            new Promise(resolve =>
+                setTimeout(resolve, 300, isLoggedIn ? 'admin' : 'guest')
+            ),
+    };
+};
+
+const LoginButton = () => {
+    const login = useLogin();
+    return <button onClick={login}>Login</button>;
+};
+
+const LogoutButton = () => {
+    const logout = useLogout();
+    return <button onClick={logout}>Logout</button>;
+};
+
+const UsePermissions = () => {
+    const permissionQueryParams = {
+        retry: false,
+    };
+    const state = usePermissions({}, permissionQueryParams);
+    return (
+        <div>
+            {state.isPending ? <span>LOADING</span> : null}
+            {state.permissions ? (
+                <span>PERMISSIONS: {state.permissions}</span>
+            ) : null}
+            {state.error ? <span>ERROR</span> : null}
+        </div>
+    );
+};
+
+export const PermissionsState = () => (
+    <TestMemoryRouter>
+        <CoreAdminContext authProvider={getAuthProviderWithLoginAndLogout()}>
+            <UsePermissions />
+            <LoginButton />
+            <LogoutButton />
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);

packages/ra-core/src/auth/useLogin.ts

@@ -5,6 +5,7 @@ import { useNotificationContext } from '../notification';
 import { useBasename } from '../routing';
 import useAuthProvider, { defaultAuthParams } from './useAuthProvider';
 import { removeDoubleSlashes } from '../routing/useCreatePath';
+import { useQueryClient } from '@tanstack/react-query';
 
 /**
  * Get a callback for calling the authProvider.login() method
@@ -31,6 +32,7 @@ import { removeDoubleSlashes } from '../routing/useCreatePath';
  */
 const useLogin = (): Login => {
     const authProvider = useAuthProvider();
+    const queryClient = useQueryClient();
     const location = useLocation();
     const locationState = location.state as any;
     const navigate = useNavigate();
@@ -47,6 +49,9 @@ const useLogin = (): Login => {
             if (authProvider) {
                 return authProvider.login(params).then(ret => {
                     resetNotifications();
+                    queryClient.invalidateQueries({
+                        queryKey: ['auth', 'getPermissions'],
+                    });
                     if (ret && ret.hasOwnProperty('redirectTo')) {
                         if (ret) {
                             navigate(ret.redirectTo);
@@ -67,6 +72,7 @@ const useLogin = (): Login => {
         },
         [
             authProvider,
+            queryClient,
             navigate,
             nextPathName,
             nextSearch,