[FIXED] How to prevent flash of dashboard content while unauthenticated in react-admin?

Issue

According to an older comment and what I am experiencing with my app, react-admin may show the Dashboard when not authenticated for a brief moment right before redirecting to and showing the login dialog.

The AUTH_CHECK call is asynchronous, and the response can come with a long delay. We choose to render the dashboard even though the response from the AUTH_CHECK call hasn't come yet. We've adopted this strategy for performance reasons (it's called optimistic rendering).

However, their demo app manages to not show the Dashboard for a brief moment. It immediately shows the login form.

1. Go to the demo app and login with demo/demo
2. Wait for the dashboard to show
3. Clear local storage and cookies
4. Slow down CPU x6 and network to slow 3G in the browser console (Chrome)
5. Hit refresh. You don't see the dashboard, but immediately the login dialog

What did they implement in their demo app to accomplish not seeing the dashboard briefly while unauthenticated? Because that is what I want to accomplish in my app too.

The following may be a red herring, but bonus points for you if you see something wrong with my authProvider configuration that causes the Dashboard to show briefly while unauthenticated in my app.

const authProvider = {
    login: ({ username, password }) => {
        return fetchUtils
            .fetchJson(`${uri}/login`, {
                method: 'POST',
                credentials: 'include',
                body: JSON.stringify({ username, password }),
            })
            .then(({ status, body, json }) => {
                if (status < 200 || status >= 300) {
                    throw new Error(body);
                }
                localStorage.setItem('me', JSON.stringify(json));
            });
    },
    logout: () => {
        localStorage.removeItem('me');

        return fetchUtils
            .fetchJson(`${uri}/signout`, {
                method: 'POST',
            })
            .then(() => {
                return Promise.resolve(/*loginUrl*/);
            })
            .catch(err => {
                console.log('Error, while requesting signout', err);
                return Promise.resolve();
            });
    },
    checkError: params => {
        let isAuthError;
        try {
            isAuthError = params.networkError.result.errors.some(
                e => e.extensions.code === 'UNAUTHENTICATED'
            );
        } catch (e) {
            //
        }

        if (isAuthError) {
            localStorage.removeItem('me');
            return Promise.reject();
        }
        return Promise.resolve();
    },
    checkAuth: () => {
        return localStorage.getItem('me')
            ? Promise.resolve()
            : Promise.reject();
    },
    getPermissions: () => {
        const { role } = JSON.parse(localStorage.getItem('me') || '{}');
        return role ? Promise.resolve(role) : Promise.reject();
    },
}

Solution

2022 update : (react-admin version ^4.2.7)

If anyone boilerplate their react-admin application with this demo and your auth provider seems to work all right but still struggles with the un-authorized flash of dashboard content issue you need to disable anonymous access at the root level with the requireAuth flag :

const App = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider} requireAuth>
    <Resource name="some_hypothetical_resource" list={HypotheticalComponent} />
</Admin>

);

More info: Documentation

Answered By - amirsinaa

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)