judicial-coral•17mo ago

v4: Supabase: updatePassword not working

forgotPassword: async ({ email }) => {
    const { error } = await supabaseClient.auth.resetPasswordForEmail(
      email, { redirectTo: "http://localhost:3000/update-password" }
    );

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  },
  updatePassword: async ({newPassword}) => {
    const { data, error } = await supabaseClient.auth.updateUser({password: newPassword,});

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  }

forgotPassword: async ({ email }) => {
    const { error } = await supabaseClient.auth.resetPasswordForEmail(
      email, { redirectTo: "http://localhost:3000/update-password" }
    );

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  },
  updatePassword: async ({newPassword}) => {
    const { data, error } = await supabaseClient.auth.updateUser({password: newPassword,});

    if (error) {
      return {
        success: false,
        error,
      };
    }

    return {
      success: true,
    };
  }

Everything is working, but the updatePassword isnt. The page is loading and there are no undefined errors or such, but the password isnt changed. AND also, there are no success notifications, not even on the resetPasswordEmail 😄 Tip to anyone reading this: to solve any issue with routing, make sure to name the folders in Kebab Case (check Docs or files in node_modules for exact details on the route names)

5 Replies

kapa.ai•17mo ago

Hey @l0zz1! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- It seems that you're missing the redirectTo property in the updatePassword method's return object. In refine v4, the updatePassword method requires promises to be resolved in all cases, with a return type of AuthActionResponse. You should always resolve the promise with a success key and an additional error key in case of a failure. The useUpdatePassword hook no longer has default redirection, so you need to add the redirectTo property to the return object source (https://refine.dev/docs/migration-guide/auth-provider). Update your updatePassword method like this:

updatePassword: async ({ newPassword }) => {
  const { data, error } = await supabaseClient.auth.updateUser({ password: newPassword });

  if (error) {
    return {
      success: false,
      error,
    };
  }

  if (data) {
    return {
      success: true,
      redirectTo: "/", // Add the redirectTo property here
    };
  }
}

updatePassword: async ({ newPassword }) => {
  const { data, error } = await supabaseClient.auth.updateUser({ password: newPassword });

  if (error) {
    return {
      success: false,
      error,
    };
  }

  if (data) {
    return {
      success: true,
      redirectTo: "/", // Add the redirectTo property here
    };
  }
}

For success notifications, you can use the notification.open method from Ant Design System source (https://refine.dev/docs/advanced-tutorials/data-provider/supabase). Add success notifications to your forgotPassword and updatePassword methods like this:

import { notification } from "antd";

// ...

forgotPassword: async ({ email }) => {
  const { error } = await supabaseClient.auth.resetPasswordForEmail(
    email, { redirectTo: "http://localhost:3000/update-password" }
  );

  if (error) {
    return {
      success: false,
      error,
    };
  }

  notification.open({
    type: "success",
    message: "Success",
    description: "Please check your email for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
  });
return {
    success: true,
  };
},
updatePassword: async ({ newPassword }) => {
  const { data, error } = await supabaseClient.auth.updateUser({ password: newPassword });

  if (error) {
    return {
      success: false,
      error,
    };
  }

  if (data) {
    notification.open({
      type: "success",
      message: "Success",
      description: "Password updated successfully.",
    });

    return {
      success: true,
      redirectTo: "/",
    };
  }
}

import { notification } from "antd";

// ...

forgotPassword: async ({ email }) => {
  const { error } = await supabaseClient.auth.resetPasswordForEmail(
    email, { redirectTo: "http://localhost:3000/update-password" }
  );

  if (error) {
    return {
      success: false,
      error,
    };
  }

  notification.open({
    type: "success",
    message: "Success",
    description: "Please check your email for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
  });
return {
    success: true,
  };
},
updatePassword: async ({ newPassword }) => {
  const { data, error } = await supabaseClient.auth.updateUser({ password: newPassword });

  if (error) {
    return {
      success: false,
      error,
    };
  }

  if (data) {
    notification.open({
      type: "success",
      message: "Success",
      description: "Password updated successfully.",
    });

    return {
      success: true,
      redirectTo: "/",
    };
  }
}

Make sure to adjust the redirectTo property according to your desired route after a successful password update. ----------------------

kapa.ai•17mo ago

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

Omer•17mo ago

Hey @l0zz1 , Have you reviewed our Supabase example? All the features you mentioned are already integrated. Check it out at https://refine.dev/docs/examples/data-provider/supabase/

Supabase | refine

Connect your Supabase database with refine Supabase Data Provider and easily manage all the features that the database offers in your interface. This example will show you how Supabase Data Provider works and is used.

Omer•17mo ago

Note for those who find and read this topic in the future: https://discord.com/channels/837692625737613362/1087345760330330183/1087652039523311646

judicial-coral•17mo ago

Solution: https://discord.com/channels/837692625737613362/1087345760330330183/1087700299290001569