Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Upgrade react-admin v2 to v3, permissions is always empty and context is not consistent

I am stuck in a react-admin v2 to v3 upgrade with two weird issues while I was wrapping the layout like this:

  composeLayout(Layout) {
    const ComponentLayout = ({ references, dispatch, ...props }) => ( // eslint-disable-line no-unused-vars
      <WithPermissions
        // eslint-disable-next-line no-unused-vars
        render={({ permissions }) => (
          <AppContextProvider
            permissions={permissions}
            references={references} 
          >
            <Layout {...props} />
          </AppContextProvider>
        )}
      />
    );

    const mapStateToProps = (state) => {
      const references = {};
      Object.keys(state.admin.resources).forEach((name) => {
        set(references, `${camelizePath(name)}.name`, name);
      });
      return { references };
    };
    return connect(mapStateToProps)(ComponentLayout);
  }
  • references is correctly set but always empty object when reading it from the context afterward
  • permissions is always undefined, while authProvider.getPermissions() always return a non empty array of permission.

This is the view within the debugger, it shows passed values to AppContextProvider, we see that permissions is undefined and references not empty:

enter image description here

This screenshot show what's in the context when we try to read from it, we can see that references is now an empty object:

enter image description here It was working fine in react-admin v2.

Our goal is to:

  • use references from a references object instead of writing hard references everywhere in our app.
  • create a pages object that depends on user's permissions for the app so we do not write hard links everywhere in the app.

What did change recently that could cause such strange behavior in v3?

like image 297
Dimitri Kopriwa Avatar asked Dec 04 '25 10:12

Dimitri Kopriwa


1 Answers

Read the below section in https://github.com/marmelab/react-admin/blob/master/UPGRADE.md

Note that direct access to the authProvider from the context is discouraged (and not documented). If you need to interact with the authProvider, use the new auth hooks:

useLogin useLogout useAuthenticated useAuthState usePermissions

like image 69
Manish Prasad Avatar answered Dec 09 '25 22:12

Manish Prasad