Memberstack React Package

Article author
Memberstack Team

The Memberstack React Package provides an easy way to integrate Memberstack's user management, membership, and payments features into your React application and includes the Memberstack DOM Package at it's core. With just a few lines of code, you can handle user authentication, access control, subscriptions and checkout, and more. This guide will walk through how to get started with the package, authenticate users, work with Memberstack modals, use prebuilt components, and conditionally render UI based on auth state. We'll also cover hooks for accessing the Memberstack instance and checkout methods. By the end, you'll have all the tools needed to build full-featured user flows in React using Memberstack as the backend.

View the full React Package Documentation for more additional guidance. 


The Memberstack React Package allows you to easily integrate Memberstack's user management and membership platform into React applications.

It includes:

  • Hooks for accessing Memberstack methods and state
  • Prebuilt UI components for common flows like login and signup
  • Conditional rendering components
  • Helper methods for checkout and subscription management


Install from npm:

npm install @memberstack/react

Or Yarn:

yarn add @memberstack/react


Import the MemberstackProvider component and pass your Memberstack public API key in the config:

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

function App() { const config = { publicKey: "pk_..." }; 

return ( <MemberstackProvider config={config}> <MyApp /> </MemberstackProvider> ); }

This initializes Memberstack and makes it available to other components.

Accessing Memberstack

The main way to access Memberstack methods is through the useMemberstack hook. Here is an example of how to display member data:

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

function MyComponent() {
  const memberstack = useMemberstack();
    useEffect(() => {
      memberstack.getCurrentMember().then(member => {
        // do something with member data

  return <div>My Component</div> 

This returns the Memberstack instance created by the MemberstackProvider, which you can use to call any Memberstack methods.


Get current member info:

const memberstack = useMemberstack();
const { data: member } = await memberstack.getCurrentMember();

Listen for auth changes:

const memberstack = useMemberstack();
memberstack.onAuthStateChanged(member => { // update state });

Handling Promises

Since many Memberstack methods return promises, make sure to handle resolved values and errors:

memberstack.openModal({type: "LOGIN"})
  .then(({data, type}) => {
    // modal closed  
  .catch(err => {
    // handle error  


For authentication state, use the useAuth hook instead of useMemberstack:

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

function Navbar() { 
  const { userId, isLoggedIn, signOut } = useAuth(); 
  return ( <nav> {isLoggedIn ? 
  ( <button onClick={signOut}> Logout {userId} </button> ) : 
  ( <button onClick={() => memberstack.openModal({type: "LOGIN"})}> Login </button> )
  } </nav> ); 

This provides:

  • userId
  • status
  • getToken
  • isLoggedIn
  • signOut

Working with Modals

To open Memberstack modals (login, signup, forgot password etc), use the useMemberstackModal hook:

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

function LoginButton() { const { openModal, hideModal } = useMemberstackModal(); 
const handleClick = () => { openModal({ type: "LOGIN" }).then(({data, type}) => {
  // modal closed, take action 
}); }; 

return <button onClick={handleClick}>Login</button> }

The openModal method takes a config object where you specify the modal type, any plans/prices, and other options.

Always call hideModal when you are done to close the modal.

Signup Example

const { openModal, hideModal } = useMemberstackModal(); 

openModal({ type: "SIGNUP", planId: "pln_xxxxxxx" }).then(({data, type}) => { 
  console.log("User signed up!", data); 

UI Components

The package includes prebuilt UI components for common flows:

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

function SignIn() { return <SignInModal />; }

Components available:

  • SignUpModal
  • SignInModal
  • ProfileModal

These will automatically handle opening as modals.

Conditional Rendering

Components like MemberstackProtected and LoggedIn allow conditionally showing content based on auth state:

import { MemberstackProtected } from "@memberstack/react"; 
function ProtectedPage() { 
  return ( <MemberstackProtected> <p>Protected content!</p> </MemberstackProtected> ); 

MemberstackProtected takes options like:

  • requiring certain plans/permissions
  • onUnauthorized component
  • fallback component
<MemberstackProtected allow={{ plans: ["pln_xxxx"] }} 
onUnauthorized={<Restricted />} > ... </MemberstackProtected>

LoggedIn shows content if the user is authenticated:

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

function Nav() { 
  return ( <nav> <LoggedIn> <UserProfile /> </LoggedIn> <LoginLink /> </nav> ); 

LoggedOut is the inverse.

Additional Hooks

Other handy hooks include:

  • useCheckout - open Stripe checkout
  • useCustomerPortal - open billing portal
import { useCheckout } from "@memberstack/react"; 

function BuyButton() { 
  const checkout = useCheckout(); 
  return ( <button onClick={() => checkout({ priceId: "price_xxx" })}> Buy Now </button> ); 


Keywords: React Memberstack, @memberstack/dom, MemberstackProvider, config prop, custom hooks (useMemberstack, useAuth, useCheckout, useCustomerPortal, useMemberstackModal), UI components (SignUpModal, SignInModal, ProfileModal), Logic wrapper components (MemberstackProtected, LoggedIn), plans, permissions, modals

Was this article helpful?



  • Comment author
    Ali Yar Khan

    Can this work in React Native ?

  • Comment author
    Duncan Hamra

    Hey Ali Yar Khan, we have not tested any Memberstack apps in React Native. We've been focused on web. 

  • Comment author

    Hi! Got a security question. Memberstack Provider requires a config prop containing the public key. What's Memberstack's approach to hiding the public key on the client side? If we are to send it as a server request - the client can still access it if they visit the endpoint URL.

  • Comment author
    Duncan Hamra

    Edgar great question!

    I need Tylers confirmation on this but, public key represents which Memberstack customer you are (so that we know which directory to check your users against). This is not confidential information, so there is no problem that this information can be seen.
  • Comment author
    Tyler Bell

    Hi Edgar, the public key is not confidential and is public 🙂


Please sign in to leave a comment.