Member Management with the Memberstack DOM Package

Updated July 25, 2023 12:44

Member management is a critical part of any application with registered users. The Memberstack DOM (Document Object Model) package provides a robust set of methods to help you manage members directly within your JavaScript code. With the DOM package, you can fetch member profiles, update member details, manage access to different parts of your app, and more. This empowers you to build customized experiences for members without needing to build out complex user infrastructure from scratch.

View the full DOM Package Website for more additional guidance.

This guide will walk you through the most common member management tasks utilizing the methods available in the Memberstack DOM package. We'll cover fetching member data, updating member details, managing access, and more in depth. Everything you need to start leveraging these membership tools will be explained clearly along with detailed examples.

Note: The Memberstack DOM Package can be accessed through the Webflow Package as well by using window.$memberstackDom.getCurrentMember() instead of memberstack.getCurrentMember().

Fetching Member Data

Once a member is logged in, you can retrieve information about them from Memberstack. Here are some useful methods:

Get Currently Logged In Member

This method returns the full Member object representing the currently authenticated member.

// Store currently logged in member 
const member = await memberstack.getCurrentMember(); 

// Access member properties 
console.log(member.id); 
console.log(member.customFields);

The member object contains the member's ID, custom fields, metadata, plan connections, and more.

Updating Member Details

You may want to enable members to update their own profile information and settings. Here are some useful methods for updates:

Update Custom Fields

Custom fields allow you to store structured data on members. You can update them with:

// Define updated custom field(s) 
const customFields = { 
  country: 'Canada' 
}; 

// Update current member's custom fields 
await memberstack.updateMember({ 
  customFields 
});

This will overwrite the member's existing country value with 'Canada'.

Change Member's Email

// New email address 
const newEmail = 'newemail@example.com'; 

// Update current member's email 
await memberstack.updateMemberAuth({ 
  email: newEmail 
});

This will update the member's email in Memberstack. Useful for enabling email changes.

Update Current Member Password

Allow members to change their password with:

// Current password 
const currentPassword = 'existing_password'; 

// New password 
const newPassword = 'new_secure_password'; 

// Update password 
await memberstack.updateMemberAuth({ 
  oldPassword: currentPassword, 
  newPassword: newPassword 
});

This will update the member's password in Memberstack.

Send Member Verification Email

Prompt Memberstack to re-send the member's verification email:

await memberstack.sendMemberVerificationEmail();

Useful if members need the verification email resent.

Working with Member JSON Data

The member JSON attribute allows you to store custom profile data for each member.

Get Member JSON

Retrieve the member's JSON data:

// Get member JSON 
const json = await memberstack.getMemberJSON(); 

// Access data 
console.log(json.userName); 
console.log(json.avatarURL);

Update Member JSON

To update the JSON data, first get the current data, modify it, then apply the update:

// Get current JSON 
let json = await memberstack.getMemberJSON(); 

// Add/update properties 
json.avatarURL = 'new_avatar_url'; 

// Remove a property 
delete json.oldProperty; 

// Update member's JSON 
await memberstack.updateMemberJSON({json});

This preserves existing data while allowing updates.

Managing Access

You can also manage member access to different parts of your application using Memberstack.

Add Free Plan Access

Grant access to a part of your app by adding a free plan:

// Free plan ID to grant access to 
const planId = 'plan123'; 

// Add free plan to current member 
await memberstack.addPlan({ 
  planId 
});

This will connect the member to the free plan, granting access.

Revoke Free Plan Access

You can revoke access by removing a free plan:

// Free plan ID to revoke access from 
const planId = 'plan123'; 

// Remove free plan from current member 
await memberstack.removePlan({ 
  planId 
});