Since v1 my login page is unreachable when user is not logged

API Platform version(s) affected: 1.0.1

Description
Open a private tab and go to the page /admin You should be redirected to /login page (if you follow the documentation) since parseHydraDocumentation manage the HTTP 401 with a react redirect component But, you just land on /admin#/ page with the message Not Found Either you typed a wrong URL, or you followed a bad link..

How to reproduce
Just follow the official documentation. Here is my sample that is almost the same as the official

import React from "react";
import {HydraAdmin} from "@api-platform/admin";
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
import {dataProvider as baseDataProvider, fetchHydra as baseFetchHydra} from "@api-platform/admin";
import authProvider from './lib/authProvider';
import { Redirect } from 'react-router-dom';

const entrypoint = document.getElementById('api-entrypoint').innerText;
// Fetch api route with Http Basic auth instead of JWT Bearer system
const fetchHeaders = {"Authorization": `Basic ${btoa(`${localStorage.getItem('username')}:${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:
                    debugger
                    return Promise.resolve({
                        api: result.api,
                        customRoutes: [{
                            props: {
                                path: '/',
                                render: () => <Redirect to={`/login`}/>,
                            },
                        }],
                    });

                default:
                    return Promise.reject(result);
            }
        },
    );
const dataProvider = baseDataProvider(entrypoint, fetchHydra, apiDocumentationParser);

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

Possible Solution
No solution for instance i don’t know why the route /login is not used. Maybe the redirect component is not understood by the app

Additional Context
I don’t know how to debug redirect component, that would have helped me to find a solution and fix it

[gtgt]

Hi!

I do have. After a day of debugging, still not found the proper way to pass that route in customRoutes with the Promise to get executed. There are many contradictory info around: First, the documentation on api-platform.com is not in sync with documentation in api-platform source I believe, the first one is the right one, since hydraClient is not exists any more. This type of issue reports also adds to the confusion. Seems this changing quite fast. I decided that I try to find different way to handle this. So I took the advice: “Refer to the chapter dedicated to authentication in the React Admin documentation for more information.” At first look, I notice the differences in authProvider there, especially the “type” variable. Then found the “loginPage” (component) property on <Admin> (from ‘react-admin’). But when I looked into the api-platform/admin sources, I realised that it’s not implemented there. Then I found in one version of the authProvider.js the following: “Promise.reject({ redirectTo: ‘/no-access’ }),”. Nice, I try that. No working, since the “AUTH_ERROR” not even called. Then I found why: because we are returning Promise.resolve() when our parseHydraDocumentation wrapper finds 401 error. So I removed that “if” clause to return reject() instead. Vioala, AUTH_ERROR runs, and the react-admin catches the “redirectTo” property in Promise.reject() argument.

So the apiDocumentationParser wrapper in Admin component looks like this:

const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
    // you can even remove the whole (".then()")
    .then(
        ({ api }) => ({ api }),
        result => {
            // console.warn(result);
            return Promise.reject(result);
        },
    );

and the AUTH_ERROR and AUTH_CHECK (yes, we can redirect earlier, so not need to perform unnecessary request without Authorization header) in authProvider.js looks like this:

    case AUTH_ERROR:
        if (401 === params.status || 403 === params.status) {
            localStorage.removeItem('token');
            return Promise.reject({ redirectTo: '/login' });
        }
        console.error(params);
        break;

    case AUTH_CHECK:
        return localStorage.getItem('token') ? Promise.resolve() : Promise.reject({ redirectTo: '/login' });

If I will have some time, I’ll make a PR maybe to update documentation, since I think this way is cleaner, easier.

[luispabon]

Thank you @Rebolon 👍