Login page (with firebase auth) is not rendering if dataProvider (Woocommerce) is failing - react-admin

Question

The app is not rendering the login page in case the dataprovider is failing.
I have made a customized login page, using firebase as authProvider.
I'm trying to make it work so that I log in and then use the user.id provided to use a correct API -key to fetch & update data from WooCommerce site.
Everything works fine if I have predefined the user id in the dataprovider, like this
const user = async () => {await authProvider.checkAuth()};
const vendor = user.lengt > 0 ? user.uid: 'reader';
let WooCommerce = new WooCommerceAPI(wcConfig[host][vendor]);
If I plainly use the user.uid it is undefined before I log in and the login age will not be shown at all. Now what I do wonder is that why would we try to use the dataprovider before auth and how to get pass that?
After log in the vendor (used for woocommerce api) is not updated either.
WooCommerce dataProvider is self made, it does return a 401, but I'm wondering if there's something missing in the error handling.
Here's the actual code:
export default {
getList: (resource, params) => {
const search = params.filter.q;
const { page, per_page } = params.pagination;
const query = {
page: JSON.stringify(page),
per_page: JSON.stringify(per_page),
search: JSON.stringify(search)
};
let url = `${resource}/?${stringify(query)}`
if (resource === 'system_status'){
url = resource;
}
return WooCommerce.get(url, params.data)
.then((response) => {
return {
data: response.data,
total: parseInt(response.headers['x-wp-total']),
pages: parseInt(response.headers['x-wp-totalpages'])
};
})
.catch((error) => {
// Invalid request, for 4xx and 5xx statuses
console.log("Response Status:", error.response.status);
console.log("Response Headers:", error.response.headers);
console.log("Response Data:", error.response.data);
return { data: error.response.data };
})
.finally(() => {
// Always executed.
});
},
getOne: (resource, params) => {
return WooCommerce.get(resource + '/' + params.id)
.then((response) => {
// Successful request
return {
data: response.data
};
})
.catch((error) => {
// Invalid request, for 4xx and 5xx statuses
console.log("Response Status:", error.response.status);
console.log("Response Headers:", error.response.headers);
console.log("Response Data:", error.response.data);
return { data: error.response.data };
})
.finally(() => {
// Always executed.
});
},
update: (resource, params) => {
return WooCommerce.put(resource + '/' + params.id, params.data)
.then((response) => {
// Successful request
return {
data: response.data
};
})
.catch((error) => {
// Invalid request, for 4xx and 5xx statuses
console.log("Response Status:", error.response.status);
console.log("Response Headers:", error.response.headers);
console.log("Response Data:", error.response.data);
return { data: error.response.data };
})
.finally(() => {
// Always executed.
});
},
create: (resource, params) => {
return WooCommerce.post(resource, params.data)
.then((response) => {
// Successful request
return {
data: response.data
};
})
.catch((error) => {
// Invalid request, for 4xx and 5xx statuses
console.log("Response Status:", error.response.status);
console.log("Response Headers:", error.response.headers);
console.log("Response Data:", error.response.data);
return { data: error.response.data };
})
.finally(() => {
// Always executed.
});
}
}

Answer 1

Apparently one has to handle the configuration error.
let WooCommerce = () => {
try {
return new WooCommerceAPI(config[host][vendor]);
} catch (error) {
console.error(error)
}
}
Could've been better, but at least it works now.