@memberstack/dom

@memberstack/dom

The official Memberstack JavaScript SDK for authentication and membership management. Works with any JavaScript framework - React, Vue, Svelte, Next.js, Nuxt, SvelteKit, or vanilla JS.

Installation

npm install @memberstack/dom

Quick Start

import MemberstackDOM from '@memberstack/dom';

// Initialize with your public key (find it in your Memberstack dashboard)
const memberstack = MemberstackDOM.init({
  publicKey: 'pk_sb_...' // Use pk_sb_ for sandbox, pk_ for live
});

// Check if a user is logged in
const { data: member } = await memberstack.getCurrentMember();

if (member) {
  console.log('Logged in as:', member.auth.email);
} else {
  console.log('Not logged in');
}

Core Concepts

Authentication State

Listen for authentication changes reactively:

const { unsubscribe } = memberstack.onAuthChange((member) => {
  if (member) {
    // User is logged in
    console.log('Welcome,', member.auth.email);
    console.log('Plans:', member.planConnections);
  } else {
    // User is logged out
    console.log('Not authenticated');
  }
});

// Clean up when done (e.g., component unmount)
unsubscribe();

Prebuilt UI Modals

Launch beautiful, pre-styled authentication modals with a single function call:

// Open login modal
await memberstack.openModal('LOGIN');

// Open signup modal
await memberstack.openModal('SIGNUP');

// Open profile modal (for logged-in users)
await memberstack.openModal('PROFILE');

// Open forgot password modal
await memberstack.openModal('FORGOT_PASSWORD');

Modals are fully customizable through your Memberstack dashboard and support translations.

Programmatic Authentication

For custom UI, use the authentication methods directly:

// Sign up a new member
const { data } = await memberstack.signupMemberEmailPassword({
  email: 'user@example.com',
  password: 'securePassword123',
  customFields: {
    firstName: 'Jane',
    lastName: 'Doe'
  }
});

// Log in an existing member
const { data } = await memberstack.loginMemberEmailPassword({
  email: 'user@example.com',
  password: 'securePassword123'
});

// Log out
await memberstack.logout();

API Reference

Initialization

init(config)

Initialize the Memberstack SDK. Call this once when your app loads.

const memberstack = MemberstackDOM.init({
  publicKey: 'pk_...', // Required: Your public API key
  useCookies: true,    // Optional: Enable cookie-based sessions
  domain: 'https://...' // Optional: Custom API domain
});

Authentication Methods

Passwordless Authentication

OAuth / Social Login

Member Management

Password Reset

Plans & Payments

Prebuilt UI

Modal types: 'LOGIN', 'SIGNUP', 'PROFILE', 'FORGOT_PASSWORD', 'RESET_PASSWORD'

Data Tables

Content & App Info

Common Patterns

Protected Routes

// Check access before rendering protected content
const { data: member } = await memberstack.getCurrentMember();

if (!member) {
  window.location.href = '/login';
  return;
}

// Check for specific plan
const hasPro = member.planConnections.some(
  pc => pc.planId === 'pln_pro123' && pc.active
);

if (!hasPro) {
  window.location.href = '/upgrade';
  return;
}

Reactive Auth State (React Example)

import { useEffect, useState } from 'react';
import MemberstackDOM from '@memberstack/dom';

const memberstack = MemberstackDOM.init({ publicKey: 'pk_...' });

function useAuth() {
  const [member, setMember] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const { unsubscribe } = memberstack.onAuthChange((m) => {
      setMember(m);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  return { member, loading, memberstack };
}

Sign Up with Plan

// Sign up and assign a plan in one step
const { data } = await memberstack.signupMemberEmailPassword({
  email: 'user@example.com',
  password: 'securePassword123',
  plans: [{ planId: 'pln_free_tier' }]
});

// Or redirect to Stripe checkout for paid plans
await memberstack.purchasePlansWithCheckout({
  priceId: 'prc_monthly_pro',
  successUrl: '/welcome',
  cancelUrl: '/pricing'
});

Custom Fields

// Set custom fields during signup
await memberstack.signupMemberEmailPassword({
  email: 'user@example.com',
  password: 'password123',
  customFields: {
    firstName: 'Jane',
    company: 'Acme Inc',
    role: 'developer'
  }
});

// Update custom fields later
await memberstack.updateMember({
  customFields: {
    company: 'New Company'
  }
});

TypeScript Support

This package includes full TypeScript definitions. Import types directly:

import MemberstackDOM from '@memberstack/dom';
import type {
  Member,
  Plan,
  LoginMemberEmailPasswordPayload,
  SignupMemberEmailPasswordPayload
} from '@memberstack/dom';

Error Handling

All methods return promises that may reject on error:

try {
  const { data } = await memberstack.loginMemberEmailPassword({
    email: 'user@example.com',
    password: 'wrongpassword'
  });
} catch (error) {
  // Handle authentication error
  console.error('Login failed:', error.message);
}

Environment Setup

Store your public key in environment variables:

# .env
NEXT_PUBLIC_MEMBERSTACK_PUBLIC_KEY=pk_sb_xxx  # Next.js
VITE_MEMBERSTACK_PUBLIC_KEY=pk_sb_xxx         # Vite
REACT_APP_MEMBERSTACK_PUBLIC_KEY=pk_sb_xxx    # Create React App

const memberstack = MemberstackDOM.init({
  publicKey: process.env.NEXT_PUBLIC_MEMBERSTACK_PUBLIC_KEY
});

Sandbox vs Live

• Sandbox keys (pk_sb_...): Use for development and testing. Data is separate from production.
• Live keys (pk_...): Use for production. Real member data and Stripe transactions.

Resources

• Full Documentation
• Dashboard
• API Reference
• Data Tables Guide

Support

• Help Center
• Community
• Contact Support

License

MIT