afraid-scarlet•2y ago

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 throws up a popup with the error message.

onSuccess: async ({ success, redirectTo, error }) => {
            if (success) {
                close?.("register-error");
            }

            if (error || !success) {
                open?.(buildNotification(error));
            }

onSuccess: async ({ success, redirectTo, error }) => {
            if (success) {
                close?.("register-error");
            }

            if (error || !success) {
                open?.(buildNotification(error));
            }

How can I customize the popup message? Now this error message comes from the backend:

common.emailAlreadyUsed: {"response":{"errors":[{"message":"common.emailAlreadyUsed"}],"data":null,"status":200,"headers":{"map":{"content-length":"63","content-type":"application/json; charset=utf-8"}}},"request":{"query":"\n mutation Mutation(\n $email: String!\n $password: String!\n $company: String!\n $firstName: String!\n $lastName: String!\n $industry: String!\n $skipEmailProviderValidation: Boolean!\n ) {\n register(\n registerUserInput: {\n email: $email\n password: $password\n company: $company\n firstName: $firstName\n lastName: $lastName\n industry: $industry\n skipEmailProviderValidation: $skipEmailProviderValidation\n }\n ) {\n email\n id\n }\n }\n","variables":{"email":"t@t.com","password":"1212","company":"vv","firstName":"vvv","lastName":"vvv","industry":"1","skipEmailProviderValidation":true}}}

common.emailAlreadyUsed: {"response":{"errors":[{"message":"common.emailAlreadyUsed"}],"data":null,"status":200,"headers":{"map":{"content-length":"63","content-type":"application/json; charset=utf-8"}}},"request":{"query":"\n mutation Mutation(\n $email: String!\n $password: String!\n $company: String!\n $firstName: String!\n $lastName: String!\n $industry: String!\n $skipEmailProviderValidation: Boolean!\n ) {\n register(\n registerUserInput: {\n email: $email\n password: $password\n company: $company\n firstName: $firstName\n lastName: $lastName\n industry: $industry\n skipEmailProviderValidation: $skipEmailProviderValidation\n }\n ) {\n email\n id\n }\n }\n","variables":{"email":"t@t.com","password":"1212","company":"vv","firstName":"vvv","lastName":"vvv","industry":"1","skipEmailProviderValidation":true}}}

18 Replies

kapa.ai•2y ago

Hey @mikusjozsef! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•2y ago

---------------------- To customize the error toast notification message in the useRegister hook, you can modify the buildNotification function that is called when an error occurs. However, the provided extracts do not include the buildNotification function or any information about customizing the error notification in the useRegister hook. You can refer to the refine documentation (https://refine.dev/docs) for more information on customizing notifications. If you need further assistance, please provide more information or code related to the buildNotification function or the useRegister hook. ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

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

multiple-amethyst•2y ago

when you return error object from authProvider.register function, popup will open.

const authProvider: AuthBindings = {
    // ---
    register: async () => {
        // ---
        return {
            success: false,
            error: {
                name: "Error",
                message: "Something went wrong!",
            },
        };
    },
};

const authProvider: AuthBindings = {
    // ---
    register: async () => {
        // ---
        return {
            success: false,
            error: {
                name: "Error",
                message: "Something went wrong!",
            },
        };
    },
};

afraid-scarlet•2y ago

@alicanerdurmaz No, it's not working. I try it. graphql.request catches the error I think

rare-sapphire•2y ago

Are you trying in useRegister hook or authProvider?

afraid-scarlet•2y ago

@salihozdemir

afraid-scarlet•2y ago

The "Something went wrong!" message never appears. Instead, the other toast pops up

multiple-amethyst•2y ago

probably you need to wrap your request to try catch

afraid-scarlet•2y ago

@alicanerdurmaz Yes, I tried. But then the check method runs and redirects me to the login and one more thing. The try - catch check runs into catch, but useRegister mutate runs into onSuccess function instead of the onError

rare-sapphire•2y ago

check method works when user is authenticate. Can you explain in detail how the application should behave?

afraid-scarlet•2y ago

@salihozdemir The check method was my fault, sorry 🙂

rare-sapphire•2y ago

This is the expected behavior with v4, because we don't return Promise.reject() anymore. You can use data.success to handle it. You can check out our example: https://github.com/refinedev/refine/blob/next/examples/auth-chakra-ui/src/App.tsx

afraid-scarlet•2y ago

yeah, but I can't display custom data if data has error, because the useRegister will catch it

multiple-amethyst•2y ago

is this not work for you ?

try {
    const { data } = await clientInformation.request.get("/api/auth/me");
    if (!data) {
        return {
            success: false,
            error: {
                name: "Error",
                message: "Something went wrong",
            },
        };
    }

    return {
        success: true,
        data,
    };
} catch (error) {
    return {
        success: false,
        error,
    };
}

try {
    const { data } = await clientInformation.request.get("/api/auth/me");
    if (!data) {
        return {
            success: false,
            error: {
                name: "Error",
                message: "Something went wrong",
            },
        };
    }

    return {
        success: true,
        data,
    };
} catch (error) {
    return {
        success: false,
        error,
    };
}