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.
- Go to the demo app and login with demo/demo
- Wait for the dashboard to show
- Clear local storage and cookies
- Slow down CPU x6 and network to slow 3G in the browser console (Chrome)
- 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();
},
}