Enable Members to Delete Their Own Accounts Directly from the Members Area Without Contacting Site Owners

[Andrian]

Introduction:
Hello, I recently encountered a situation where it was necessary to provide users with the option to delete their accounts from the members area without needing to contact the website owner.

I found that this is a feature request, so I decided to implement a solution using Velo.

To provide a better experience, here is a video demonstrating how to implement this solution step by step. You can watch it here: link

Steps

1. Enable the developer mode, the instructions how to enable these can be found via this link.

2. In the backend, create a file: deleteMember.web.js
   

   

And place the following code in the created file.

import { webMethod, Permissions } from "wix-web-module";
import { members } from "wix-members.v2";
import { elevate } from "wix-auth";

const elevatedDeleteMember = elevate(members.deleteMember);

export const deleteCurrentMember = webMethod(
  Permissions.SiteMember,
  async () => {
    try {
      const currentMember = await members.getCurrentMember();

      if (!currentMember || !currentMember.member) {
        throw new Error("User not logged in");
      }
      const memberId = currentMember.member._id;

      const result = await elevatedDeleteMember(memberId);

      return result;
    } catch (error) {
      console.error("Failed to delete member:", error);
      throw error;
    }
  }
);

3. The final steps involve adding the remaining code and improving the user experience to prevent users from accidentally deleting their accounts.
   a) Create a section in the account settings page in the members area, and add a button labeled “Delete Account.”
   b) Create a lightbox, and inside it, add a button labeled “Confirm Delete Account.”
   c) Connect the Button from the page to open the created lightbox
   d)Add the following code to the lightbox’s code.
   e) Make sure to set the button ID to deleteButton.

import { deleteCurrentMember } from 'backend/deleteMember.web';
import wixLocationFrontend from "wix-location-frontend";
import { authentication } from "wix-members-frontend";

$w("#deleteButton").onClick(async () => {
  try {
    await deleteCurrentMember();

    setTimeout(() => {
      (async () => {
        await authentication.logout();
        // Change this URL to your homepage domain, so after logout, user will be redirected to homepage
        wixLocationFrontend.to("https://yourWebsiteDomain.com");
      })();
    }, 500);

  } catch (e) {
    console.error(e);
  }
});

The outcome for this step should look like this:

If you have any questions, feel free to reply here, will be happy to help!

Tools, Documentation and APIs:

Web Method | Velo

https://www.wix.com/velo/reference/wix-web-module/permissions

Delete Member | Velo

Get Current Member | Velo

Logout | Velo

To | Velo