DOM Package Quick Start Guide

Welcome to Memberstack! This guide will help you add authentication and membership features to your website. Don't worry if you're new to coding - we'll walk you through each step.

By the end of this guide, you'll have:

  • Memberstack installed on your website
  • A working signup and login system
  • The ability to check if users are logged in

Installation & Setup

First, you'll need to install the Memberstack package from a package manager like npm or yarn. Open your terminal in your project folder and run one of these commands:

- or -

After installation, you'll need to import Memberstack in your main JavaScript file:

💡 Tip:

If you're using a framework like React or Vue, this usually goes in your main app file (like App.js or main.js).

Basic Configuration

Next, you'll need to initialize Memberstack with your credentials. You can find these in your Memberstack dashboard.

⚠️ Important:
  • Your public key is in your Memberstack dashboard under "Settings > Application > Memberstack App ID"
  • We recommend enabling cookies for the best user experience

Framework Integration

If you're using a modern framework, here's how to integrate Memberstack properly with your application:

React

Initialize Memberstack in your main component:

Svelte

Add Memberstack to your root layout:

Vue

Initialize in your main app component:

💡 Tip:
  • For Next.js, SvelteKit, or Nuxt, ensure initialization happens on the client side only
  • The initialization should be in a root-level component that persists across page changes

First Authentication Flow

Let's create your first signup flow! This example shows how to add a simple signup button and handle the signup process:

💡 Tip:

Memberstack also provides pre-built modals for signup and login - check out our Modal Components page to save development time!

Test Mode vs Live Mode

Memberstack provides two operating modes: Test/Sandbox Mode and Live Mode. Understanding the difference is crucial for development and deployment.

Test Mode

  • Public key starts with pk_sb_
  • Limited to 50 test members
  • Test members can be deleted to free up space
  • Use Stripe test cards for payments:
    • Success: 4242 4242 4242 4242
    • Decline: 4000 0000 0000 0002
  • Perfect for development and testing

Live Mode

  • Public key starts with pk_
  • No member limits
  • Processes real payments
  • Use for production environment

⚠️ Important Considerations

  • Always start development in Test Mode
  • When switching to Live Mode:
    • Update your public key in all environments
    • Check automation tools (Zapier, Make, etc.) for the old test mode key
    • Update any environment variables or configuration files
    • Test the entire user flow again with the live key
  • Keep test and live mode keys separate - never mix them

💡 Development Tips

  • Create a separate test environment with its own configuration
  • Use environment variables to manage different keys
  • Document which integrations need key updates when switching modes
  • Create a deployment checklist for mode switching

What's Next?

Now that you have the basics set up, you might want to:

Check out our other guides in the sidebar to learn more about these features!

Need Help?

Having trouble getting your login working? We're here to help!

Join our Slack Community → Find a Memberstack Expert → Search the Help Center →

Thank you for choosing Memberstack 🙏