Pre-built Modals
Memberstack provides professional, ready-to-use modals for login, signup, and profile management. These modals handle all the UI and authentication logic for you, just open them with a single line of code.
- Make sure you've initialized Memberstack with your public key
- Create your plans in the Memberstack dashboard (Plans)
- Check your site is running on HTTPS for live mode
Login Modal
The login modal provides a complete login interface with email/password, social login (if enabled), and a forgot password option.
// Basic usage
await memberstack.openModal("LOGIN");
// With configuration options
await memberstack.openModal("LOGIN", {
signup: {
plans: ["pln_xyz", "pln_abc"] // Your free plan IDs
}
});
// With return data handling
memberstack.openModal("LOGIN").then(({ data, type }) => {
console.log("Login event type:", type);
console.log("Returned data:", data);
// Close the modal
memberstack.hideModal();
});- Email and password login form
- Social login buttons (if enabled in Settings → Auth Providers)
- Forgot password link
- Optional signup link (for free plans)
- Error handling and validation
Signup Modal
The signup modal handles new member registration. You can connect it to specific free plans or let members sign up without a plan.
// Basic usage
await memberstack.openModal("SIGNUP");
// With free plans
await memberstack.openModal("SIGNUP", {
signup: {
plans: ["pln_xyz", "pln_abc"] // Your free plan IDs
}
});
// With data handling
memberstack.openModal("SIGNUP", {
signup: {
plans: ["pln_xyz"]
}
}).then(({ data, type }) => {
console.log("Signup event type:", type);
console.log("Returned data:", data);
// Close the modal and redirect
memberstack.hideModal();
window.location.href = "/welcome";
});- Only use free plan IDs in the signup options
- For paid plans, use
purchasePlansWithCheckoutinstead - Get your plan IDs from the Memberstack dashboard (Plans)
- Remember to close the modal after successful signup
Profile Modal
The profile modal lets members manage their account settings, subscription, and team membership all in one place.
// Basic usage
await memberstack.openModal("PROFILE");
// Open a specific tab: "profile", "plans", "security", "team", or "changePassword"
await memberstack.openModal("PROFILE", {
profile: { tab: "plans" }
});
// Example function for profile button
function openProfileModal() {
memberstack.openModal("PROFILE").then(() => {
// Modal has been closed
console.log("Profile modal closed");
});
}"profile", Profile information (name, email, custom fields)"plans", Plans & subscription management"security", Password & connected accounts"team", Team settings (if enabled)"changePassword", Change password form
- After login/signup success
- From account/profile menu
- When updating billing
- Managing team settings
Password Reset Modals
Memberstack provides two modals for password management:
// Open forgot password modal
await memberstack.openModal("FORGOT_PASSWORD");
// Open reset password modal (for password reset tokens)
await memberstack.openModal("RESET_PASSWORD");- FORGOT_PASSWORD, Sends a reset link to member's email
- RESET_PASSWORD, Where members set their new password
Preloading Modals (Performance)
The prebuilt modal UI (~630KB) is lazy-loaded from the Memberstack CDN the first time you call openModal(), so the first open can feel slightly delayed. Call memberstack.preloadModals() to fetch the UI ahead of time, so the first openModal() is instant. It returns Promise<void> that resolves once the UI is loaded.
// Preload in the background on app load
memberstack.preloadModals();
// Later, openModal() will be instant
loginButton.addEventListener("click", () => {
memberstack.openModal("LOGIN");
});
// Or preload on hover for just-in-time loading
loginButton.addEventListener("mouseenter", () => {
memberstack.preloadModals();
});
// You can also await it if you need the UI ready
await memberstack.preloadModals();
console.log("Modals ready!");- On app load if you know a modal will likely be opened
- On hover/focus of a login or signup button for just-in-time loading
- Safe to call multiple times, the UI is only fetched once
- Skip it entirely if your app never opens prebuilt modals, the ~630KB is never downloaded
Common Questions
No, you need to call memberstack.hideModal() to close them.
Basic styling can be configured in your Memberstack dashboard under Settings → Design.
Every openModal() call (for all modal types, not just login/signup) returns a promise that resolves with an OpenModalResult object holding optional type and data properties. Closing a modal programmatically with hideModal() resolves with { type: "CLOSED" }.
Yes for live mode, but HTTP works in sandbox mode for testing.
If the prebuilt modal script can't be loaded (e.g. blocked by ORB/CORS), openModal() retries twice, logs a [Memberstack] Modal failed to load. console warning, and then rejects (throws) — so wrap the call in try/catch. Check your browser's Network tab for blocked requests; this commonly happens on localhost. See the Troubleshooting section below.
Troubleshooting
Modals Not Appearing on Localhost
If openModal() rejects (throws) with a [Memberstack] Modal failed to load. warning and no modal appears, your browser is likely blocking the modal UI script due to cross-origin restrictions (ORB/CORS). This is a known issue when developing on http://localhost.
openModal('LOGIN')rejects (throws) after a brief retry — the promise never resolves- A
[Memberstack] Modal failed to load.warning appears in the console - Browser DevTools Network tab shows
net::ERR_BLOCKED_BY_ORBfor the modal CDN script
Pre-built modals load an external script from the Memberstack CDN. When running on http://localhost, browsers may block this script due to Origin Read Blocking (ORB). To test modals, deploy to a staging environment with HTTPS, use a local HTTPS proxy, or point window.__MS_PREBUILT_UI_URL__ at a locally-served copy of the modal script before calling openModal(). Always wrap openModal() in try/catch so a blocked script is handled gracefully.