fair-rose•2y ago

custom messsage on event notification

Hi everyone, i am currently working on permission on my refine app. I allow only admin user to login to the app. To do that, i write this code in the login method in the authProvider which work fine.

return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject());

return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject());

That i would like to know is how can i customize the nottification message which appear when a non admin account try to log in the app because currently i have a message which tel : "invalid credential" like on the picture and would to write something else in the notification.

5 Replies

refine-support-bot•2y ago

Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊

foreign-sapphire•2y ago

Hello @harisris , while rejecting the promise, you can pass an object with name and message keys, then notification will be sent to the user

import { AuthProvider } from "@pankod/refine-core";  
  
const authProvider: AuthProvider = {  
 login: ({ email, password }) => {  
 ...  
 return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({  
 name: "Unauthorized Access!",  
 message: "You are not authorized to access this app.",  
 }));  
 },  
 ...  
};

import { AuthProvider } from "@pankod/refine-core";  
  
const authProvider: AuthProvider = {  
 login: ({ email, password }) => {  
 ...  
 return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({  
 name: "Unauthorized Access!",  
 message: "You are not authorized to access this app.",  
 }));  
 },  
 ...  
};

fair-rose•2y ago

Hello @batuhanw i tried your code snipped but it does not work, i always have the same message in the notification

  login: ({email, password}) => {
        const request = new Request(AUTH_SRV_URL, {
            method: "POST",
            body: JSON.stringify({email, password}),
            headers: new Headers({"Content-Type": "application/json"})
        });

        return fetch(request)
            .then((response) => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({token}) => {
                console.log("Token found", token);
                localStorage.setItem("token", token);
                axiosInstance.defaults.headers.common = {
                    Authorization: `Bearer ${token}`
                };
                return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                }));
            })
            .catch(() => {
                return Promise.reject();
            });
    },

  login: ({email, password}) => {
        const request = new Request(AUTH_SRV_URL, {
            method: "POST",
            body: JSON.stringify({email, password}),
            headers: new Headers({"Content-Type": "application/json"})
        });

        return fetch(request)
            .then((response) => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({token}) => {
                console.log("Token found", token);
                localStorage.setItem("token", token);
                axiosInstance.defaults.headers.common = {
                    Authorization: `Bearer ${token}`
                };
                return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                }));
            })
            .catch(() => {
                return Promise.reject();
            });
    },

here is my login function if i have done something wrong

foreign-sapphire•2y ago

Hello @harisris I think your Promise.reject is caught by catch in the end

login: ({email, password}) => {
        const request = new Request(AUTH_SRV_URL, {
            method: "POST",
            body: JSON.stringify({email, password}),
            headers: new Headers({"Content-Type": "application/json"})
        });

        return fetch(request)
            .then((response) => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({token}) => {
                console.log("Token found", token);
                localStorage.setItem("token", token);
                axiosInstance.defaults.headers.common = {
                    Authorization: `Bearer ${token}`
                };
                return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                }));
            })
            .catch(() => {
                return Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                });
            });
    },

login: ({email, password}) => {
        const request = new Request(AUTH_SRV_URL, {
            method: "POST",
            body: JSON.stringify({email, password}),
            headers: new Headers({"Content-Type": "application/json"})
        });

        return fetch(request)
            .then((response) => {
                if (response.status < 200 || response.status >= 300) {
                    throw new Error(response.statusText);
                }
                return response.json();
            })
            .then(({token}) => {
                console.log("Token found", token);
                localStorage.setItem("token", token);
                axiosInstance.defaults.headers.common = {
                    Authorization: `Bearer ${token}`
                };
                return authProvider.getPermissions().then((res) => res.includes("ROLE_ADMIN") ? Promise.resolve() : Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                }));
            })
            .catch(() => {
                return Promise.reject({
                    name: "Unauthorized Access!",
                    message: "You are not authorized to access this app."
                });
            });
    },

I would suggest converting this whole function to async function and use await syntax. It will be more readable and easier to catch errors this way.

fair-rose•2y ago

Thank you @batuhanw i'll do that 💪