Memberstack React Package

React Memberstack is a wrapper around the @memberstack/dom package. It makes it easy to add Memberstack to any React app.

Overview

Welcome to the React Memberstack documentation! The Memberstack React Package is a wrapper around the @memberstack/dom package, designed to make it easy to integrate Memberstack into any React application. Memberstack is a platform that provides user authentication, membership management, and other user-centric features.

For additional functionality check out our DOM Package and Admin Package

Prerequisites

This documentation assumes that you have a working knowledge of React and React Hooks. If you're new to these technologies, we recommend checking out the official React documentation and this guide on React Hooks before proceeding.

Getting Started

To get started, you'll need to install the Memberstack React package from the npm public registry, or using yarn. Here are the commands to do so:

npm install @memberstack/react

yarn add @memberstack/react

Memberstack Provider

After the package has been installed successfully, you can wrap the components that need access to the Memberstack object in the provided MemberstackProvider.

The MemberstackProvider receives a config prop, which contains the memberstack initialization object with DOM modifications.

import { MemberstackProvider } from "@memberstack/react";

const config = {
  publicKey: "pk_...",
};

function Index() {
  return (
    <MemberstackProvider config={config}>
      <App />
    </MemberstackProvider>
  );
}

Hooks

Memberstack React comes packed with custom hooks. These hooks give you access to Memberstack-related data plus a collection of useful methods for checking out, plan management, and authentication.

useMemberstack

The useMemberstack hook returns a reference to the memberstack instance, created by the MemberstackProvider.

import { useMemberstack } from "@memberstack/react";

function Dashboard() {
  const memberstack = useMemberstack();
  const [member, setMember] = React.useState(null);

  React.useEffect(() => {
    memberstack.getCurrentMember()
      .then(({ data: member }) => setMember(member))
      .catch();
  }, []);

  if (!member) return null;

  return (
    <div>
      Welcome, {member.auth.email}
    </div>
  );
}

useAuth

The useAuth hook returns limited information to help access the current session and manage a member’s auth state.

import { useAuth } from "@memberstack/react";

const {
  userId,
  status,
  getToken,
  isLoggedIn,
  signOut
} = useAuth();

useCheckout

The useCheckout hook returns a method that opens a Stripe-hosted checkout session.

import { useCheckout, MemberstackProtected, SignInModal } from "@memberstack/react";
...
const checkout = useCheckout();
...
return (
  <MemberstackProtected onUnauthorized={<SignInModal />}>
    <button
      onClick={async () =>
        checkout({
          priceId: "prc_sb_...",
        })
      }
    >
      Checkout
    </button>
  </MemberstackProtected>
);

useCustomerPortal

The useCustomerPortal hook returns a method that opens a Stripe-hosted customer billing portal session. Members can update their billing information, view invoices and manage subscriptions inside of the portal.

👉 Here’s an example of the portal: https://billing.stripe.com/session/test_YWNjdF8xR3kxaUZBbHF2S3B4SkN1LF9Mc1ByazliV0V0cXdYelZBcVYzb1E3U3doOVcyMFZE01005v3YIkKm

import {
  useCustomerPortal,
  MemberstackProtected,
  SignInModal
} from "@memberstack/react";
...
const openPortal = useCustomerPortal({
  priceIds: ["prc_sb_..."]
});
...
return (
  <MemberstackProtected onUnauthorized={<SignInModal />}>
    <button onClick={openPortal}>Open Portal</button>
  </MemberstackProtected>
);

useMemberstackModal

The useMemberstackModal hook returns the openModal and hideModal methods, which you can use to easily interact with Memberstack's provided modals.

Read the Modals section for more information about the configuration

💡 Although you can directly use the memberstack.openModal method without using the useMemberstackModal hook, the openModal method provided by the hook ensures that the modal always gets loaded once Memberstack has finished initializing. This means that you don't have to make sure that Memberstack is able to open your modal; we take care of that for you.

Examples

Login:

import { useMemberstackModal } from "@memberstack/react";

function Login() {
  const { openModal, hideModal } = useMemberstackModal();

  return (
    <div
      onClick={() =>
        openModal({
          type: "LOGIN",
          // planId: "pln_...",
          // priceId: "prc_..."
        })
        .then(({ data, type }) => {
          console.log('data', data);
          console.log('type: ', type);
          hideModal();
        })
      }
    >
      Log in
    </div>
  );
}

Signup:

import { useMemberstackModal } from "@memberstack/react";

function Signup() {
  const { openModal } = useMemberstackModal();

  return (
    <div
      onClick={() =>
        openModal({
          type: "SIGNUP",
          planId: ["pln_..."],
          // priceId: "prc_..."
        })
        .then(({ data, type }) => {
          console.log('data', data);
          console.log('type: ', type);
          hideModal();
        })
      }
    >
      Sign up
    </div>
  );
}

Forgot Password:

import { useMemberstackModal } from "@memberstack/react";

function PasswordSettings() {
  const { openModal } = useMemberstackModal();

  return (
    <div
      onClick={() => openModal({ type: "FORGOT_PASSWORD" })}
    >
      Forgot Password?
    </div>
  );
}

UI Components

Memberstack UI components are used to render beautiful views contained within our prebuilt UI collection. These UI components will automatically open as modals when the page loads.

Presents a sign-up view that takes the same properties specified in the useMemberstackModal requirements.

import { SignUpModal } from "@memberstack/react";

export default function SignUpPage() {
  return (
    <SignUpModal planId={["pln_..."]} />
  );
}

Presents a sign-in view that takes the same properties specified in the useMemberstackModal requirements.

...
import { SignInModal } from "@memberstack/react";

export default function SignInPage() {
  return (
    <SignInModal />
  );
}

Presents a profile view where the user can manage their personal information.

...
import {
  MemberstackProtected,
  SignInModal,
  ProfileModal
} from "@memberstack/react";

export default function ProfilePage() {
  return (
    <MemberstackProtected onUnauthorized={<SignInModal />}>
      <ProfileModal />
      <Link href="/">Go Back</Link>
    </MemberstackProtected>
  );
}

Modal Callback Props

These callback props are found on all modals.

<SignUpModal />

Logic Wrapper Components

Memberstack logic wrappers are components that allow you to conditionally render content based on the member’s logged-in state plus a variety of other checks, like plans & permissions.

Allows you to conditionally render content based on the currently authenticated member, their plans, and/or permissions.

Parameters:

• allow object An optional object to give you more control over which members to authorize. By default, only authenticated members have access to the protected components, but you can use the values within the access object to get more specific.
• permissions array A list of permission names.
• plans array A list of plan ids.
• onUnauthorized function | React element(s) A callback function or React element to invoke/render when the member is not authorized.
• fallback React element A fallback element when Memberstack is loading information before (un)authorizing.

Response:

• None

Examples:

All Authenticated

<MemberstackProtected>
  ...
</MemberstackProtected>

With Permissions

<MemberstackProtected
  allow={{
    permissions: ["view:workout"]
  }}
>
  ...
</MemberstackProtected>

With Plans

<MemberstackProtected
  allow={{
    plans: ["pln_123"]
  }}
>
  ...
</MemberstackProtected>

With Permissions and Plans

<MemberstackProtected
  allow={{
    plans: ["pln_123"],
    permissions: ["view:workout"]
  }}
>
  ...
</MemberstackProtected>

With onUnauthorized Callback

<MemberstackProtected
  onUnauthorized={() => router.redirect('/login')}
>
  ...
</MemberstackProtected>

With onUnauthorized Element

<MemberstackProtected
  onUnauthorized={<UnauthorizedPage />}
>
  ...
</MemberstackProtected>

With Fallback

<MemberstackProtected
  fallback={<div>Loading.....</div>}
>
  ...
</MemberstackProtected>

Allows you to conditionally render content based on the member being logged in

Parameters:

• None

Response:

• None

Example:

<LoggedOut>
  <LoginScreen />
</LoggedOut>

<LoggedIn>
  <p>Logged In</p>
</LoggedIn>

<MemberstackProtected
  fallback={<div>Loading.....</div>}
  onUnauthorized={<SignInModal onSuccess={({ data }) => {
    console.log(data)
  }} />}
>
  <div>
    <main>
      <h1>
        Welcome to
        <br />
        <a href="https://memberstack.com">Memberstack</a>!
      </h1>

      {userId} - {isLoggedIn}

      <button onClick={signOut}>Sign Out</button>
    </main>
  </div>
</MemberstackProtected>

Examples

React-Router

Getting started

Install react-router-dom & @memberstack/react

// main.tsx

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { MemberstackProvider } from '@memberstack/react';
import Settings from './Settings.tsx';

ReactDOM.createRoot(document.getElementById('root')!)
  .render(
    <BrowserRouter>
      <MemberstackProvider config={{
        publicKey: import.meta.env.VITE_MEMBERSTACK_PUBLIC_KEY as string
      }}>
        <Routes>
          <Route path='/' index element={<App />} />
          <Route path='/settings' element={<Settings />} />
        </Routes>
      </MemberstackProvider>
    </BrowserRouter>
  );

// App.tsx

import './App.css';
import { LoggedIn, LoggedOut, MemberstackProtected, SignInModal, useAuth } from "@memberstack/react";

function App() {
  const { userId, signOut, isLoggedIn } = useAuth();

  return (
    <>
      <LoggedOut><p>Logged Out</p></LoggedOut>
      <LoggedIn><p>Logged In</p></LoggedIn>
      <MemberstackProtected
        fallback={<div>Loading.....</div>}
        onUnauthorized={<SignInModal onSuccess={({ data }) => {
          console.log(data)
        }} />}
      >
        <div>
          <main>
            <h1>
              Welcome to
              <br />
              <a href="https://memberstack.com">Memberstack</a>!
            </h1>

            {userId} - {isLoggedIn}

            <button onClick={signOut}>Sign Out</button>
          </main>
        </div>
      </MemberstackProtected>
    </>
  );
}

export default App;

// Settings.tsx

import './App.css';
import {ProfileModal} from "@memberstack/react";
import { useNavigate } from "react-router-dom";

function Settings() {
  let navigate = useNavigate();

  const handleModalClose = () => {
    navigate("/");
  };

  return (
    <div>
      <ProfileModal onClose={handleModalClose} />
    </div>
  );
}

export default Settings;