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 links, 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

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 🙏