Core Authentication
This guide covers all authentication methods available in the Memberstack DOM package. The examples use vanilla JavaScript and can be adapted to any framework.
Before You Start
Complete the Quick Start Guide and initialize Memberstack in your project with your public key before proceeding.
Email/Password Flow
The traditional email and password authentication method provides a familiar login experience. This example includes loading states and error handling for a better user experience.
Best Practices
- Always show loading states during authentication
- Provide clear error messages for validation failures
- Implement proper client-side email validation
- Include password strength indicators
Passwordless Flow
Passwordless authentication provides a secure and user-friendly alternative to traditional passwords. Users receive a secure link via email that automatically logs them in. You can configure the passwordless email template in the Memberstack dashboard at "Settings" > "Emails".
Implementation Tips
- Implement rate limiting for passwordless email requests
- Show clear instructions after the link is sent
- Handle link expiration gracefully
- Provide a way to request a new link if needed
- Consider adding a backup login method
Logout & Session Management
In this section, you'll learn how to handle user sessions, implement a logout function, and manage session expiration.
Logout Function
Implementing a logout function is essential for user privacy and security. This example shows how to handle logout and clear the session:
Session Management
Proper session management is crucial for maintaining security and user experience. This guide will walk you through implementing robust session handling with Memberstack.
1. Basic Setup
First, configure Memberstack with session-specific options during initialization:
Configuration Options
Memberstack supports both localStorage (default) and cookie-based storage for session management. Choose based on your specific needs:
- useCookies (optional):
- Set to true to use cookies instead of localStorage
- Use for cross-tab synchronization needs
- Consider for multi-subdomain applications
- setCookieOnRootDomain (optional): Only relevant when useCookies is true
- sessionDurationDays (optional): Controls session length before re-auth is needed
2. Authentication State Management
Implement a listener to track authentication state changes and update your UI accordingly:
3. Session Token Handling
Add these helper functions to work with session tokens:
4. Session Refresh
Implement session refresh functionality to extend user sessions when needed:
5. Session Expiration Handling
Add proactive session expiration checking to improve user experience:
Common Issues & Solutions
- Need cross-tab session sync? Consider enabling useCookies
- Sessions expiring too quickly? Adjust sessionDurationDays
- Working with subdomains? Review your domain configuration
Best Practices
- Always use onAuthChange for state management
- Implement proactive session refresh
- Handle expired sessions gracefully
Next Steps
Now that you've implemented authentication, consider exploring:
Need Help?
Having trouble getting your login working? We're here to help!
Social Provider Flow
Social authentication allows users to log in using their existing accounts from supported providers. This can significantly reduce friction in the signup and login process.
Provider Setup Required
Before implementing social login, configure your providers in the Memberstack dashboard:
Supported Providers
Implementation Tips