Memberstack DOM (Front-end) Package Outline

This package simplifies integrating Memberstack into any browser-based application.  

1) Getting Started

If you are transitioning from Memberstack 1.0, read our guide on converting 1.0 front-end API code to 2.0 code for a smooth transition.

Install the Memberstack DOM package using either npm or yarn:

npm:

npm install @memberstack/dom

yarn:

yarn add @memberstack/dom

2) Initializing the Memberstack Instance

For Webflow users, define a memberstack variable:

const memberstack = window.$memberstackDom;

Import the Memberstack DOM package:

import memberstackDOM from "@memberstack/dom";

Initialize your Memberstack instance with your public key:

const memberstack = memberstackDOM.init({
 publicKey: "pk_...",
});

Now, you can start using Memberstack’s features and functionalities.

3) Interacting with Pre-built Modals

The DOM package seamlessly interacts with Memberstack’s pre-built modals for login, signup, and password recovery using the openModal and hideModal methods.

Open Modals

Logging In:

memberstack.openModal("LOGIN");

Login with Signup Link (Free Plans Only):

memberstack.openModal("LOGIN", {
 signup: {
 plans: ["freePlan1", "freePlan2"] // Replace with your free plan IDs
 }
});

Forgot Password:

memberstack.openModal("FORGOT_PASSWORD");

Reset Password (Token Modal):

memberstack.openModal("RESET_PASSWORD");

Profile:

memberstack.openModal("PROFILE");

Signup (Free Plans Only):

memberstack.openModal("SIGNUP", {
 signup: {
 plans: ["freePlan1", "freePlan2"] // Replace with your free plan IDs
 }
});

Hide/Close Modals

Modals do not automatically close. Use the hideModal function to close them programmatically:

async function openLoginModal() {
 await memberstack.openModal("LOGIN").then((data) => {
 // Access returned data upon successful login
 memberstack.hideModal();
 });
}

Return Data from Modals

The DOM package provides access to data returned from signup and login events. These events return a promise that resolves with an object containing type and data:

memberstack.openModal("LOGIN")
 .then(({ data, type }) => {
 console.log("Login event type:", type);
 console.log("Returned data:", data);
 });

4) Application

Retrieving App Data

The getApp function retrieves information about your application as an App object:

let appData = memberstack.getApp();

Response Structure:

{
 "data": {
 "id": "app_clbmbs0sd00ao0ugi8nlfdjb6",
 "name": "Import Demo",
 "mode": "sandbox",
 // ... other app data
 }
}

Retrieving a Specific Plan

The getPlan function retrieves information about a specific plan in your application:

let planData = memberstack.getPlan({
 planId: "pln_..."
});

Response Structure:

{
 data: {
 id: "pln_...",
 name: "Premium Plan",
 description: "Get access to all workouts",
 // ... other plan data
 }
}

Retrieving All Plans

The getPlans function retrieves information about all the plans in your application:

let allPlans = memberstack.getPlans();

Response Structure:

{
 data: [
 {
 id: "pln_1...",
 name: "Plan 1",
 description: "Description for Plan 1",
 // ... other plan data
 },
 // ... more plans
 ]
}

5) Authentication

With Email and Password

Signing Up a Member Using Email and Password (Free Plans Only)

The signupMemberEmailPassword method creates new member accounts using their email and password:

let signupResult = await memberstack.signupMemberEmailPassword({
 email: "john@doe.com",
 password: "123123123",
 // ... optional custom fields and meta data
 plans: [
 {
 planId: "pln_..." // Free plan ID only
 }
 ]
});

Logging In a Member Using Email and Password

The loginMemberEmailPassword method allows existing members to log in:

try {
 let loginResult = await memberstack.loginMemberEmailPassword({
 email: "john@doe.com",
 password: "123123123"
 });
} catch (error) {
 // Handle error here
}

With Passwordless

Signing Up a Member Using Passwordless Authentication

This is a two-step process:

1. Send Passwordless Email:

   try {
    let emailResult = await memberstack.sendMemberSignupPasswordlessEmail({
    email: "member@member.com"
    });
   } catch (error) {
    // Handle error here
   }
   

2. Sign Up the Member Without a Password:

   try {
    let signupResult = await memberstack.signupMemberPasswordless({
    passwordlessToken: "373822",
    email: "john@doe.com",
    // ... optional custom fields and meta data
    plans: [
    {
    planId: "pln_..." // Free plan ID only
    }
    ]
    });
   } catch (error) {
    // Handle error here
   }
   

Logging in a Member Using Passwordless Authentication

This is also a two-step process:

1. Send Passwordless Email:

   try {
    let emailResult = await memberstack.sendMemberLoginPasswordlessEmail({
    email: "member@member.com"
    });
   } catch (error) {
    // Handle error here
   }
   

2. Log In the Member Without a Password:

   try {
    let loginResult = await memberstack.loginMemberPasswordless({
    passwordlessToken: "373822",
    email: "john@doe.com"
    });
   } catch (error) {
    // Handle error here
   }
   

Setting a Password for a Member (Only used if the member has no password)

The setPassword function allows members to set a password for their account:

try {
 let passwordResult = await memberstack.setPassword({
 password: "supersecretpassword"
 });
} catch (error) {
 // Handle error here
}

With Auth Providers

Signing Up a Member with an Authentication Provider (Free Plans Only)

The signupWithProvider method creates new member accounts using a configured authentication provider:

try {
 let signupResult = await memberstack.signupWithProvider({
 provider: "facebook",
 // ... optional custom fields
 plans: [
 {
 planId: "pln_..." // Free plan ID only
 },
 ]
 });
} catch (error) {
 // Handle error here
}

Logging In a Member with an Authentication Provider

The loginWithProvider method allows members to log in using an authentication provider:

try {
 let loginResult = await memberstack.loginWithProvider({
 provider: "google"
 });
} catch (error) {
 // Handle error here
}

Linking an Authentication Provider

The connectProvider method links an authentication provider to a member’s account:

await memberstack.connectProvider({
 provider: "google"
});

Unlinking an Authentication Provider

The disconnectProvider method unlinks an authentication provider from a member’s account:

await memberstack.disconnectProvider({
 provider: "google"
});

Password Management

Send Reset Password Email

The sendMemberResetPasswordEmail method sends a password reset email:

await memberstack.sendMemberResetPasswordEmail({
 email: "john@doe.com",
});

Reset Password

The resetMemberPassword method allows members to reset their password:

await memberstack.resetMemberPassword({
 token: "...",
 newPassword: "..."
});

Logout

The logout method logs a member out of their account:

await memberstack.logout();

Auth Change Listeners

The onAuthChange method tracks changes in authentication status:

memberstack.onAuthChange(member => {
 if (member) {
 console.log("Member is authenticated. Member details:", member);
 } else {
 console.log("Member is not authenticated");
 }
});

To unsubscribe from updates:

const listener = memberstack.onAuthChange(data => {
 console.log("Authentication state
 changed. New data:", data);
});
// When updates are no longer needed
listener.unsubscribe();

6) Checkout & Billing

Purchase Plans with Checkout

The purchasePlansWithCheckout method initiates the purchase process for a specific plan:

await memberstack.purchasePlansWithCheckout({
 priceId: "prc_123", // required
 // ... optional parameters
});

Launch Stripe Customer Billing Portal

The launchStripeCustomerPortal method launches the Stripe customer billing portal:

await memberstack.launchStripeCustomerPortal({
 priceIds: ["prc_123"], // optional
 // ... optional parameters
});

7) Member Management

Get Current Member

The getCurrentMember method retrieves information about the currently logged-in member:

await memberstack.getCurrentMember();

Update Current Member Custom Fields

The updateMember method updates the custom fields of the current member:

await memberstack.updateMember({
 customFields: {
 country: "Canada"
 }
});

Update Current Member Email

The updateMemberAuth method updates the email of the current member:

await memberstack.updateMemberAuth({
 email: "johndoe+newemail@gmail.com"
});

Update Current Member Password

The updateMemberAuth method updates the password of the current member:

await memberstack.updateMemberAuth({
 oldPassword: "...",
 newPassword: "..."
});

Send Member Verification Email

The sendMemberVerificationEmail method sends or resends the member a verification email:

await memberstack.sendMemberVerificationEmail();

Get Current Member JSON

The getMemberJSON method retrieves the JSON object containing the current member’s information:

await memberstack.getMemberJSON();

Update Current Member JSON

The updateMemberJSON method updates the JSON data for the current member:

// Get current member's JSON
let memberJson = await memberstack.getMemberJSON();
// Modify or add new data
memberJson.avatarURL = "https://www.media.com/buckets/josh/avatar.jpg";
// Remove data
delete memberJson.skills;
// Update member's JSON
await memberstack.updateMemberJSON({json: memberJson});

Add Logged-in Member Free Plan

The addPlan method adds a free plan to the current member:

await memberstack.addPlan({
 planId: "pln_abc"
});

Remove Logged-in Member Free Plan

The removePlan method removes a free plan from the current member:

await memberstack.removePlan({
 planId: "pln_abc"
});

8) Further Resources

• Memberstack Developers Documentation: https://developers.memberstack.com/

This documentation provides a comprehensive overview of the Memberstack DOM package. Remember to refer to the Memberstack Developer Documentation and Support resources for additional information, examples, and assistance.