Subscriptions with React

This guide is for integrating Reflow Auth in client-side React apps.

For Next.js projects, please refer to the auth-next library docs.

Subscriptions build upon Reflow's authentication system, which makes them straightforward to integrate in a new or existing React project.

Installation

The first step is to install the React Auth Hook.

npm install @reflowhq/auth-react

This gives you access to a number of methods for authenticating users, checking the user's subscription status and initiating new subscriptions.

Subscription Example

You can see a live example below. You can browse through the example files by expanding the sidebar, or open the Sandbox in a new tab for easier browsing.

The two important files are App.jsx and Plan.jsx.

App.jsx

import "./styles.css";

import useAuth from "@reflowhq/auth-react";
import React, { useState, useEffect } from "react";
import Plan from "./Plan.jsx";

const config = {
  projectID: "267418190",
};

export default function App() {
  const auth = useAuth(config);

  const [plans, setPlans] = useState([]);
  const [activeTab, setActiveTab] = useState("month");

  useEffect(() => {
    fetch(`https://api.reflowhq.com/v2/projects/${config.projectID}/plans/`)
      .then((response) => response.json())
      .then((r) => setPlans(r.data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <>
      {auth.isSubscribed() ? (
        <div>
          <h1>Thank you for subscribing!</h1>
          <button onClick={() => auth.modifySubscription()}>
            Modify Subscription
          </button>
          <button className="danger" onClick={() => auth.signOut()}>
            Sign Out
          </button>
          <p>
            Plan Name: <b>{auth.subscription.plan.name}</b>
            <br />
            Price:{" "}
            <b>
              {auth.subscription.price.price_formatted} /
              {auth.subscription.price.billing_period}
            </b>
          </p>
          <h4>RAW Subscription info:</h4>
          <pre>{JSON.stringify(auth.subscription, null, "  ")}</pre>
        </div>
      ) : (
        <div>
          <div className="tabs">
            <span
              className={activeTab === "month" ? "active" : ""}
              onClick={() => setActiveTab("month")}
            >
              Monthly
            </span>
            <span
              className={activeTab === "year" ? "active" : ""}
              onClick={() => setActiveTab("year")}
            >
              Yearly
            </span>
          </div>
          <div className="card-container">
            {plans.map((p) => (
              <Plan key={p.id} plan={p} activeTab={activeTab} auth={auth} />
            ))}
          </div>
        </div>
      )}
    </>
  );
}

The key moments in this file:

1. We initialize the Reflow Auth library the same way that we do for authentication. You can obtain your project ID from the Reflow dashboard settings page.
2. We use the Reflow API to request the plans that are configured in the project, and render them as cards with a Subscribe button for each. Each plan contains of one or more prices. We need the priceID to trigger the subscription flow.
3. You can switch between Monthly and Yearly billing. We have two prices configured for the paid plan, and switch between them depending on the active tab.

Plan.jsx

import React from "react";

export default function Plan({ plan, activeTab, auth }) {
  let chosenPrice = plan.prices[0];

  for (let p of plan.prices) {
    if (p.billing_period === activeTab) {
      chosenPrice = p;
    }
  }

  function subscribeToPlan() {
    if (chosenPrice.price > 0) {
      alert(
        "Subscribing for paid plans is disabled in the demo in order to prevent accidental charges. You can try the free one instead."
      );
    } else {
      auth.createSubscription({
        priceID: chosenPrice.id,
        paymentProvider: "stripe",
      });
    }
  }

  return (
    <div className="card">
      <h1>{plan.name}</h1>
      <p>{plan.description}</p>
      <ul>
        {plan.features.map((f, i) => (
          <li key={i}>{f}</li>
        ))}
      </ul>
      <h2>
        {chosenPrice.price === 0
          ? "Free"
          : chosenPrice.price_formatted + " / " + chosenPrice.billing_period}
      </h2>
      <button onClick={subscribeToPlan}>Subscribe</button>
    </div>
  );
}

The key moment here is that we use the auth.createSubscription() method and pass a priceID of the plan. For the purposes of this example we've disabled subscriptions for the paid plan to prevent accidental charges.

If the user is not signed in your project, Reflow will automatically display a sign in/registration window first.

Note

While developing and testing your app, you can enable the test mode parameter to try out payment flows without charging actual money.

Visit the test mode docs to learn more.