Audience: DOM SDK (JavaScript) Only

This guide targets developers using the @memberstack/dom package (or Webflow via window.$memberstackDom). If you are building with Data Attributes (Webflow/WordPress data-attribute integration), use the Data Attribute-specific documentation instead.

Note: The DOM SDK exposes programmatic methods; there are no data-attributes covered here.

Member Journey

Welcome! This guide will show you how to create a complete membership experience using Memberstack. We'll walk through everything step-by-step, from letting people sign up to managing their accounts.

Signup Options

Memberstack provides multiple ways for users to sign up: email/password registration, passwordless signup, and social provider authentication. For complete details on implementing each authentication method, see the Core Authentication guide.

Here's an example of implementing email/password signup with custom fields:

Available Signup Methods

  • Email/password registration
  • Passwordless signup
  • Social providers (Google, GitHub, etc.)
  • All methods support custom fields for additional member data

For more authentication information, check the Core Authentication guide.

Login Options

Memberstack supports multiple authentication methods to give your users flexibility in how they log in. Each method can be implemented independently or combined to provide multiple login options.

Available Login Methods

Email/Password Login

Traditional authentication with email and password credentials.

Passwordless Login

Secure authentication via email and 6-digit code, no password required.

Social Provider Login

Authentication through social platforms like Google, GitHub, and others.

For detailed instructions on implementing each login method, visit the Core Authentication guide.

Here's an example implementing email/password and passwordless login:

💡 Pro Tips

  • Consider offering both login methods to give users choice
  • Add clear instructions for passwordless login
  • Make error messages helpful and friendly
  • Add a loading state while authentication happens

Profile Management

Allow members to manage their profile information using Memberstack's custom fields. Note that while Memberstack can store URLs to files and images, you'll need to use a separate file storage service (like AWS S3, Cloudinary, etc.) to actually store the files themselves.

Important Note About Files

Memberstack doesn't handle file storage directly. For profile pictures or other files:

  • Upload files to your chosen storage service
  • Store the resulting URL in a Memberstack custom field
  • Use the stored URL to display the image or file in your UI

Here's an example of managing profile information:

Custom Fields Tips

  • All custom fields are stored as strings
  • Convert strings to other types as needed (e.g., parseInt for numbers)
  • For objects or arrays, use JSON.parse() on the stored string
  • Access custom fields through the member object
  • Updates are immediately available across your site

String Conversion Examples

Member JSON

Member JSON is a flexible storage system that allows you to associate custom data objects with each member in your app. Unlike custom fields which are predefined in your Memberstack dashboard, Member JSON allows you to store any valid JSON object without prior configuration.

What Can You Store?

  • User preferences (theme, language, notifications)
  • App-specific settings and configurations
  • Custom metadata and tracking information
  • Application state that persists across sessions
  • Any structured data that doesn't fit into standard member fields

Getting Member JSON Data

Use getMemberJSON() to retrieve the stored JSON data for the current member.

Updating Member JSON Data

Use updateMemberJSON() to store new JSON data. Note that this method completely replaces the existing JSON data.

⚠️ Important Note

updateMemberJSON completely replaces the existing JSON data - it does not merge with existing data. To preserve existing data while updating specific fields, first fetch the current JSON, modify it, then update.

Common Use Cases

User Preferences Storage

Store UI preferences that persist across sessions:

Progress Tracking and Onboarding

Store user progress and onboarding state:

Feature Flags and A/B Testing

Track feature access and testing participation:

Best Practices

1. Structure Your Data

Organize your JSON with clear, consistent naming and logical grouping.

2. Handle Missing Data Gracefully

Always check for data existence and provide defaults: const theme = preferences?.theme || 'light'

3. Merge Don't Replace

Preserve existing data when updating specific fields by fetching current data first.

4. Keep It Lean

Avoid storing large amounts of data or frequently changing information.

Integration with React

The React package provides a convenient hook that wraps the member JSON functionality:

Limitations and Security

  • Member JSON is tied to the authenticated member and cannot be accessed by other members
  • Data should not contain sensitive information like passwords or API keys
  • Keep objects reasonably sized for performance
  • Subject to standard API rate limits (200 requests per 30 seconds per IP)
  • Supports all standard JSON data types but not JavaScript-specific types
  • Both methods require an authenticated member session

Data Tables

Data Tables provide a powerful system for storing and managing structured data with advanced querying capabilities, relationships, and access control. Unlike Member JSON which stores unstructured data per member, Data Tables are designed for structured, relational data that can be shared across your application.

What Can You Build?

  • Content management systems (articles, posts, comments)
  • E-commerce catalogs (products, categories, reviews)
  • Directory systems (listings, profiles, contacts)
  • Project management tools (tasks, projects, teams)
  • Custom data structures with complex relationships

⚠️ Rate Limits

Global: 200 requests per 30 seconds per IP

Reads: 25 requests per second per IP

Creates: 10 requests per minute per IP

Writes: 30 requests per minute per IP

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

Feature Flag

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

Table Management

First, you'll need to understand what tables are available and their structure.

List All Tables

Get all available tables and their schemas:

Get Single Table

Retrieve detailed information about a specific table:

Record Operations

Perform CRUD operations on individual records within your tables.

Create Records

Add new records to your tables:

Get Records

Retrieve individual records by ID:

Update Records

Modify existing records with partial updates:

Delete Records

Remove records from your tables:

Advanced Querying

Use powerful query capabilities to filter, sort, and paginate through your data.

Basic Queries

Filter and sort records with simple conditions:

Complex Filtering

Use advanced operators and compound conditions:

Pagination

Handle large datasets with cursor-based pagination:

Count Queries

Get total counts without retrieving all records:

Relationships and Includes

Work with related data across tables using includes and relationship fields.

Simple Relationships

Include related records in your queries:

Relationship Counts

Get counts of related records without loading them:

Many-to-many Includes (findUnique)

Use findUnique to include many relations with pagination:

In findMany, includes support only simple relations (REFERENCE, MEMBER_REFERENCE). Use findUnique for many relations (REFERENCE_MANY, MEMBER_REFERENCE_MANY). Nested includes are not supported.

Managing Relationships

Connect and disconnect related records:

Access Control

Data Tables enforce table-level access rules that determine who can create, read, update, and delete records.

Access Rule Types

  • Create Rule: Who can create new records in this table
  • Read Rule: Who can view records (filters applied automatically)
  • Update Rule: Who can modify existing records
  • Delete Rule: Who can remove records from the table

Best Practices

1. Optimize Your Queries

  • Use specific filters to reduce data transfer
  • Implement pagination for large datasets
  • Use count queries when you only need totals
  • Prefer cursor-based pagination over skip/offset

2. Handle Relationships Efficiently

  • Use includes judiciously - only fetch what you need
  • Use relationship counts instead of loading full collections
  • Consider separate queries for complex relationship data

3. Respect Rate Limits

  • Batch operations when possible
  • Cache frequently accessed data
  • Implement exponential backoff for retries
  • Use count queries to avoid unnecessary data fetching

4. Error Handling

  • Always handle access control errors (403)
  • Implement proper validation for required fields
  • Handle network errors and retry appropriately

Important Limitations

  • Many-to-many includes (REFERENCE_MANY, MEMBER_REFERENCE_MANY) only work with findUnique
  • Deep nested includes are not supported
  • Access rules are enforced automatically and cannot be overridden
  • Rate limits vary by operation type - plan your usage accordingly
  • Field uniqueness constraints are not returned in table schemas
  • BigInt values are converted to Numbers in responses
  • GET /v1/data-records supports only: tableKey, createdAfter, createdBefore, sortBy, sortDirection, limit, after. Use queryDataRecords for field-level filters and includes.

Protected Content

There are several ways to protect content with Memberstack. The simplest approach is using getCurrentMember to securely display member-specific content. For page-level protection, the implementation will vary based on your framework.

Simple Content Protection

The most straightforward way to show protected content is to use getCurrentMember and render based on the returned data:

Framework-Specific Page Protection

Important Note: While Memberstack works with any framework, we recommend consulting framework-specific resources or a Memberstack Expert for detailed implementation guidance in Sveltekit, Next.js, Vue/Nuxt, etc.

SvelteKit

Here's how to protect routes in SvelteKit using server-side hooks. This approach is secure and efficient since authentication checks happen before any page data is loaded.

Implementation Files

You'll need to set up these files:

  • src/hooks.server.ts - Main authentication logic
  • src/app.d.ts - TypeScript definitions (optional)
  • src/routes/+layout.server.ts - Share auth data with all routes

Here's the main authentication hook implementation:

TypeScript Support

Add these types to src/app.d.ts for better TypeScript support:

Accessing Member Data in Routes

After setting up the hook, you can access the member data in any server load function:

Key Benefits

  • Centralized authentication logic in one place
  • Server-side protection for better security
  • Early redirects before page data is loaded
  • TypeScript support for better development experience
  • Easy to maintain and update protected routes list

Next.js

Next.js offers two approaches to routing: the App Router (modern) and Pages Router (legacy). Here's how to implement authentication in both:

Implementation Files

You'll need to set up these files:

  • middleware.ts - Global authentication middleware (App Router)
  • types/next-auth.d.ts - TypeScript definitions (optional)
  • components/AuthProvider.tsx - Auth context for client components

Here's how to protect routes using the modern App Router approach:

TypeScript Support

Add these types for better TypeScript support:

For older projects using the Pages Router, use getServerSideProps:

Important Notes

  • Always serialize member data in getServerSideProps using JSON.parse(JSON.stringify())
  • Use middleware for App Router and getServerSideProps for Pages Router
  • Remember to handle both client and server-side authentication states
  • Consider using an AuthProvider component for sharing auth state

Here's a helpful AuthProvider component for managing auth state:

App Router Benefits

  • Middleware runs before page loads
  • Better performance with streaming
  • Server Components by default
  • Simpler data fetching

Pages Router Benefits

  • Simpler mental model
  • More examples available
  • Better backward compatibility
  • Stable API surface

Vue/Nuxt

For Vue and Nuxt applications, authentication is handled through middleware and composables:

Implement the authentication middleware:

Implementation Notes

  • Store auth state in a composable for reusability
  • Use middleware to protect routes automatically
  • Remember redirect paths for better UX
  • Handle auth errors gracefully

Best Practices

  • Use getCurrentMember for simple content protection - it's secure and easy to implement
  • Implement proper loading states while checking member status
  • Consider framework-specific protection for entire pages
  • Always validate access client-side AND server-side for sensitive operations
  • Show clear messages when access is denied

Password Management

Help members change their passwords securely. This code creates a password update form with strength checking and helpful feedback.

Making Passwords Secure

  • Require the current password for security
  • Check that new passwords match
  • Show password strength in real-time
  • Provide clear feedback on requirements
  • Confirm successful updates

What's Next?

Now that you've set up the basics, you might want to explore:

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 🙏