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•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•14mo ago

<@1129002557419827210> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•14mo ago

I cannot see the status code. seems that the error in catched somewhere else. where this errors are catched?

eager-peach•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•14mo ago

you are the best ! it works

eager-peach•14mo ago

I'm glad to hear that 🙌🏻

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

eager-peach•14mo ago

you are not returning anything in the try scope

eager-peach•14mo ago

https://github.com/refinedev/refine/blob/next/examples/data-provider-strapi-v4/src/App.tsx#L48

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

eager-peach•14mo ago

you can follow this example

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", }, }; } },