exotic-emerald•5mo ago

AuthProvider OnError Cannot Change Notification

When api send error to client, i want to generate notification by api response message. I use AuthProvider-OnError but it is not working. onError: async (error) => { console.error(error); var isAuthenticated = await isLoggedIn(); if (isAuthenticated) { if (error.response.status == 403) return { error, logout: !isAuthenticated, redirectTo: '/forbidden' }; else return { error: { name: "Login Error", message: "Invalid credentials" }, logout: !isAuthenticated }; } else { return { error: new Error("Lütfen tekrar giriş yapınız."), logout: !isAuthenticated }; } },

5 Replies

kapa.ai•5mo ago

Hi @Juncture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The onError method in the authProvider is used to handle errors that occur during the HTTP request. When an error occurs, Refine automatically calls authProvider.onError by using the useOnError hook. The onError method expects to return a Promise with the OnErrorResponse type, which includes redirectTo, logout, and error properties. In your case, you are returning an error object directly from the onError method. However, Refine expects the error property to be an instance of the JavaScript Error object. If you want to customize the error message, you should create a new Error object with your custom message and return it in the error property. Here's how you can modify your onError method:

onError: async (error) => {
    console.error(error);
    var isAuthenticated = await isLoggedIn();

    if (isAuthenticated) {
      if (error.response.status == 403)
        return { error: new Error(error.message), logout: !isAuthenticated, redirectTo: '/forbidden' };
      else
        return { error: new Error("Invalid credentials"), logout: !isAuthenticated };
    }
    else {
      return { error: new Error("Lütfen tekrar giriş yapınız."), logout: !isAuthenticated };
    }
  },

onError: async (error) => {
    console.error(error);
    var isAuthenticated = await isLoggedIn();

    if (isAuthenticated) {
      if (error.response.status == 403)
        return { error: new Error(error.message), logout: !isAuthenticated, redirectTo: '/forbidden' };
      else
        return { error: new Error("Invalid credentials"), logout: !isAuthenticated };
    }
    else {
      return { error: new Error("Lütfen tekrar giriş yapınız."), logout: !isAuthenticated };
    }
  },

In this modified version, the error property is always an instance of the Error object. The custom message is passed to the Error constructor to create a new Error object. For more information, you can refer to the Refine documentation on the onError method (https://refine.dev/docs/authentication/auth-provider#onerror) and the Refine documentation on error handling (https://refine.dev/docs/guides-concepts/authentication#error-handling). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

exotic-emerald•5mo ago

@kapa.ai This is not working for me. It is always send this message: "There was an error creating party (status code: 400)"

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "There was an error creating party (status code: 400)" is a default error message provided by Refine when a server responds with a 400 status code. This status code generally means that the server could not understand the request due to invalid syntax. If you want to customize this error message, you can do so by modifying your data provider. Refine allows you to "swizzle" your data provider, which means you can override its default behavior. In your case, you can override the create method to handle 400 status codes in a custom way. Here's an example of how you can swizzle your data provider:

import { restProvider } from "@pankod/refine";

const myDataProvider = {
    ...restProvider("<http://localhost:3000">),
    create: async (resource, params) => {
        try {
            return await restProvider("<http://localhost:3000">).create(resource, params);
        } catch (error) {
            if (error.response.status === 400) {
                throw new Error("Your custom error message");
            } else {
                throw error;
            }
        }
    },
};

export default myDataProvider;

import { restProvider } from "@pankod/refine";

const myDataProvider = {
    ...restProvider("<http://localhost:3000">),
    create: async (resource, params) => {
        try {
            return await restProvider("<http://localhost:3000">).create(resource, params);
        } catch (error) {
            if (error.response.status === 400) {
                throw new Error("Your custom error message");
            } else {
                throw error;
            }
        }
    },
};

export default myDataProvider;

In this example, the create method tries to make a request using the default behavior. If the server responds with a 400 status code, it throws a new error with a custom message. Otherwise, it re-throws the original error. For more information, you can refer to the Refine documentation on swizzling data providers (https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/) and the Refine documentation on the data provider error format (https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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