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!

Before You Start

Make sure you've initialized Memberstack with your public key
Create your plans in the Memberstack dashboard
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();
});

What's Included

Email and password login form
Social login buttons (if enabled in dashboard)
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";
});

Important Notes

Only use free plan IDs in the signup options
For paid plans, use purchasePlansWithCheckout instead
Get your plan IDs from the Memberstack dashboard
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 specific tab
await memberstack.openModal("PROFILE", {
    defaultTab: "account"  // or "billing", "team", etc.
});

// Example function for profile button
function openProfileModal() {
    memberstack.openModal("PROFILE").then(() => {
        // Modal has been closed
        console.log("Profile modal closed");
    });
}

Available Tabs

"account" - Profile information
"billing" - Subscription management
"team" - Team settings (if enabled)
"security" - Password and 2FA

When to Show It

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

Common Questions

Do modals close automatically?

No, you need to call memberstack.hideModal() to close them.

Can I style the modals?

Basic styling can be configured in your Memberstack dashboard.

What data do modals return?

Do I need HTTPS?

Yes for live mode, but HTTP works in sandbox mode for testing.

Why does openModal() return an empty object?

If openModal() resolves with {} and no modal appears, the modal UI script likely failed to load. Check your browser's Network tab for blocked requests. This commonly happens on localhost due to cross-origin restrictions. See the Troubleshooting section below.

Troubleshooting

Modals Not Appearing on Localhost

If openModal() resolves with an empty object {} 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.

Symptoms

openModal('LOGIN') resolves with {}
No error thrown, no console warning
Browser DevTools Network tab shows net::ERR_BLOCKED_BY_ORB for the modal CDN script

⚠️ Important:

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 or use a local HTTPS proxy.

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 →