cannot capture error when authenticating

I'm using refine.dev with strapi for login and data access. How can I capture login error ? My authprovider.ts looks like this, and I don't know to attach an handler on a failed response. export const authProvider: AuthBindings = { login: async ({ email, password }) => { const { data, status } = await strapiAuthHelper.login(email, password);
11 Replies
kapa.ai
kapa.ai•2y ago
Hi @dannywhiteagile. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your authProvider's login method, you can handle the login error by checking the status of the response. If the status is not 200, you can return an object with success set to false and an error object containing a message and name. Here's how you can do it:
export const authProvider: AuthBindings = {
login: async ({ email, password }) => {
const { data, status } = await strapiAuthHelper.login(email, password);
if (status === 200) {
localStorage.setItem(TOKEN_KEY, data.jwt);

// set header axios instance
axiosInstance.defaults.headers.common = {
Authorization: `Bearer ${data.jwt}`,
};

return {
success: true,
redirectTo: "/",
};
}
return {
success: false,
error: {
message: "Login Error",
name: "Invalid email or password",
},
};
},
// ...
};
export const authProvider: AuthBindings = {
login: async ({ email, password }) => {
const { data, status } = await strapiAuthHelper.login(email, password);
if (status === 200) {
localStorage.setItem(TOKEN_KEY, data.jwt);

// set header axios instance
axiosInstance.defaults.headers.common = {
Authorization: `Bearer ${data.jwt}`,
};

return {
success: true,
redirectTo: "/",
};
}
return {
success: false,
error: {
message: "Login Error",
name: "Invalid email or password",
},
};
},
// ...
};
In the above code, if the status is not 200, it means there's an error with the login. In this case, we return an object with success set to false and an error object with a message and name properties. You can customize the message and name to suit your needs. For more information, you can refer to the React Admin Panel Tutorial with Chakra UI and Strapi (https://refine.dev/blog/react-admin-tutorial) on the refine.dev blog. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2y ago
<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
metropolitan-bronze
metropolitan-bronzeOP•2y ago
I cannot see the status code. seems that the error in catched somewhere else. where this errors are catched?
metropolitan-bronze
metropolitan-bronze•2y ago
Hello @dannywhiteagile, you can use try catch
try {
const { data, status, statusText } = await strapiAuthHelper.login(
email,
password,
);


} catch (error) {
// do something with error
}
try {
const { data, status, statusText } = await strapiAuthHelper.login(
email,
password,
);


} catch (error) {
// do something with error
}
metropolitan-bronze
metropolitan-bronzeOP•2y ago
you are the best ! it works
metropolitan-bronze
metropolitan-bronze•2y ago
I'm glad to hear that šŸ™ŒšŸ»
metropolitan-bronze
metropolitan-bronzeOP•2y ago
this seems to break the authetication. no longer works for right username/ password :/ export const authProvider: AuthBindings = { login: async ({ email, password }) => { try { const { data, status } = await strapiAuthHelper.login( email, password, ); } catch (error) { // do something with error // return { success: false, error: { message: "Login fallito", name: "Attenzione: username / password invalidi", }, }; // } login no longer works. putting this out of the try catch block works again (but no error handling) const { data, status } = await strapiAuthHelper.login( email, password, );
metropolitan-bronze
metropolitan-bronze•2y ago
you are not returning anything in the try scope
metropolitan-bronze
metropolitan-bronze•2y ago
GitHub
refine/examples/data-provider-strapi-v4/src/App.tsx at next Ā· refin...
Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refinedev/refine
metropolitan-bronze
metropolitan-bronze•2y ago
you can follow this example
metropolitan-bronze
metropolitan-bronzeOP•2y ago
it works now. this is my the code. I post it for anyone needing that export const authProvider: AuthBindings = { login: async ({ email, password }) => { /**/ try { const { data, status } = await strapiAuthHelper.login( email, password, ); if (status === 200) { localStorage.setItem(TOKEN_KEY, data.jwt); // set header axios instance axiosInstance.defaults.headers.common[ "Authorization" ] = Bearer ${data.jwt}; return { success: true, redirectTo: "/", }; } return { success: false, error: { message: "Login fallito", name: "Attenzione: username / password invalidi", }, }; } catch (error) { // do something with error return { success: false, error: { message: "Login fallito", name: "Attenzione: username / password invalidi", }, }; } },

Did you find this page helpful?