CODEWITHSUNDEEP
reactjsauthenticationroutesreact-admin
Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11157

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

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();
    },
}

Upvotes: 8

Views: 1480

Answers (2)

amirsinaa
amirsinaa

Reputation: 141

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

Upvotes: 3

Gildas Garcia
Gildas Garcia

Reputation: 7066

We didn't do anything special for this. I suspect some react voodoo here.

You may have seen that the dataProvider initialization is asynchronous and until it is initialized we show a simple loader. Maybe the resources and routes initialization are taking place before React applies the rendering result to the DOM and the redirection takes precedence.

Upvotes: 1

Related Questions