@urbackend/react 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,93 @@
+# @urbackend/react
+
+The official React SDK for [urBackend](https://urbackend.com) — a MongoDB-native Backend as a Service. 
+
+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.
+
+## Installation
+
+Install the React SDK alongside the core SDK:
+
+```bash
+npm install @urbackend/react @urbackend/sdk
+```
+
+## Quick Start
+
+Wrap your application with `<UrProvider>`:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { UrProvider } from '@urbackend/react';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <UrProvider apiKey="pk_live_your_publishable_key">
+      <App />
+    </UrProvider>
+  </React.StrictMode>
+);
+```
+
+### Pre-built Auth UI
+
+Use the `<UrAuth>` component to instantly drop in a beautiful authentication screen that handles Email, Password, and Social Providers (Google/GitHub).
+
+```tsx
+import { UrAuth, GuestRoute } from '@urbackend/react';
+
+export default function LoginPage() {
+  return (
+    <GuestRoute fallback={<div>Loading...</div>} onRedirect={() => window.location.href = '/dashboard'}>
+      <UrAuth providers={['google', 'github']} theme="light" />
+    </GuestRoute>
+  );
+}
+```
+
+### Using Hooks & Data
+
+Use our hooks to read the session state or fetch data with built-in RLS (Row-Level Security):
+
+```tsx
+import { useUser, useDb } from '@urbackend/react';
+import { useEffect, useState } from 'react';
+
+export default function Dashboard() {
+  const { user, logout } = useUser();
+  const db = useDb();
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    async function fetchProducts() {
+      const data = await db.getAll('products', { limit: 10 });
+      setProducts(data);
+    }
+    fetchProducts();
+  }, [db]);
+
+  return (
+    <div>
+      <h1>Welcome, {user?.name}</h1>
+      <button onClick={logout}>Sign Out</button>
+
+      <h2>Products</h2>
+      <ul>
+        {products.map(p => (
+          <li key={p._id}>{p.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+## Documentation
+
+For full documentation and advanced usage, visit [docs.ub.bitbros.in](https://docs.ub.bitbros.in).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -83,9 +83,76 @@ interface GuestRouteProps {
  */
 declare const GuestRoute: React.FC<GuestRouteProps>;
 
+type AuthProvider = 'google' | 'github';
+type ThemeMode = 'light' | 'dark';
+interface AuthColors {
+    background: string;
+    surface: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    inputBackground: string;
+    primary: string;
+    primaryText: string;
+    footerBackground: string;
+    dividerText: string;
+    socialButtonBackground: string;
+}
+interface AuthBranding {
+    brandName?: string;
+    appName?: string;
+    title?: string;
+    subtitle?: string;
+    logo?: React.ReactNode | string;
+    primaryColor?: string;
+}
+interface AuthLabels {
+    loginTab: string;
+    signupTab: string;
+    loginTitle: string;
+    signupTitle: string;
+    forgotTitle: string;
+    resetTitle: string;
+    loginButton: string;
+    signupButton: string;
+    forgotButton: string;
+    resetButton: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    passwordLabel: string;
+    passwordPlaceholder: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    otpLabel: string;
+    otpPlaceholder: string;
+    forgotPasswordLink: string;
+    socialDivider: string;
+    googleButton: string;
+    githubButton: string;
+    footerSigninPrompt: string;
+    footerSignupPrompt: string;
+    footerForgotPrompt: string;
+    noAuthMethods: string;
+    forgotSubtitle: string;
+    resetSubtitle: string;
+    signInTitle?: string;
+    signUpTitle?: string;
+    signInTab?: string;
+    signUpTab?: string;
+    signInButton?: string;
+    signUpButton?: string;
+}
 interface UrAuthProps {
-    providers?: ('google' | 'github')[];
-    theme?: 'light' | 'dark';
+    providers?: AuthProvider[] | {
+        google?: boolean;
+        github?: boolean;
+        emailPassword?: boolean;
+    };
+    enableEmailPassword?: boolean;
+    theme?: ThemeMode;
+    colors?: Partial<AuthColors>;
+    branding?: AuthBranding;
+    labels?: Partial<AuthLabels>;
     onSuccess?: () => void;
 }
 declare const UrAuth: React.FC<UrAuthProps>;

package/dist/index.d.ts

@@ -83,9 +83,76 @@ interface GuestRouteProps {
  */
 declare const GuestRoute: React.FC<GuestRouteProps>;
 
+type AuthProvider = 'google' | 'github';
+type ThemeMode = 'light' | 'dark';
+interface AuthColors {
+    background: string;
+    surface: string;
+    text: string;
+    textMuted: string;
+    border: string;
+    inputBackground: string;
+    primary: string;
+    primaryText: string;
+    footerBackground: string;
+    dividerText: string;
+    socialButtonBackground: string;
+}
+interface AuthBranding {
+    brandName?: string;
+    appName?: string;
+    title?: string;
+    subtitle?: string;
+    logo?: React.ReactNode | string;
+    primaryColor?: string;
+}
+interface AuthLabels {
+    loginTab: string;
+    signupTab: string;
+    loginTitle: string;
+    signupTitle: string;
+    forgotTitle: string;
+    resetTitle: string;
+    loginButton: string;
+    signupButton: string;
+    forgotButton: string;
+    resetButton: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    passwordLabel: string;
+    passwordPlaceholder: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    otpLabel: string;
+    otpPlaceholder: string;
+    forgotPasswordLink: string;
+    socialDivider: string;
+    googleButton: string;
+    githubButton: string;
+    footerSigninPrompt: string;
+    footerSignupPrompt: string;
+    footerForgotPrompt: string;
+    noAuthMethods: string;
+    forgotSubtitle: string;
+    resetSubtitle: string;
+    signInTitle?: string;
+    signUpTitle?: string;
+    signInTab?: string;
+    signUpTab?: string;
+    signInButton?: string;
+    signUpButton?: string;
+}
 interface UrAuthProps {
-    providers?: ('google' | 'github')[];
-    theme?: 'light' | 'dark';
+    providers?: AuthProvider[] | {
+        google?: boolean;
+        github?: boolean;
+        emailPassword?: boolean;
+    };
+    enableEmailPassword?: boolean;
+    theme?: ThemeMode;
+    colors?: Partial<AuthColors>;
+    branding?: AuthBranding;
+    labels?: Partial<AuthLabels>;
     onSuccess?: () => void;
 }
 declare const UrAuth: React.FC<UrAuthProps>;