protestant-coral•17mo 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•17mo 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•17mo ago

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

protestant-coralOP•17mo ago

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

distinguished-silver•17mo 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
}

protestant-coralOP•17mo ago

you are the best ! it works

distinguished-silver•17mo ago

I'm glad to hear that 🙌🏻

protestant-coralOP•17mo 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, );

distinguished-silver•17mo ago

you are not returning anything in the try scope

distinguished-silver•17mo 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

distinguished-silver•17mo ago

you can follow this example

protestant-coralOP•17mo 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", }, }; } },