flat-fuchsia
flat-fuchsiaā€¢14mo ago

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ā€¢14mo 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ā€¢14mo ago
<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia
flat-fuchsiaā€¢14mo ago
I cannot see the status code. seems that the error in catched somewhere else. where this errors are catched?
correct-apricot
correct-apricotā€¢14mo 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
}
flat-fuchsia
flat-fuchsiaā€¢14mo ago
you are the best ! it works
correct-apricot
correct-apricotā€¢14mo ago
I'm glad to hear that šŸ™ŒšŸ»
flat-fuchsia
flat-fuchsiaā€¢14mo 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, );
correct-apricot
correct-apricotā€¢14mo ago
you are not returning anything in the try scope
correct-apricot
correct-apricotā€¢14mo 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
correct-apricot
correct-apricotā€¢14mo ago
you can follow this example
flat-fuchsia
flat-fuchsiaā€¢14mo 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", }, }; } },