Reflow - Easy Auth and Subscriptions for React

Sign-in is a piece of cake

Add user accounts and authentication to your React
and vanilla js projects in seconds.

import React from "react";
import useAuth from "@reflowhq/auth-react";

export default function App() {
  const auth = useAuth({ storeID: 123456789 });

  if (auth.isSignedIn()) {
    return <div>Welcome, {auth.user.name}</div>;
  }

  return <button onClick={() => auth.signIn()}>
    Sign In
  </button>;
}

To integrate Reflow Auth, just import our React hook and pass your project id. Getting started →

The Reflow Auth library lets users sign into your app without page redirects, making it easy to transition into a signed-in state seamlessly. Examples →

Users can sign in via multiple providers, including Google, Apple, Facebook, Twitter/X, and also by using an email and password. Sign-in providers →

import React from "react";
import useAuth from "@reflowhq/auth-react";

export default function App() {
  const auth = useAuth({ storeID: 123456789 });

  if (!auth.isSignedIn()) {
    return <div>Please sign in to create a ticket.</div>;
  }

  if (!auth.isSubscribed()) {
    return <div>An active subscription is
      required to create tickets.</div>;
  }

  return <button onClick={() => createTicket()}>
    Create a Ticket
  </button>;
}

async function createTicket() {
  const token = await auth.getToken();
  const response = await fetch(
    "/create-ticket?token=" + token, 
    { method: "POST" }
  );
  const json = await response.json();
  window.location = json.url;
}

You can authenticate both the frontend and backend. Reflow Auth gives you secure JWT tokens which you can validate on the server or in cloud functions like Cloudflare Workers and Lambda. Server example →

Browse and manage registered accounts from Reflow's backend. Purge user data and invalidate active sessions all from a central place.

Subscriptions are a breeze

Connect Stripe, define subscription plans and receive
your earnings with zero fees.

Learn more

import React, { useState, useEffect } from "react";

const config = {
  storeID: 123456789,
};

export default function App() {
  const [plans, setPlans] = useState([]);

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

  return (
    <div className="plan-container">
      {plans.map((p) => (
        <div className="plan">
          <h1>{p.name}</h1>
          <p>{p.description}</p>
          <ul>
            {p.features.map((f, i) => (
              <li key={i}>{f}</li>
            ))}
          </ul>
          <h2>
            {p.prices[0].price_formatted} per {p.prices[0].billing_period}
          </h2>
        </div>
      ))}
    </div>
  );
}

Configure your subscription plans on Reflow, define plan limits and feature flags. Use the Reflow API to select your plans and build a pricing table. See Example →

import React from "react";
import useAuth from "@reflowhq/auth-react";

export default function App() {
  const auth = useAuth({ storeID: 123456789 });

  if (auth.isSubscribed()) {
    return <div>You are subscribed to the {auth.subscription.plan.name} 
      plan for {auth.subscription.price.price_formatted} per 
      {auth.subscription.price.billing_period}</div>;
  }

  return <button onClick={() => auth.createSubscription({
    priceID: 123456789
  })}>Subscribe</button>;
}

Call the auth.createSubscription method with the id of a Plan Price to display a payment page. See Example →

import React from "react";
import useAuth from "@reflowhq/auth-react";

export default function App() {
  const auth = useAuth({ storeID: 123456789 });

  if (auth.isSubscribed()) {
    return <button onClick={() => auth.modifySubscription()}>
      Modify Subscription
    </button>;
  }

  return <p>Please sign in to modify your subscription</p>;
}

To let the user update their payment method or change their plan, call the auth.modifySubscription method. See Example →

import React from "react";
import useAuth from "@reflowhq/auth-react";
import {sendInvitation} from "../helpers/invitations";

export default function App() {
  const auth = useAuth({ storeID: 123456789 });

  if (auth.isSubscribed() && auth.subscription.plan.parameters.can_invite) {
    return <button onClick={() => sendInvitation()}>
      Invite Team Mate
    </button>;
  }

  return <p>You can't invite team additional members.</p>;
}

Restrict content only to subscribers, define feature flags and limits as plan parameters. Restrictions can be applied both on the client and server with the help of JWT.
Client Example → Server Example →

Ecommerce as it should be

Turning your React or vanilla js project into a fully fledged
store is easier than ever.

Learn more

Powerful ecommerce platform

With support for rich product information, customization, variants, categories, coupons and gift cards, you can handle any use case.

Manage and fulfill orders

Our advanced dashboard lets you manage every part of the purchase process and order fullfilment.

Streamlined Payment Processing

Effortlessly accept payments through Stripe and PayPal, ensuring smooth transactions for customers and merchants alike.

Integration & customization

Fetch product info from our API, integrate your backend with webhooks and even customize the emails that Reflow sends out.

Best way to add user sign-in, ecommerce and subscriptions

to your React projects