Custom AuthProvider not working with <HydraAdmin/>

[tmihalicka]

API Platform version(s) affected: 3.4.6

Description
After upgrading @api-platform/admin package to version 3.4.6 from version 3.4.5, authProvider not working when is used with <HydraAdmin />, when i downgrade package to version 3.4.5 everything start works flawlessly

How to reproduce
Add custom authProvider to <HydraAdmin />

Additional Context
My <HydraAdmin /> init

const App = () => {
  return (
    <Sentry.ErrorBoundary fallback={'An error has occurred'}>
      <HydraAdmin
        entrypoint={APP_CONSTANTS.ENTRYPOINT}
        dataProvider={dataProvider}
        authProvider={authProvider}
        customRoutes={customRoutes}
        theme={lightTheme}
        lightTheme={lightTheme}
        darkTheme={darkTheme}
        layout={AdminLayout}
        disableTelemetry={true}
        title={'Admin'}
      >
        {
          permissions => typeof permissions !== 'undefined' ? resourceComponents.map((component) => {
            const { resources } = permissions;
            return resources.includes(component.key) ? component : null;
          }) : <React.Fragment />
        }
      </HydraAdmin>
    </Sentry.ErrorBoundary>
  );
};

auth provider is not called, so I don't have information about the logged user and permission for this user.

[7system7]

I have the same issue.

[papppeter]

Same issue for me.

[7system7]

It seems, the problem is much older... I have a ~6 years old project, and when I delete everything and rebuild the whole FE

$ pnpm store prune && rm -rf node_modules pnpm-lock.yaml && pnpm i && pnpm dev

Details

```bash $ make build-and-prune-fe pnpm store prune && rm -rf node_modules pnpm-lock.yaml && pnpm i && pnpm dev Removed all cached metadata files Removed 19274 files Removed 83 packages Packages: +1120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Progress: resolved 1121, reused 1113, downloaded 7, added 1120, done node_modules/.pnpm/core-js@3.37.0/node_modules/core-js: Running postinstall script, done in 34ms node_modules/.pnpm/@fortawesome+fontawesome-free@6.5.2/node_modules/@fortawesome/fontawesome-free: Running postinstall script, done in 47ms node_modules/.pnpm/@fortawesome+fontawesome-common-types@6.5.2/node_modules/@fortawesome/fontawesome-common-types: Running postinstall script, done in 43ms node_modules/.pnpm/@fortawesome+fontawesome-svg-core@6.5.2/node_modules/@fortawesome/fontawesome-svg-core: Running postinstall script, done in 39ms node_modules/.pnpm/@fortawesome+free-brands-svg-icons@6.5.2/node_modules/@fortawesome/free-brands-svg-icons: Running postinstall script, done in 39ms node_modules/.pnpm/@fortawesome+free-regular-svg-icons@6.5.2/node_modules/@fortawesome/free-regular-svg-icons: Running postinstall script, done in 44ms node_modules/.pnpm/@fortawesome+free-solid-svg-icons@6.5.2/node_modules/@fortawesome/free-solid-svg-icons: Running postinstall script, done in 49ms dependencies: + @api-platform/admin 3.4.6 + @api-platform/api-doc-parser 0.16.4 + @date-io/date-fns 3.0.0 + @fontsource/roboto 5.0.13 + @fortawesome/fontawesome-free 6.5.2 + @fortawesome/fontawesome-svg-core 6.5.2 + @fortawesome/free-brands-svg-icons 6.5.2 + @fortawesome/free-regular-svg-icons 6.5.2 + @fortawesome/free-solid-svg-icons 6.5.2 + @fortawesome/react-fontawesome 0.2.0 + @hookform/resolvers 3.3.4 + @mui/icons-material 5.15.16 + @mui/lab 5.0.0-alpha.170 + @mui/material 5.15.16 + @mui/system 5.15.15 + @mui/x-date-pickers 7.3.2 + @react-pdf/renderer 3.4.4 + apexcharts 3.49.0 + array-move 4.0.0 + autosuggest-highlight 3.3.4 + axios 1.6.8 + axios-hooks 5.0.2 + bignumber.js 9.1.2 + daisyui 4.10.5 + date-fns 3.6.0 + decimal.js 10.4.3 + framer-motion 11.1.7 + lodash 4.17.21 + money 0.2.0 + mui-one-time-password-input 2.0.2 + path 0.12.7 + prop-types 15.8.1 + ra-i18n-polyglot 4.16.17 + ra-input-rich-text 4.16.17 + ra-language-english 4.16.17 + react 18.3.1 + react-admin 4.16.17 + react-cookies 0.1.1 + react-dom 18.3.1 + react-dom-confetti 0.2.0 + react-google-recaptcha-v3 1.10.1 + react-hook-form 7.51.3 + react-number-format 5.3.4 + react-query 3.39.3 + react-router-dom 6.23.0 + react-select-country-list 2.2.3 + yup 1.4.0 + zxcvbn 4.4.2 devDependencies: + @babel/core 7.24.5 + @babel/plugin-proposal-export-default-from 7.24.1 + @babel/plugin-syntax-optional-chaining 7.8.3 + @babel/preset-env 7.24.5 + @babel/preset-react 7.24.1 + @symfony/webpack-encore 4.6.1 + autoprefixer 10.4.19 + core-js 3.37.0 + eslint 8.57.0 (9.1.1 is available) + eslint-config-standard 17.1.0 + eslint-plugin-react 7.34.1 + postcss 8.4.38 + postcss-loader 7.3.4 (8.1.1 is available) + sass 1.76.0 + sass-loader 14.2.1 + tailwindcss 3.4.3 + webpack 5.91.0 + webpack-cli 5.1.4 Done in 8.8s > my-app-api@2024.1.0 dev /var/www/splendid/my-app-api > encore dev Running webpack ... 🌼 daisyUI 4.10.5 ├─ ✔︎ 2 themes added https://daisyui.com/docs/themes ╰─ ❤︎ Support daisyUI project: https://opencollective.com/daisyui DONE Compiled successfully in 10173ms 10:03:52 62 files written to public/build Entrypoint admin [big] 47.3 MiB (490 KiB) = runtime.js 18.9 KiB vendors-node_modules_pnpm_fortawesome_react-fontawesome_0_2_0__fortawesome_fontawesome-svg-co-27eb66.css 34.2 KiB vendors-node_modules_pnpm_fortawesome_react-fontawesome_0_2_0__fortawesome_fontawesome-svg-co-27eb66.js 41 MiB admin.css 86.1 KiB admin.js 6.18 MiB 56 auxiliary assets webpack compiled successfully ```

the auth-provider is never been called anymore. Not w/ the latest, nor w/ the 3.0.0. :disappointed:

If I

• restore the original (before this mods) pnpm-lock.yaml and reinstall the packages, the auth-provider works.
• use the react-admin's Admin component, the auth-provider works.

[PawelSuwinski]

https://github.com/api-platform/admin/issues/549#issuecomment-2078117075

[7system7]

@PawelSuwinski Thank u! It is working.

[7system7]

Sorry, I was on holiday, and I just quickly checked this solution.

Another problem is persisted. (I do not know anyone has this too.) Somehow the i18provider is not working w/ this solution.

I have a simple polygotProvider almost as the docs said:

import { resolveBrowserLocale } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import { enTranslation } from '@yc/core/i18n';

const translations = { en: enTranslation };

export const i18nProvider = polyglotI18nProvider(
  locale => translations?.[locale] ? translations[locale] : translations.en,
  resolveBrowserLocale('en', { fullLocale: true }),
  [
    { locale: 'en', name: 'English' },
  ],
);

Translation file is looks like this:

import englishMessages from 'ra-language-english';

export const enTranslation = {
  ...englishMessages,
  resources: {
    users: {
      name: 'User |||| Users',
      fields: {
        partner: 'Partner',

... and so on

If I check the first parameter's function w/ a breakpoint in the provider here

  locale => translations?.[locale] ? translations[locale] : translations.en,
                 ^

then, I got my translations. But the automatic translations on react-admin's fields w/ or w/o the label attribute does not work.

import { TextField } from 'react-admin';

<TextField source="title" label="resources.users.fields.partner" />

the useTranslate is not working too

import { useTranslate } from 'react-admin';

const t = useTranslate();

console.log(t('resources.users.fields.partner')); // Outputs: resources.users.fields.partner

[PawelSuwinski]

Sorry, I was on holiday, and I just quickly checked this solution.

Another problem is persisted. (I do not know anyone has this too.) Somehow the i18provider is not working w/ this solution.

Yes, because its sanitized and Admin element gets undefined that overrides upper context: https://github.com/api-platform/admin/blob/c04db4848949afe8daeeb36d008f53d3155652f5/src/AdminGuesser.tsx#L110-L117

In this case pass custom ui element, ex.:

import {AuthContext, AdminProps, AdminUI } from "react-admin";

const AdminEl = ({authProvider, ...props}: AdminProps) => (
   <AuthContext.Provider value={authProvider}>
     <AdminUI {...props} />
   </AuthContext.Provider>
);

<HydraAdmin 
  admin={AdminEl}
  //...

[7system7]

@PawelSuwinski Thank you! Am I thinking correctly that, this is just a workaround and will be fixed in 3.4.7, without the admin property & without the custom element?

[PawelSuwinski]

@PawelSuwinski Thank you! Am I thinking correctly that, this is just a workaround and will be fixed in 3.4.7, without the admin property & without the custom element?

Yes (https://github.com/api-platform/admin/pull/545).