<!-- Source: https://developers.memberstack.com/dom-package/pre-built-modals -->
<!-- Markdown version of a Memberstack developer documentation page. Canonical HTML: https://developers.memberstack.com/dom-package/pre-built-modals -->

# 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.

```javascript
// 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.

```javascript
// 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.

```javascript
// 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:

```javascript
// 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?

Login and signup modals return a promise with type and data properties.

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.