BuildBaseBuildBase

Overview

Add sign-in, sign-out, and session management to your React app.

BuildBase handles authentication end-to-end. Wrap your app in SaaSOSProvider, use useSaaSAuth() for sign-in/sign-out, and WhenAuthenticated/WhenUnauthenticated to control what users see.

import { useSaaSAuth } from '@buildbase/sdk/react';

function App() {
  const { user, isAuthenticated, signIn, signOut } = useSaaSAuth();

  if (!isAuthenticated)
    return <button onClick={() => signIn()}>Sign In</button>;
  return <p>Welcome, {user.name}</p>;
}

Before you start

Enable at least one auth method in the BuildBase dashboard before integrating.

Supported auth methods

MethodDescription
Email/PasswordTraditional credential-based sign-in
Magic LinkPasswordless email link — one click to authenticate
Passkeys (WebAuthn)Phishing-resistant sign-in with device biometrics or security keys
Google OAuthSign in with Google accounts
LinkedIn OAuthSign in with LinkedIn profiles
GitHub OAuthSign in with GitHub accounts
Microsoft OAuthSign in with Microsoft accounts
API TokensServer-to-server authentication for backend integrations

Enable or disable any method from the dashboard — no code changes needed.

OAuth 2.0 authorization server

Beyond first-party sign-in, every BuildBase app is a full OAuth 2.0 authorization server. Third-party apps and AI agents request scoped access to user accounts through the standard authorization code flow:

  • Dynamic client registration — clients register programmatically (RFC 7591/7592)
  • Token introspection — resource servers validate tokens (RFC 7662)
  • Token revocation — clients invalidate tokens (RFC 7009)
  • PKCE — proof key for code exchange, including public clients (CLIs, agents, SPAs)
  • User consent — users approve a client's requested scopes before it gets access

Scopes and resources are defined by your app. No extra setup is needed — the endpoints are live for every BuildBase app.

Available hooks and components

Hook:

  • useSaaSAuth() — Current user, sign-in, sign-out, session status, and openWorkspaceSettings().

Components:

  • WhenAuthenticated — Render children only when signed in.
  • WhenUnauthenticated — Render children only when not signed in.
import { WhenAuthenticated, WhenUnauthenticated } from '@buildbase/sdk/react';

function Page() {
  return (
    <>
      <WhenAuthenticated>
        <Dashboard />
      </WhenAuthenticated>
      <WhenUnauthenticated>
        <LoginPage />
      </WhenUnauthenticated>
    </>
  );
}

Next Steps