<UrProvider>

The <UrProvider> is the heart of the React SDK. It initializes the urBackend client, manages global authentication state, and synchronizes the user’s session seamlessly across your application. You must wrap your entire application (or at least the parts that require authentication and database access) inside this provider.

Usage

import { UrProvider } from '@urbackend/react';

function App() {
  return (
    <UrProvider apiKey="pk_live_your_publishable_api_key">
      <YourApplicationComponents />
    </UrProvider>
  );
}

Props

Prop	Type	Required	Description
`apiKey`	`string`	Yes	Your project’s Publishable API Key (`pk_live_...`).
`baseUrl`	`string`	No	Overrides the default urBackend API URL. Useful for self-hosted instances.
`children`	`React.ReactNode`	Yes	The components to render inside the provider.

How it works

When <UrProvider> mounts, it automatically:

Initializes a singleton @urbackend/sdk instance.
Checks localStorage for an existing active session. The access token is read from ub_auth_token and the refresh token from ub_refresh_token.
Attempts to refresh the session in the background by calling auth.refreshToken(), which sends the stored refresh token in the x-refresh-token header (and falls back to any HTTP-only cookie if no stored token is found). This makes cross-domain auth work without shared cookies.
Exposes the AuthUser state and SDK client to all child components via React Context (accessed through hooks like useUser and useDb).

Access tokens live in memory during the session and are mirrored to localStorage.ub_auth_token. Refresh tokens are persisted to localStorage.ub_refresh_token. Call client.auth.logout() (or setToken(undefined, undefined)) to clear both.

The provider sets up global state. You only ever need one <UrProvider> at the root of your React tree.

Get Started

Core Concepts

Guides

TypeScript SDK

React SDK

Security & Limits

Usage

Props

How it works

​Usage

​Props

​How it works

Usage

Props

How it works