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.
Overview
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
Installation
Install from npm:
npm install @memberstack/reactOr Yarn:
yarn add @memberstack/reactSetup
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.
Examples
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
});Authentication
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
hideModal();
}); };
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);
hideModal();
});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
Comments
5 comments
Can this work in React Native ?
Hey Ali Yar Khan, we have not tested any Memberstack apps in React Native. We've been focused on web.
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.
Edgar great question!
Hi Edgar, the public key is not confidential and is public 🙂
Please sign in to leave a comment.