Display success toast notification

I have created auth provider and i implemented login functionality .when I login it display toast using 'throw new Error' if there is error ,I want to know how to display success notification or toast when user successfully log in. Successfully login I want to display toast .I used UseNotification hook but error that cannot use hook there. Iam new to refine
No description
5 Replies
kapa.ai
kapa.ai15mo ago
Hey @MarcoNix! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- Based on the information provided in the extracts, you can use the useNotification hook to display a success toast notification when a user logs in successfully. However, the extracts do not provide specific information about implementing this functionality within an auth provider. To display a success notification, you can follow this general pattern:
import { useNotification } from "@pankod/refine";

const { open } = useNotification();

// Call this function when the login is successful
const showSuccessNotification = () => {
open({
message: "Login Successful",
description: "You have successfully logged in.",
type: "success",
});
};
import { useNotification } from "@pankod/refine";

const { open } = useNotification();

// Call this function when the login is successful
const showSuccessNotification = () => {
open({
message: "Login Successful",
description: "You have successfully logged in.",
type: "success",
});
};
Keep in mind that you cannot use hooks inside non-React components or functions. If you're trying to use the useNotification hook inside a non-React component, you might encounter an error. Make sure to use the hook within a React component. For more information on using notifications in refine, you can refer to the Notification Provider documentation (https://refine.dev/docs/examples/notification-provider/react-toastify). ----------------------
kapa.ai
kapa.ai15mo ago
<@942824607818317905> kapa.ai is still learning and improving, please let us how it did by reacting below
like-gold
like-gold15mo ago
which ui library you are using ?
conscious-sapphire
conscious-sapphire15mo ago
MUI @alicanerdurmaz Meterial UI
like-gold
like-gold15mo ago
Hi @MarcoNix, refine doesn't automatically show success notification after login. I will add this feature to our backlog. with import { RefineSnackbarProvider} from "@refinedev/mui" we are using notistack@2 under the hood. This library cannot use outside react component. we need to update this to notisitack@3 to use outside react component. issue: https://github.com/iamhosseindhv/notistack/issues/30#issuecomment-1171622850 But you have options: option 1 i created notistack@3 example for you: https://codesandbox.io/s/trusting-hill-1voklb?file=/src/App.tsx:1386-1492 but with this example, we are using 2 snackbarprovider and this is not ideal. option 2 i suggest to create your notification provider until we updated notistack@2 to notistack@3 for example we implement react-toastify in this example: https://refine.dev/docs/api-reference/core/providers/notification-provider/#creating-an-notificationprovider but i don't know can u use react-toastify outside react. but i know u can use this https://react-hot-toast.com/docs/toast outside react or you can implement notisitack@3
More Posts
How can I customize useRegister onSuccess error toast notification message?This is the refine V4 source code for useRegister hook. There is error handling, which by default thSupabase Set role upon signup or signInWithOAuthHi again everyone, How to set claim for role in Supabase when user signup with email and password orResource in useCustomMutation successNotification parameterHow do I access or pass a resource name into useCustomMutation? I use this hook to have a reorderingUse more than one Supabase Table on one PageHey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the sError after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneHello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am usMultitenant URLsHi all! Anyone have more info on how to provide props to the nextjs-router in v4? We are multitenan