flat-fuchsia
flat-fuchsia•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.
No description
5 Replies
refine-support-bot
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. 👊
robust-apricot
robust-apricot•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.",
}));
},
...
};
flat-fuchsia
flat-fuchsiaOP•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
robust-apricot
robust-apricot•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.
flat-fuchsia
flat-fuchsiaOP•2y ago
Thank you @batuhanw i'll do that 💪