authProvider's onError doesn't run when getting 403 and 401 responses

I'm trying to logout the user when getting a 403 or 401 response, but onError function doesn't run never

5 Replies

kapa.ai•12mo ago

Hi @jaoc1811. 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 designed to handle error responses from the API. If you want to log out the user when a 401 or 403 error is encountered, you can define this logic in the onError method. Here's an example of how you can do this:

import { AuthBindings } from "@refinedev/core";  
  
const authProvider: AuthBindings = {  
 // ---  
 onError: async (error) => {  
 if (error.status === 401 || error.status === 403) {  
 return {  
 logout: true,  
 redirectTo: "/login",  
 error,  
 };  
 }  
  
 return {};  
 },  
 // ---  
};

import { AuthBindings } from "@refinedev/core";  
  
const authProvider: AuthBindings = {  
 // ---  
 onError: async (error) => {  
 if (error.status === 401 || error.status === 403) {  
 return {  
 logout: true,  
 redirectTo: "/login",  
 error,  
 };  
 }  
  
 return {};  
 },  
 // ---  
};

In this example, if the error status is 401 or 403, the onError method will return an object with logout: true, redirectTo: "/login", and the error itself. This will trigger the logout process and redirect the user to the login page. The onError method is called when you get an error response from the API. You can use the useOnError hook to call this method. For example:

import { useOnError } from "@refinedev/core";  
  
const { mutate: onError } = useOnError();  
  
fetch("<http://example.com/payment">)  
 .then(() => console.log("Success"))  
 .catch((error) => onError(error));

import { useOnError } from "@refinedev/core";  
  
const { mutate: onError } = useOnError();  
  
fetch("<http://example.com/payment">)  
 .then(() => console.log("Success"))  
 .catch((error) => onError(error));

In this example, if the fetch request fails, the onError method is called with the error object. If the onError method is not being called as expected, make sure that you are correctly using the useOnError hook and that the authProvider is properly configured. Also, ensure that the onError method is correctly defined in your authProvider. For more information, refer to the useOnError documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useOnError/) and the authProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

like-gold•12mo ago

@kapa.ai i found out the onError function doesnt run when your component is created with the infencerer, I changed it and now it works

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad to hear that you've resolved the issue. The Inferencer component is a powerful tool in Refine for generating UI components based on your API schema. However, it might not cover all specific use cases, such as custom error handling with onError. Remember, when you're dealing with custom logic like error handling, you might need to use more explicit hooks or components provided by Refine. In your case, using the useOnError hook directly allowed you to handle the error responses as you intended. If you encounter similar issues in the future, don't hesitate to refer back to the Refine documentation (https://refine.dev/docs). It provides comprehensive guides and API references that can help you navigate through the capabilities of the framework. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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