# 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:
```shell
npm install @memberstack/dom
```
\- or -
```shell
yarn add @memberstack/dom
```
After installation, you'll need to import Memberstack in your main JavaScript file:
```javascript
import memberstackDOM from "@memberstack/dom";
```
> 💡 **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.
```javascript
const memberstack = memberstackDOM.init({
publicKey: "YOUR_PUBLIC_KEY", // Find this in your Memberstack dashboard
useCookies: true // Optional
});
```
> ⚠️ **Important:**
>
> - Your public key is in your Memberstack dashboard under "Settings > Application > Memberstack App ID"
> - For development, use the Test Mode key from Dev Tools (starts with `pk_sb_`). The key shown under Settings > Install Code is your **Live Mode** key.
> - 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:
```javascript
import { useEffect } from 'react';
import memberstackDOM from "@memberstack/dom";
function App() {
useEffect(() => {
const memberstack = memberstackDOM.init({
publicKey: "YOUR_PUBLIC_KEY",
useCookies: true
});
return () => {
// Cleanup if needed
};
}, []);
return
Your app content
;
}
```
### Svelte
Add Memberstack to your root layout:
```html
{@render children()}
```
Svelte 4 (Legacy)
```html
```
### SvelteKit
SvelteKit runs code on both server and client. Memberstack requires the browser, so you need a singleton pattern that guards against SSR.
Step 1: Create a Memberstack singleton module
```typescript
// src/lib/memberstack.ts
import memberstackDOM from '@memberstack/dom';
import { browser } from '$app/environment';
import { PUBLIC_MEMBERSTACK_PUBLIC_KEY } from '$env/static/public';
let memberstack: ReturnType | null = null;
export function getMemberstack() {
if (!browser) return null;
if (!memberstack) {
memberstack = memberstackDOM.init({
publicKey: PUBLIC_MEMBERSTACK_PUBLIC_KEY,
});
}
return memberstack;
}
```
Step 2: Use it in your root layout
```html
{@render children()}
```
> 💡 **Tip:**
>
> SvelteKit runs code on both server and client. Always guard Memberstack initialization with `import { browser } from '$app/environment'` to prevent SSR crashes. Use `$env/static/public` for your public key — not `import.meta.env` or `process.env`.
### Vue
Initialize in your main app component:
```html
Your app content
```
> 💡 **Tip:**
>
> - For Next.js 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:
```javascript
// Add this button to your signup page
// Add this JavaScript to handle the signup
async function handleSignup() {
try {
const member = await memberstack.signupMemberEmailPassword({
email: "user@example.com", // Get this from your form
password: "securepassword123", // Get this from your form
});
// Redirect after successful signup
window.location.href = "/dashboard";
} catch (error) {
// Show error message to user
alert("Signup failed. Please try again.");
}
}
```
> 💡 **Tip:**
>
> Memberstack also provides pre-built modals for signup and login - check out our [Modal Components](/dom-package/pre-built-modals) page to save development time!
> 💡 **Tip:**
>
> Some SDK responses include an `_internalUseOnly` field alongside `data`. This is used internally by Memberstack's pre-built UI components and can be safely ignored in your application code.
## 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
### Common Pitfall
If you see the error **"signups have been temporarily disabled"** during development, you're likely using your Live Mode key (`pk_...`) instead of your Test Mode key (`pk_sb_...`).
**Where to find your Test Mode key:**
1. Go to your Memberstack dashboard
2. Navigate to Dev Tools
3. Enable Test Mode
4. Copy the Test Mode public key (starts with `pk_sb_`)
### 💡 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:
- [Add login functionality](/dom-package/member-journey#login-options)
- [Add social login (Google, Facebook, etc.)](/dom-package/core-authentication#social-provider-flow)
- [Create members-only content](/dom-package/member-journey#protected-content)
Check out our other guides in the sidebar to learn more about these features!