@cgi-central/amember-next-integration

React components for embedding aMember Next widgets into third-party applications (Next.js, Vite, CRA, etc.).

Installation

pnpm add @cgi-central/amember-next-integration
# or
npm install @cgi-central/amember-next-integration

Quick Start

import { AmemberNext, useAmember } from '@cgi-central/amember-next-integration';

function App() {
    return (
        <AmemberNext.Provider url="https://example.com/amember">
            <AmemberNext.RequireLoginGate />
            <AmemberNext.SignupForm code="default" />
            <AmemberNext.ActiveSubscriptions />
            <UserInfo />
        </AmemberNext.Provider>
    );
}

function UserInfo() {
    const { ready, user, logout } = useAmember();

    if (!ready) return <p>Loading aMember...</p>;
    if (!user) return <p>Not logged in</p>;

    return (
        <div>
            <p>Welcome, {user.name_f}!</p>
            <button onClick={logout}>Logout</button>
        </div>
    );
}

How It Works

1. <AmemberNext.Provider> injects the aMember loader.js script which loads the full aMember React frontend in embed mode
2. Each <AmemberNext.*> component renders a <div data-amwidget="..."> placeholder
3. aMember's portal system detects these divs and renders the real widgets into them
4. useAmember() hook provides access to the aMember API (queries, mutations, user state)

Components

All components are accessed via the AmemberNext namespace object.

Provider

| Component | Description | |---|---| | AmemberNext.Provider | Required. Wraps your app, loads aMember frontend. Props: url (aMember root URL) |

Forms

| Component | Props | Description | |---|---|---| | AmemberNext.SignupForm | code? | Signup/order form | | AmemberNext.ProfileForm | code? | User profile edit form | | AmemberNext.LoginForm | | Login form widget | | AmemberNext.BuyNow | code? | Buy-now button |

Auth

| Component | Description | |---|---| | AmemberNext.RequireLoginGate | Enables window.amember.requireLogin() — shows login popup when needed |

Member Area

| Component | Description | |---|---| | AmemberNext.ActiveSubscriptions | Active subscription list | | AmemberNext.ActiveResources | Active resources / downloads | | AmemberNext.MemberLinks | Custom member links | | AmemberNext.PaymentHistory | Payment history table | | AmemberNext.InvoiceHistory | Invoice history table | | AmemberNext.PersonalData | Personal data display/export | | AmemberNext.Notifications | User notifications | | AmemberNext.Credits | Credit balance display | | AmemberNext.TwoFactorAuthSettings | 2FA setup widget | | AmemberNext.Grid | Generic data grid | | AmemberNext.Blocks | Content blocks |

Shopping Cart

| Component | Description | |---|---| | AmemberNext.CartProducts | Product listing | | AmemberNext.CartBasket | Cart basket / summary | | AmemberNext.CartAuth | Cart authentication step | | AmemberNext.CartSearchProducts | Product search | | AmemberNext.CartAddProduct | Add-to-cart button (props: code?) | | AmemberNext.CartTags | Product tag filter | | AmemberNext.CartError | Cart error messages |

Content Protection

| Component | Description | |---|---| | AmemberNext.ProtectedPage | Protected page wrapper | | AmemberNext.ProtectedMedia | Protected media wrapper | | AmemberNext.ProtectedPageContent | Protected page content area | | AmemberNext.ProtectedMediaContent | Protected media content area | | AmemberNext.ContentAccessLightbox | Login/signup lightbox for protected content | | AmemberNext.Unsubscribe | Unsubscribe widget |

Affiliate

| Component | Description | |---|---| | AmemberNext.AffIntro | Affiliate intro/dashboard | | AmemberNext.AffGeneralLink | General affiliate link | | AmemberNext.AffCustomRedirect | Custom redirect links | | AmemberNext.AffBanners | Affiliate banners | | AmemberNext.AffMarketingMaterials | Marketing materials | | AmemberNext.AffKeywords | Keyword tracking | | AmemberNext.AffPayouts | Payout history | | AmemberNext.AffStatsTable | Statistics table | | AmemberNext.AffLeadsGrid | Leads grid | | AmemberNext.AffBonusLink | Bonus link widget | | AmemberNext.AffCoupons | Affiliate coupons |

Helpdesk

| Component | Description | |---|---| | AmemberNext.HelpdeskTickets | Ticket list | | AmemberNext.HelpdeskFaq | FAQ display |

Subusers

| Component | Description | |---|---| | AmemberNext.SubusersPackages | Subuser packages | | AmemberNext.SubusersGrid | Subuser management grid |

Other

| Component | Description | |---|---| | AmemberNext.LangChoice | Language selector | | AmemberNext.InfoMessages | System info messages | | AmemberNext.CookieNotice | Cookie consent notice | | AmemberNext.InviteWidget | Invitation widget | | AmemberNext.InviteHistory | Invitation history | | AmemberNext.MembershipDirectory | Member directory | | AmemberNext.SoftsaleLicense | Software license display | | AmemberNext.SelfService | Self-service credits | | AmemberNext.SelfServiceHistory | Self-service history | | AmemberNext.SelfServiceTransfer | Credit transfer | | AmemberNext.PersonalContent | Personal content area |

Common Props

All widget components accept these optional props:

| Prop | Type | Description | |---|---|---| | className | string | Additional CSS classes for the container | | authAction | "login" \| "error" \| "empty" | Behavior when auth is required | | authMessage | string | Custom "login required" message | | id | string | HTML id for the container div |

useAmember() Hook

const {
    ready,          // boolean — true when aMember is loaded
    api,            // full AmemberExportedApi or null
    user,           // current user object or undefined (reactive)
    widgets,        // AmemberRenderedWidget[] — currently mounted widgets (reactive)
    query,          // (name, variables?) => Promise — GraphQL query
    mutate,         // (name, variables?) => Promise — GraphQL mutation
    requireLogin,   // () => Promise<user> — trigger login popup
    logout,         // () => Promise<void> — log out
} = useAmember();

Widget Count Example

function WidgetMonitor() {
    const { ready, widgets } = useAmember();

    if (!ready) return null;

    return (
        <div>
            <p>{widgets.length} widget(s) mounted</p>
            <ul>
                {widgets.map((w, i) => (
                    <li key={i}>{w.name}</li>
                ))}
            </ul>
        </div>
    );
}

The widgets array updates reactively whenever widgets are added or removed (e.g. after a refresh() call). Each entry contains { name, element } where name is the widget identifier (e.g. "Widget.SignupForm") and element is the DOM node it renders into.

GraphQL Example

function SubscriptionCheck() {
    const { ready, query } = useAmember();
    const [subs, setSubs] = useState(null);

    useEffect(() => {
        if (!ready) return;
        query('activeSubscriptions', {})
            .then(data => setSubs(data.widgets.activeSubscriptions))
            .catch(console.error);
    }, [ready, query]);

    if (!subs) return <p>Loading...</p>;
    return <pre>{JSON.stringify(subs, null, 2)}</pre>;
}

Mutation Example

function ContactForm() {
    const { ready, mutate } = useAmember();
    const [message, setMessage] = useState('');

    async function handleSubmit() {
        if (!ready) return;
        try {
            const result = await mutate('helpdeskNewTicket', {
                subject: 'Support request',
                message,
            });
            alert('Ticket created!');
        } catch (err) {
            console.error('Mutation failed:', err);
        }
    }

    return (
        <div>
            <textarea value={message} onChange={e => setMessage(e.target.value)} />
            <button onClick={handleSubmit} disabled={!ready}>Submit</button>
        </div>
    );
}

Custom Persisted Queries

If you have custom GraphQL queries registered on the PHP side (via the onGraphqlQueries hook), you can register their SHA-256 hashes on the frontend so Apollo Client sends them as persisted queries:

function CustomData() {
    const { ready, api, query } = useAmember();
    const [data, setData] = useState(null);

    useEffect(() => {
        if (!ready || !api) return;
        // Register the hash once (must match the PHP-side hash)
        api.registerQuery('MyCustomQuery', 'a1b2c3d4e5f6...');
        // Now use it like any built-in query
        query('MyCustomQuery', { id: 123 })
            .then(setData)
            .catch(console.error);
    }, [ready, api, query]);

    if (!data) return <p>Loading...</p>;
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Custom Widget (Advanced)

For widgets not covered by the built-in components, use AmemberWidget directly:

import { AmemberWidget } from '@cgi-central/amember-next-integration';

<AmemberWidget widgetName="Widget.CustomWidget" config={{ key: "value" }} />

Requirements

• React 17+ (peer dependency)
• aMember Next installation with React frontend enabled
• CORS must allow the third-party domain to load scripts from the aMember URL