extended-yellow•2y ago

Change update patch url

Hello !! i try to implement the updating password feature. I wrote the updatePasseword in the auth provider like following

 updatePassword: (params) => {
        let url = "";
        let userID: string = "";
        // @ts-ignore
        authProvider.getUserIdentity().then((response) => {
            userID = response.id;
            url = `${UPDATE_URL}${userID}`;
        });
        if (params.password === params.confirmPassword) {
            axiosInstance.patch(url, {password: params.password});
            return Promise.resolve("/offers");
        }
        return Promise.reject();
    },

 updatePassword: (params) => {
        let url = "";
        let userID: string = "";
        // @ts-ignore
        authProvider.getUserIdentity().then((response) => {
            userID = response.id;
            url = `${UPDATE_URL}${userID}`;
        });
        if (params.password === params.confirmPassword) {
            axiosInstance.patch(url, {password: params.password});
            return Promise.resolve("/offers");
        }
        return Promise.reject();
    },

My issue is that when I click on the update password button, the api call mycmsurl/update-password endpoint and not the url that i specified in the updatePassword function. How can change the api endpoint on save button click ?

15 Replies

refine-support-bot•2y ago

Hi, 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 found an answer! 🏆
Answer: You can pass any parameters to the updatePassword method. The useUpdatePassword hook's mutation will pass the mutation's parameters to the updatePassword method without any type constraints. You can also use the useUpdatePassword hook's mutation to redirect the user to a specific page. SOURCES: ./docs/api-reference/core/hooks/auth/useUpdatePassword.md ./docs/tutorial/5-understanding-authprovider/1-create-authprovider.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

deep-jade•2y ago

Hey @harisris, Actually, Save button on the UpdatePassword page doesn't have any endpoint, or URL. When you submit the form, your updatePassword method from the authProvider will be called as a mutation. The problem seems to be elsewhere, but I'm leaving this link for you to try and customize your AuthPages anyway. https://refine.dev/docs/tutorial/understanding-authprovider/antd/auth-pages/#customizing-auth-pages

extended-yellowOP•2y ago

Thank you @salihozdemir but i don't see what is wrong with my updatePassword. Maybe should specify something in the routerProvider ? I try to remove the api call but nothing change Even if i specified the URL in updatePassword, axios did not made the patch request on the specified url

deep-jade•2y ago

When I looked again, there is no hard coded URL on the refine side. The useUpdatePassword hook executes the updatePassword method as mutation function. So, it'll be work. Are you sure the code passed your if check?

extended-yellowOP•2y ago

yes i'm sure, the code passed because if i comment the patch request, there is no api call. Every thing is good exept the called url. Is any other way to update a password than use a routerProvrider knowing that the user is already logged ? If i specify my case a little bit I have 1 endpoint which allows me to CRUD users and to update users password i have "edit" the logged user but i would like to use the updatePassword page from AuthProvider component Can i do that or should i do in an other way ?

stormy-gold•2y ago

Let me try to clear things up @harisris and @salihozdemir, then we can try to resolve the issue 😅 Are you using forgotPassword for the user (as the intended behavior of the authProvider) or using it inside an edit page of a resource (like users). It's best to keep them apart but if this is the case, how did you connected these two? using useCustomMutation or something like that? If you're using the AuthPage component or similar, do you have a <form> and <button type="submit"> (or <input type="submit" />)? I'm guessing there's a mixup in between these two concepts, auth and resources(data) but I'd love to help if we can clear up the current status here

extended-yellowOP•2y ago

I try to update/edit the password of the current logged user. So i use the updatePassword function from the auth provider. The function is call when i use the updatePasswordForm but it made not the API call that i specify in the updatePassword function but it make an other call which look like : mycmsurl/update-password I'm not using it inside an edit page

stormy-gold•2y ago

Looks like its submitting the form, and when its not stated otherwise in the action property of <form> it will be done to the same url (in your case mycmsurl/update-password) Can you please add event.preventDefault() to the submit function (in form or in button)

extended-yellowOP•2y ago

in the swizzle authPage, i try to add the event.preventDefault() in

<Box
    component="form"
    onSubmit={handleSubmit((data) => {
        if (onSubmit) {
            return onSubmit(data);
        }

        return update(data);
    })}
    gap="16px"
>

<Box
    component="form"
    onSubmit={handleSubmit((data) => {
        if (onSubmit) {
            return onSubmit(data);
        }

        return update(data);
    })}
    gap="16px"
>

but the onClick do not trigger anything

stormy-gold•2y ago

Can you try to provide a minimal reproduction for this issue? 🙏 I think you can use this sandbox as a starter https://codesandbox.io/embed/github/refinedev/refine/tree/next/examples/auth-antd?view=preview&theme=dark&codemirror=1 If you feel more comfortable in your local, here's the command for it npm create refine-app@latest -- --example auth-antd

extended-yellowOP•2y ago

i try to explain you more accuratly because it would take me lot of time to reproduce the issue on a sand box and i don't know if it will work

deep-jade•2y ago

You can create your own forgot-password page and you can handle our forgot password logic without AuthPage or useForgotPassword hook. Just you need to attention to checkAuth method.

extended-yellowOP•2y ago

The user is logged. I need to modify his password. I need to call this URL : myUserServiceURL/api/users/id (the password is passed in the body of the request) so i do it in the updatePassword function from the AuthProvider. But when i submit the modification, the URL called is : localhost:8000/update-password. Should use the AuthProvider at all to do that or did i do something wrong in my AuthProvider implmentation ? If it can help, i provide you my AuthProvider and my updatePasswor page https://codesandbox.io/s/xenodochial-sun-pj8xg7?file=/src/updatePassword.tsx

deep-jade•2y ago

We'll investigate and inform you as soon as possible, stay tuned please.

extended-yellowOP•2y ago

Hi @salihozdemir did you find something about this case ?

Change update patch url

Did you find this page helpful?