[DataProvider] Empty Headers and 401 response

[RSalo]

API Platform version(s) affected: 2.6.4

Description
I try to add JWT token to the header, but it stays empty no matter what returning 401 response.

How to reproduce

function App() {

    const getHeaders = () => localStorage.getItem("token") ? {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
    } : {};

    const customFetchHydra = (url, options = {}) => {
        fetchHydra(url, {
            ...options,
            headers: new Headers(getHeaders()),
        })
    };

    const dataProvider = hydraDataProvider(API_ENTRYPOINT, customFetchHydra);

    return (
        <HydraAdmin ... dataProvide={dataProvider} ...>
            ...
        </HydraAdmin>
    );
}

Possible Solution
~

Additional Context
I tried to debug compiled fetchJsonLd.js:

then I was trying to show all headers in the chrome console at that moment:

I have no idea where "next" comes from...

[alanpoulain]

Hello, have you followed https://api-platform.com/docs/admin/authentication-support/?

[RSalo]

@alanpoulain Hello. Yes, I did all according to this documentation.

[alanpoulain]

It doesn't seem so. For instance:

    const customFetchHydra = (url, options = {}) => {
        fetchHydra(url, {
            ...options,
            headers: new Headers(getHeaders()),
        })
    };

Should be:

    const customFetchHydra = (url, options = {}) => {
        fetchHydra(url, {
            ...options,
            headers: getHeaders,
        })
    };

[RSalo]

@alanpoulain i did it too. Was trying different variants and nothing change...

[alanpoulain]

You need to change the apiDocumentationParser too:

const apiDocumentationParser = async (entrypoint) => {
    const { api } = await parseHydraDocumentation(entrypoint, { headers: getHeaders });
    return { api };
};

[RSalo]

@alanpoulain added as third parameter

    const apiDocumentationParser = async (entrypoint) => {
        try {
            const { api } = await parseHydraDocumentation(entrypoint, { headers: getHeaders });
            return { api };
        } catch (result) {
            if (result.status === 401) {
                // Prevent infinite loop if the token is expired
                localStorage.removeItem("token");

                return {
                    api: result.api,
                    customRoutes: [
                        <Route path="/" />
                    ],
                };
            }

            throw result;
        }
    };
    const dataProvider = hydraDataProvider(API_ENTRYPOINT, customFetchHydra, apiDocumentationParser);

And the same situation. I have no idea, it's my fail or bug...

[RSalo]

Find out that we have no header options at all:
https://github.com/api-platform/admin/blob/main/src/hydra/dataProvider.js#L245
So "options.headers" is empty and we creating an empty header object
https://github.com/api-platform/admin/blob/main/src/hydra/fetchHydra.js#L20
As we have clear headers our parser makes a request without any headers
https://github.com/api-platform/admin/blob/main/src/hydra/fetchHydra.js#L28

I can be mistaken...

[alanpoulain]

Closing because it was not followed. It seems other users don't have similar issues. Please reopen if it's the case.