Skip to main content
Memberstack Docs
Dashboard

Memberstack Playground

An interactive environment to test Memberstack DOM package features with your public key. Try out different methods and see how they work in real-time.

/dom-package/playground.md
Initialize MemberstackmemberstackDOM.init()

Enter your public key to initialize the Memberstack DOM package. This will enable the “Run Code” buttons. (Test mode keys start with pk_sb_.)

Audience: DOM SDK (JavaScript) Only

This playground targets developers using the @memberstack/dom package (or Webflow via window.$memberstackDom). If you’re building with Data Attributes (Webflow/WordPress data-attribute integration), refer to the Data Attribute documentation instead.

These examples use programmatic methods, not data-attributes.

Using AI Tools? Try the MCP Server

Connect Claude, Cursor, or other AI tools directly to your Memberstack account. Manage members, plans, and data tables using natural language.

Memberstack DOM Package, AI Referencellms-full.txt
Comprehensive documentation for AI systems: complete API reference with TypeScript definitions, error handling patterns and payload types, plus common implementation patterns and best practices.
Open

Authentication

This section covers user authentication, including signup, login, logout, and handling authentication state changes.

Signup Member (Email/Password)

Signs up a new member using email and password.

signupMemberEmailPassword javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Login Member (Email/Password)

Logs in an existing member with email and password.

loginMemberEmailPassword javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Logout Member

Logs out the currently authenticated member.

logout javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Signup with Provider

Initiates the signup process using a third-party provider (e.g., Google, Facebook). Providers include: Google, Facebook, Microsoft, GitHub, LinkedIn, Spotify, and Dribbble. Custom OIDC providers configured in your Memberstack dashboard (Dev Tools → Custom SSO) are also accepted (pass the provider key from the dashboard).

This method opens a popup window for the provider’s sign-in flow, it does not redirect the current page. The returned promise resolves with { data: { member, tokens, redirect } } after the user finishes in the popup, and the member’s session is stored for you automatically. Because it opens a popup, call it from a direct user action (e.g. a click) to avoid popup blockers.

signupWithProvider javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Login with Provider

Initiates the login process using a third-party provider.

This method opens a popup window for the provider’s sign-in flow, it does not redirect the current page. The returned promise resolves with { data: { member, tokens, redirect } } after the user finishes in the popup, and the member’s session is stored for you automatically. Because it opens a popup, call it from a direct user action (e.g. a click) to avoid popup blockers.

loginWithProvider javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Send Passwordless Login Email

Sends a passwordless login email to the specified email address.

sendMemberLoginPasswordlessEmail javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Send Passwordless Signup Email

Sends a passwordless signup email to the specified email address.

sendMemberSignupPasswordlessEmail javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Login with Passwordless Token

Logs in a member using a passwordless token received via email.

loginMemberPasswordless javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Signup with Passwordless Token

Signs up a new member using a passwordless token received via email.

signupMemberPasswordless javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

On Authentication Change

Listens for changes in the member’s authentication state (login, logout, signup). The provided callback function is called whenever the authentication state changes, and receives the updated member object (or null if logged out).

onAuthChange javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Retrieves the current member’s authentication token. Returns the token string if the member is logged in, or undefined otherwise.

getMemberCookie javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Send Verification Email

Sends an email verification email to the currently logged-in member.

sendMemberVerificationEmail javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Pre-built Modals

This section demonstrates how to use Memberstack’s pre-built modals for common authentication and profile management actions.

Modals do not close automatically

The openModal method takes the modal type as the first argument and an optional object of parameters as the second. It returns a Promise that resolves when the user has interacted with the modal. You need to call memberstack.hideModal() to close the modal after the Promise resolves.

  • Available modal types: LOGIN, SIGNUP, FORGOT_PASSWORD, RESET_PASSWORD, PROFILE
  • Some modals accept parameters, e.g. the SIGNUP modal can take a planId to pre-select a plan (free plans only).

Open Modal

Opens a pre-built Memberstack modal.

openModal javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Hide Modal

Closes the currently open Memberstack modal. The hideModal method does not take any arguments.

hideModal javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Profile Management

This section covers methods for managing the current member’s profile, including updating custom fields, and changing passwords.

Get Current Member

Retrieves the currently logged-in member’s data. The method takes an optional object with a useCache property, set to true to return cached member data if available, or false (default) to always fetch the latest from the server.

getCurrentMember javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Update Member

Updates the current member’s custom fields. The updateMember method takes an object with a customFields property containing the fields to update.

updateMember javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Delete Member

Deletes the current member’s account and cancels any active subscriptions. When a member’s account is deleted they are immediately logged out, their account is permanently deleted, active recurring subscriptions are cancelled in Stripe, and their Stripe customer profile remains intact.

This action cannot be undone

Once an account is deleted, it cannot be recovered.

deleteMember javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Update Member Authentication

Updates the current member’s authentication details (email, password). The updateMemberAuth method takes an object with optional email, oldPassword (required if changing the password), and newPassword properties.

updateMemberAuth javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Update Member JSON

Stores or updates arbitrary JSON data for the current member, perfect for user preferences, app settings, progress tracking, and custom metadata.

This completely replaces existing JSON data

This method does NOT merge. To preserve existing data, fetch the current JSON first, modify it, then update.

updateMemberJSON javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Get Member JSON

Retrieves arbitrary JSON data stored for the current member. The response is shaped as { data }, where data is the stored JSON object directly (there is no nested .json property). data is null or an empty object {} if no data exists.

getMemberJSON javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Send Password Reset Email

Sends a password reset email to the specified email address. The method returns a generic success message for security reasons, regardless of whether the email exists in the system.

sendMemberResetPasswordEmail javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Reset Member Password

Resets a member’s password using a reset token sent to a member.

resetMemberPassword javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Connect Provider

Connects a third-party provider (e.g., Google, Facebook) to the current member’s account.

connectProvider javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Disconnect Provider

Disconnects a third-party provider from the current member’s account.

disconnectProvider javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Update Member Profile Image

Updates the current member’s profile image. The method takes a file object from a file input element and uploads it to update the member’s profile image.

updateMemberProfileImage javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Plan Management

This section covers methods for managing the current member’s plans, including adding, removing, and purchasing plans.

Get Plan

Retrieves information about a specific plan. The method takes a planId parameter and returns the plan details if found.

getPlan javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Get Plans

Retrieves a list of all available plans. The method returns an array of plan objects, each containing details such as ID, name, description, status, and associated prices.

getPlans javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Add Plan

Adds a plan to the current member’s account. The method takes a planId parameter and adds the specified plan to the member’s account if they don’t already have it.

addPlan javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Remove Plan

Removes a plan from the current member’s account. The method takes a planId parameter and removes the specified plan from the member’s account if they have it.

removePlan javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Purchase Plans with Checkout

Initiates a Stripe Checkout session to purchase a plan (via its priceId).

purchasePlansWithCheckout javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Launch Stripe Customer Portal

Launches the Stripe Customer Portal for the current member to manage their subscriptions and payment methods. You can read more about the Stripe Customer Portal configuration here.

launchStripeCustomerPortal javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK
Tips for Testing Plans
  • For paid plans, use test card 4242 4242 4242 4242
  • Free plans use planId, paid plans use priceId
  • Check the Memberstack dashboard (Plans) for your actual IDs

Data Tables

This section demonstrates Data Tables functionality for storing and managing structured data with powerful querying capabilities, relationships, and access control.

Rate Limits for Data Tables

Reads apply to: GET /v1/data-tables, GET /v1/data-tables/:tableKey, POST /v1/data-records/query, GET /v1/data-records

  • Global: 200 requests per 30 seconds per IP
  • Reads: 25 requests per second per IP (GET/query operations)
  • Creates: 10 requests per minute per IP (POST operations)
  • Writes: 30 requests per minute per IP (PUT/DELETE operations)
Feature Flag

If DISABLE_DATA_TABLES is truthy on the server, all routes return 503 with message: “Data table feature is temporarilly offline.”

Tips for Testing Data Tables
  • Create test tables in your Memberstack dashboard (Data Tables) first
  • Use realistic test data for better understanding
  • Check access rules, some operations may require authentication
  • Use table keys (not IDs) in your requests
  • Record IDs start with rec_ prefix

Get Data Tables

Retrieve all available data tables and their schemas.

getDataTables javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Get Data Table

Retrieve detailed information about a specific data table by its key (table).

getDataTable javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Create Data Record

Create a new record in a data table. Takes a table key and a data object containing the field values for the new record.

createDataRecord javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Get Data Record

Retrieve a specific record by ID from a data table. Takes a table key and a recordId.

getDataRecord javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Update Data Record

Update specific fields in an existing data record. Only the fields you specify will be changed.

updateDataRecord javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Delete Data Record

Permanently delete a specific record from a data table. Deletion cannot be undone.

deleteDataRecord javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Query Data Records

Perform advanced queries with filtering, sorting, pagination, and includes. Pass a flat query object (where / include / select / orderBy / take / skip / after / _count), the SDK wraps it as findMany automatically.

queryDataRecords javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Other Methods

This section covers miscellaneous methods and utilities.

Get Secure Content (Hosted Content)

Retrieves secure content associated with the current member based on a hosted content ID.

getSecureContent javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

Set Password

Sets a new password for the current member. The method takes a password parameter and updates the member’s password.

setPassword javascript
Console
Press Run to execute this snippet.
Runs against a sandboxed mock SDK

FAQs

Here are some common questions and answers about using Memberstack in your projects:

You can find your Memberstack public key in your Memberstack dashboard. Go to your app’s dev tools page, and you’ll find the public key under the “API Keys” section. It usually starts with pk_.

Custom fields allow you to store additional information about your members, such as their preferences, profile details, or any other data relevant to your application. You can define custom fields in the Memberstack dashboard under Members > Custom Fields and then use the Memberstack API (e.g., updateMember, signupMemberEmailPassword) to set and update their values.

To integrate Memberstack, you first need to include the Memberstack DOM package in your website’s code. Since the DOM package is designed for use with package managers, you can install it using npm or yarn: npm install @memberstack/dom or yarn add @memberstack/dom. Then, import the package into your code and initialize the Memberstack object with your public key using Memberstack.init({ publicKey: "YOUR_PUBLIC_KEY" }). After that, you can use the various Memberstack methods to add authentication, manage members, and control access to content.

While team methods exist within the DOM package, they are not officially documented or supported for direct implementation. For the best experience with team functionality, we strongly recommend using Memberstack’s pre-built profile modal instead of attempting to implement these methods yourself.

Memberstack supports several authentication methods, including:

  • Email/Password: Members sign up and log in using their email address and a password.
  • Passwordless: Members log in by receiving a one-time code via email.
  • Social Login: Members can authenticate using their existing accounts with providers like Google, Facebook, Microsoft, GitHub, LinkedIn, Spotify, and Dribbble. Custom OIDC providers configured in your dashboard (Dev Tools → Custom SSO) are also supported.

Memberstack API methods return promises that either resolve with the requested data or reject with an error object. You should always use try...catch blocks to handle potential errors. Memberstack errors are plain objects shaped as { code, message, statusCode?, category?, suggestions?, docsUrl? }. The primary field for programmatic handling is code (a kebab-case string, e.g. "invalid-credentials"); message is a human-readable description, statusCode is the HTTP status code, category groups related errors, suggestions offers actionable fixes, and docsUrl links to documentation for that error.

You can define redirect URLs in the Memberstack dashboard under Plans > Default Settings > Redirects for different actions like login, signup, and logout (these apply to all members and can be overridden per plan). Some methods also accept redirect URLs directly: purchasePlansWithCheckout accepts successUrl and cancelUrl, and launchStripeCustomerPortal accepts a returnUrl. (Note that addPlan takes only a planId and does not accept a redirect URL.)

Memberstack works well with static site generators like SvelteKit, Next.js, Gatsby, etc. You can use the Memberstack DOM package on the client-side to handle authentication and member management. For dynamic content or server-side interactions, you can use serverless functions or a backend API to communicate with Memberstack’s API.

Yes, Memberstack is designed to work seamlessly with SPAs. The Memberstack DOM package provides methods for handling authentication, managing members, and controlling content access within your SPA.

You can customize the appearance of Memberstack’s pre-built modals using CSS. Memberstack provides CSS classes that you can target to override the default styles. You can also use JavaScript to add or remove classes and modify the modal’s behavior.

Additional Tips
  • Use test mode keys (starting with pk_sb_) for development
  • Remember to handle errors in your code
  • Check the console for additional debugging information
  • Replace placeholder IDs with your actual plan and price IDs
Test Accounts
  • Create test accounts with fake email addresses (e.g., test@example.com)
  • Use secure but memorable passwords for testing
  • Test mode allows up to 50 test members
  • Test members can be deleted to free up space
Next steps
Quick Start
Install, initialize, and your first login
Core Authentication
Passwordless, social providers, and sessions
Member Journey
Signup, profiles, and gated content
Plan Management
Plans, checkout, and the Stripe portal
Need help?
Can't find what you're looking for? Our team is here to help.
Join the Slack communityFind an expert
Previous
Advanced Integration