Server side errors are not displayed as a notification when authProvider is used

[RuSS-B]

API Platform version(s) affected: 2.0.1

Description
I'm facing with a really weird bug. When I'm using with authProvider the notifications from server stop being displayed when I try to edit an entity for example, however if I remove the authProvider it works properly.

How to reproduce

//App.js
import { Redirect, Route } from "react-router-dom";
import { HydraAdmin, hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra } from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./authProvider";

const entrypoint = 'http://localhost/api';
const fetchHeaders = {};
const fetchHydra = (url, options = {credentials : 'include'}) => {
  return baseFetchHydra(url, {
    ...options,
    options: {credentials : 'include'},
    headers: new Headers(fetchHeaders),
  })
};
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
    .then(
        ({ api }) => ({ api }),
        (result) => {
            switch (result.status) {
                case 401:
                    return Promise.resolve({
                        api: result.api,
                        customRoutes: [
                          <Route path="/" render={() => {
                            return window.localStorage.getItem("loggedIn") ? window.location.reload() : <Redirect to="/login" />
                        }} />
                        ],
                    });
                default:
                    return Promise.reject(result);
            }
        },
    );
const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser);


const app = () => (<HydraAdmin
      authProvider={authProvider}
      dataProvider={dataProvider}
      entrypoint={ entrypoint }
  >
  </HydraAdmin>
);

export default app;

//.authProvider.js
const entrypoint = 'http://localhost/api';

const authProvider = {
    login: ({ username, password }) =>  {
        const request = new Request(entrypoint + '/login_check', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            // credentials : 'include',
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });

        return fetch(request)
            .then(response => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }

                return response.json();
            })
            .then(({ token }) => {
                localStorage.setItem('loggedIn', true);
            });
    },
    logout: () => {
        localStorage.removeItem('loggedIn');
        return Promise.resolve();
    },
    checkAuth: () => { 
        return localStorage.getItem('loggedIn') ? Promise.resolve() : Promise.reject({ redirectTo: '/login' })
    },
    checkError: (error) => {
        Promise.resolve();
    },
    getPermissions: params => Promise.resolve(),
};

export default authProvider;

Additional Context
Also attaching the response from server, but it's just an ApiPlatform out of the box on Symfony 5 with couple of constraints such as @Assert\Email and @Assert\Length(min=2, max=2)

{"@context":"\/api\/contexts\/ConstraintViolationList","@type":"ConstraintViolationList","hydra:title":"An error occurred","hydra:description":"email: This value is not a valid email address.\ncountryCode: This value should have exactly 2 characters.","violations":[{"propertyPath":"email","message":"This value is not a valid email address."},{"propertyPath":"countryCode","message":"This value should have exactly 2 characters."}]}

[sunglee]

I get little different error. I am using JWT authentication and here is the error I get when I visit Admin page:

Something went wrong
A client error occurred and your request couldn't be completed.
Error: API schema is not readable: undefined

My App.js is like this (trimmed imports for brevity):

const entrypoint = process.env.REACT_APP_API_ENTRYPOINT;
const fetchHeaders = {Authorization: `Bearer ${window.localStorage.getItem("token")}`};
const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
  ...options,
  headers: new Headers(fetchHeaders),
});
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, {headers: new Headers(fetchHeaders)})
  .then(
    ({api}) => ({api}),
    (result) => {
      switch (result.status) {
        case 401:
          return Promise.resolve({
            api: result.api,
            customRoutes: [
              <Route path="/" render={() => {
                window.localStorage.getItem("token") ? window.location.reload() : <Redirect to="/login"/>
              }}/>
            ],
          });

        default:
          return Promise.reject(result);
      }
    },
  );

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser);

const authProvider = {
  login: ({username, password}) => {
    const request = new Request(entrypoint + '/login', {
      method: 'POST',
      body: JSON.stringify({"email": username, password}),
      headers: new Headers({'Content-Type': 'application/json'}),
    });
    return fetch(request)
      .then(response => {
        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then(({token}) => {
        localStorage.setItem('token', token);
      });
  },
  logout: () => {
    localStorage.removeItem('token');
    return Promise.resolve();
  },
  checkAuth: () => {
    return localStorage.getItem('token') ? Promise.resolve() : Promise.reject({redirectTo: '/login'});
  },
  checkError: error => {
    const status = error.status;
    if (status === 401 || status === 403) {
      localStorage.removeItem('token');
      return Promise.reject();
    }
    return Promise.resolve();
  },
  getPermissions: params => Promise.resolve(),
};

export default () => (
  <HydraAdmin
    dataProvider={dataProvider}
    authProvider={authProvider}
    entrypoint={entrypoint}
  />
);

In the browser console, I got this error:

GET https://localhost:8443/ 403
(anonymous) @ fetchJsonLd.ts:14
step @ tslib.es6.js:99
(anonymous) @ tslib.es6.js:80
(anonymous) @ tslib.es6.js:73
__awaiter @ tslib.es6.js:69
fetchJsonLd @ fetchJsonLd.ts:9
(anonymous) @ parseHydraDocumentation.ts:77
step @ tslib.es6.js:99
(anonymous) @ tslib.es6.js:80
(anonymous) @ tslib.es6.js:73
__awaiter @ tslib.es6.js:69
fetchEntrypointAndDocs @ parseHydraDocumentation.ts:70
parseHydraDocumentation @ parseHydraDocumentation.ts:179
apiDocumentationParser @ App.js:18
introspect @ dataProvider.js:390
(anonymous) @ AdminGuesser.js:150
commitHookEffectList @ react-dom.development.js:22030
commitPassiveHookEffects @ react-dom.development.js:22064
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
flushPassiveEffectsImpl @ react-dom.development.js:25392
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushPassiveEffects @ react-dom.development.js:25361
(anonymous) @ react-dom.development.js:25240
workLoop @ scheduler.development.js:641
flushWork @ scheduler.development.js:596
performWorkUntilDeadline @ scheduler.development.js:203

Any thoughts about this issue?

[loicleng]

This is not long-term solution but rolling back to the syntax used in v2.8 of React-admin worked for me https://marmelab.com/react-admin/doc/2.8/Authentication.html.
Exemple:

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_GET_PERMISSIONS, AUTH_CHECK } from 'react-admin';
import decodeJwt from 'jwt-decode';
import React from "react";
import { Redirect } from "react-router-dom"

export default (type, params) => {
  function checkError (error) {
    const status = error.status;
    if (status === 401 || status === 403) {
      localStorage.removeItem('token');
      return Promise.reject();
    }
    return Promise.resolve();
  }
  if (type === AUTH_LOGIN) {
    const { username, password } = params;
    const request = new Request(process.env.REACT_APP_API_ENTRYPOINT + '/authentication_token', {
      method: 'POST',
      body: JSON.stringify({ email: username, password }),
      headers: new Headers({ 'Content-Type': 'application/json' }),
    })
    return fetch(request)
      .then(response => {
        if (response.status < 200 || response.status >= 300) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then(({ token }) => {
        const decodedToken = decodeJwt(token);
        localStorage.setItem('token', token);
        localStorage.setItem('role', decodedToken.roles);
      });
  }
  if (type === AUTH_LOGOUT) {
    localStorage.removeItem('token');
    localStorage.removeItem('role');
    return Promise.resolve();
  }
  if (type === AUTH_ERROR) {
    console.log(params)
    const status  = params.message.status;
    if (status === 401 || status === 403) {
      localStorage.removeItem('token');
      return Promise.reject();
    }
    if (status === 401) {
      return Promise.reject({ redirectTo: '/login' })
    }
    return Promise.resolve();
  }
  if (type === AUTH_CHECK) {
    return localStorage.getItem('token') ? Promise.resolve() : Promise.reject();
  }
  if (type === AUTH_GET_PERMISSIONS) {
    const role = localStorage.getItem('role');
    return role ? Promise.resolve(role) : Promise.reject();
  }
  return Promise.reject('Unknown method');
};

Looking forward to get any better solution