> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ub.bitbros.in/llms.txt
> Use this file to discover all available pages before exploring further.
# React SDK Overview
> Build full-stack React applications in minutes with pre-built authentication UI, session management, and hooks.
The `@urbackend/react` SDK provides everything you need to build secure, scalable React applications on top of urBackend. It handles the heavy lifting of session persistence, social logins, and routing out of the box.
## Features
* **Pre-built Auth UI**: A beautiful, customizable `` component for login/signup (email/password & social).
* **Session Management**: Automatically persists tokens to `localStorage` and handles silent background refreshes.
* **Protected Routing**: Simple `` and `` wrappers to secure your pages.
* **Customizable UI**: Includes `` for a ready-to-use profile dropdown.
* **Powerful Hooks**: `useUser`, `useAuth`, `useDb`, and `useStorage` to interact with your backend data natively.
## Installation
Install the React SDK along with the core TypeScript SDK (which it uses under the hood):
```bash theme={null}
npm install @urbackend/react @urbackend/sdk
```
## Setup (Create React App / Vite)
To get started, wrap your root application with the `` and pass your project's Publishable API Key.
**Always use your Publishable Key (`pk_live_...`) in the browser.** Never use your Secret Key (`sk_live_...`) on the frontend, as it grants full administrative access.
```tsx src/main.tsx theme={null}
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { UrProvider } from '@urbackend/react'
import './index.css'
// Initialize the UrBackend Provider
ReactDOM.createRoot(document.getElementById('root')!).render(
,
)
```
## Setup (Next.js App Router)
If you are using Next.js with the App Router, create a Client Component provider to wrap your application:
```tsx src/components/Providers.tsx theme={null}
"use client";
import { UrProvider } from '@urbackend/react';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Then, wrap your layout:
```tsx src/app/layout.tsx theme={null}
import { Providers } from '../components/Providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Next Steps
Now that your provider is set up, you can start building your authentication flow and accessing your data.
Add a login screen in one line of code.
Secure your application pages.