quaint-moccasin•3mo ago

AuthProvider Check Method Query

Dear Refine Team - I am using the Check Method of Auth Provider as below. The catch block catches the error and redirects to login page, however the login page is not showing the error that occured. We want to show the error through notification on Login Page. What needs to be done to address this requirement? try { await check(authorization_code); const state = localStorage.getItem('state'); if (state !== returnedState) { throw new Error('Invalid state value. Please try again.'); } urlParams.delete('state'); window.location.search = urlParams.toString(); checkResponse.authenticated = true; checkResponse.error = undefined; return Promise.resolve(checkResponse); } catch (e) { console.error('Login failed', e); checkResponse.authenticated = false; checkResponse.redirectTo = failureRedirectTo; checkResponse.logout = true; checkResponse.error = e; return Promise.resolve(checkResponse); }

2 Replies

kapa.ai•3mo ago

Hi @Pankaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To show the error through a notification on the Login Page, you can use Refine's Notification Provider. Refine can automatically show notifications for CRUD operations and errors. It has out-of-the-box notification providers for popular UI libraries like Ant Design, Material UI, Chakra UI, and Mantine (source (https://refine.dev/docs/guides-concepts/general-concepts#notification-provider-)). However, according to a Github issue (https://github.com/refinedev/refine/issues/3983), triggering a notification from the auth provider is a feature request and it's not currently supported out-of-the-box in Refine. As a workaround, you can store the error message in the local storage or in the URL as a query parameter during the catch block of your check method. Then, in your Login component, you can retrieve this error message and display it using the useNotification hook. Here's a simplified example:

// In your check method
catch (e) {
  console.error('Login failed', e);
  localStorage.setItem('loginError', e.message);
  // rest of your code
}

// In your Login component
import { useNotification } from "@refinedev/core";

const Login = () => {
  const { notify } = useNotification();
  const loginError = localStorage.getItem('loginError');

  useEffect(() => {
    if (loginError) {
      notify({
        message: loginError,
        type: "error",
      });
      localStorage.removeItem('loginError');
    }
  }, [loginError, notify]);

  // rest of your code
}

// In your check method
catch (e) {
  console.error('Login failed', e);
  localStorage.setItem('loginError', e.message);
  // rest of your code
}

// In your Login component
import { useNotification } from "@refinedev/core";

const Login = () => {
  const { notify } = useNotification();
  const loginError = localStorage.getItem('loginError');

  useEffect(() => {
    if (loginError) {
      notify({
        message: loginError,
        type: "error",
      });
      localStorage.removeItem('loginError');
    }
  }, [loginError, notify]);

  // rest of your code
}

Please note that this is a workaround and might not be the best solution for all use cases. Always consider the security implications when storing sensitive data in local storage or in URL parameters. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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