|
| 1 | +# @urbackend/react |
| 2 | + |
| 3 | +The official React SDK for [urBackend](https://urbackend.com) — a MongoDB-native Backend as a Service. |
| 4 | + |
| 5 | +This SDK provides a `<UrProvider>`, authentication UI components, protected routing, and React hooks (`useUser`, `useAuth`, `useDb`, `useStorage`) to seamlessly integrate urBackend into your React applications. |
| 6 | + |
| 7 | +## Installation |
| 8 | + |
| 9 | +Install the React SDK alongside the core SDK: |
| 10 | + |
| 11 | +```bash |
| 12 | +npm install @urbackend/react @urbackend/sdk |
| 13 | +``` |
| 14 | + |
| 15 | +## Quick Start |
| 16 | + |
| 17 | +Wrap your application with `<UrProvider>`: |
| 18 | + |
| 19 | +```tsx |
| 20 | +import React from 'react'; |
| 21 | +import ReactDOM from 'react-dom/client'; |
| 22 | +import App from './App'; |
| 23 | +import { UrProvider } from '@urbackend/react'; |
| 24 | + |
| 25 | +ReactDOM.createRoot(document.getElementById('root')!).render( |
| 26 | + <React.StrictMode> |
| 27 | + <UrProvider apiKey="pk_live_your_publishable_key"> |
| 28 | + <App /> |
| 29 | + </UrProvider> |
| 30 | + </React.StrictMode> |
| 31 | +); |
| 32 | +``` |
| 33 | + |
| 34 | +### Pre-built Auth UI |
| 35 | + |
| 36 | +Use the `<UrAuth>` component to instantly drop in a beautiful authentication screen that handles Email, Password, and Social Providers (Google/GitHub). |
| 37 | + |
| 38 | +```tsx |
| 39 | +import { UrAuth, GuestRoute } from '@urbackend/react'; |
| 40 | + |
| 41 | +export default function LoginPage() { |
| 42 | + return ( |
| 43 | + <GuestRoute fallback={<div>Loading...</div>} onRedirect={() => window.location.href = '/dashboard'}> |
| 44 | + <UrAuth providers={['google', 'github']} theme="light" /> |
| 45 | + </GuestRoute> |
| 46 | + ); |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +### Using Hooks & Data |
| 51 | + |
| 52 | +Use our hooks to read the session state or fetch data with built-in RLS (Row-Level Security): |
| 53 | + |
| 54 | +```tsx |
| 55 | +import { useUser, useDb } from '@urbackend/react'; |
| 56 | +import { useEffect, useState } from 'react'; |
| 57 | + |
| 58 | +export default function Dashboard() { |
| 59 | + const { user, logout } = useUser(); |
| 60 | + const db = useDb(); |
| 61 | + const [products, setProducts] = useState([]); |
| 62 | + |
| 63 | + useEffect(() => { |
| 64 | + async function fetchProducts() { |
| 65 | + const data = await db.getAll('products', { limit: 10 }); |
| 66 | + setProducts(data); |
| 67 | + } |
| 68 | + fetchProducts(); |
| 69 | + }, [db]); |
| 70 | + |
| 71 | + return ( |
| 72 | + <div> |
| 73 | + <h1>Welcome, {user?.name}</h1> |
| 74 | + <button onClick={logout}>Sign Out</button> |
| 75 | + |
| 76 | + <h2>Products</h2> |
| 77 | + <ul> |
| 78 | + {products.map(p => ( |
| 79 | + <li key={p._id}>{p.name}</li> |
| 80 | + ))} |
| 81 | + </ul> |
| 82 | + </div> |
| 83 | + ); |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +## Documentation |
| 88 | + |
| 89 | +For full documentation and advanced usage, visit [docs.ub.bitbros.in](https://docs.ub.bitbros.in). |
| 90 | + |
| 91 | +## License |
| 92 | + |
| 93 | +MIT |
0 commit comments