jolly-crimson
jolly-crimson15mo 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
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. 👊
modern-teal
modern-teal15mo 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.",
}));
},
...
};
jolly-crimson
jolly-crimson15mo 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
modern-teal
modern-teal15mo 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.
jolly-crimson
jolly-crimson15mo ago
Thank you @batuhanw i'll do that 💪