@base316/react

Drop-in React components for Base316 — sign-in, sign-up, profile, pricing and billing, rendered inside your own application rather than on a page your users are sent away to.

npm install @base316/react @base316/sdk

Wrap your app once

import { Base316Provider } from "@base316/react";

export default function App({ children }) {
    return (
        <Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_KEY}>
            {children}
        </Base316Provider>
    );
}

The provider holds one client and the signed-in user's session, and fetches the branding you configured in the Base316 dashboard — so what you set there is what these components look like here. No colors to keep in step in two places.

Sign in, in your own page

import { SignIn } from "@base316/react";

export default function LoginPage() {
    return <SignIn onSignedIn={() => router.push("/app")} />;
}

That is the whole integration. No redirect, no popup, no button that sends somebody to another domain and back. Two-factor prompts are handled inside the component when the account has it enrolled.

If you would rather not render sign-in at all, Base316 also hosts the pages — point your users at the link in the dashboard and they come back signed in.

The rest

import {
    UserProfile, // email, password, sessions, two-factor
    PricingTable, // your plans, with a checkout button
    SubscriptionManager, // what they are on, and how to change it
    Invoices, // what they have been billed
    Branding, // your logo and name, as configured
} from "@base316/react";

Styling

Three ways, from least to most invasive. Use the first that works.

1. The dashboard. Whatever you set under Sign-in pages — brand color, background, logo — arrives here automatically.

2. appearance tokens. No CSS to write:

<Base316Provider
  publishableKey={key}
  appearance={{ colorPrimary: "#16a34a", borderRadius: "999px" }}
>

3. Your own CSS, targeting the b316-* class names, or a className on any component to hand it your utility classes.

Every color, radius and font is behind a --b316-* custom property. Nothing inherits your application's styles automatically — silently absorbing whatever body { font } and button { } rules happen to exist produces components that look broken in ways neither side can predict.

White-label for a tenant

When one business runs your product for others — a firm and its clients — show the firm's brand on the screens its clients see:

<Base316Provider publishableKey={key} tenant={{ organizationExternalId: firm.id }}>

The tenant's own branding, then its parent's, then your environment's, field by field. Change tenant when the person switches team and every component restyles. TeamMembers says so when a team is reached through the firm rather than by membership.

Reading the session

import { useSession } from "@base316/react";

function Greeting() {
    const { session, loading } = useSession();

    if (loading) return null;
    return session ? <p>Hello {session.user.email}</p> : <a href="/login">Sign in</a>;
}

loading matters: rendering the signed-out branch first and then swapping makes every page flash a sign-in link at people who are already signed in.