@bob/auth-react

A React-specific wrapper around the BobAuth SDK, providing drop-in UI components and an authentication context.

🚀 Quick Start

1. Installation

npm install @bob/auth @bob/auth-react

2. Configure Environment

Set up your application credentials in your .env.local file. These variables are issued by the BobAuth team.

# Issued by BobAuth for your specific application
BOB_AUTH_ID=your_dev_app_id
BOB_AUTH_KEY=your_dev_auth_key

# Use the development URL for local testing
BOB_AUTH_URL=https://cool-dove-824.convex.cloud

[!NOTE] We use the VITE_ prefix here assuming you are using Vite. The BobAuthProvider will accept these values as props.

3. Setup Provider

Wrap your application (or a part of it) with BobAuthProvider.

import { BobAuthProvider } from "@bob/auth-react";

function App() {
  return (
    <BobAuthProvider 
      backendUrl={import.meta.env.BOB_AUTH_URL}
      appId={import.meta.env.BOB_AUTH_ID}
      authKey={import.meta.env.BOB_AUTH_KEY}
    >
      <YourAppContent />
    </BobAuthProvider>
  );
}

4. Use UI Components

Drop in the BobAuthPanel to handle the entire authentication flow (Signup, Signin, Verify, Reset).

import { BobAuthPanel } from "@bob/auth-react";

function LoginPage() {
  return (
    <div className="login-container">
      <BobAuthPanel 
        onAuthenticated={(token, user) => {
          console.log("Welcome back!", user.firstName);
        }}
      />
    </div>
  );
}

🛠️ Components

<BobAuthProvider />

The context provider that manages the BobAuthClient instance and authentication state.

| Prop | Type | Description | | --- | --- | --- | | backendUrl | string | The URL of the BobAuth Convex backend. | | appId | string (optional) | Your application ID for automatic sign-in. | | authKey | string (optional) | Your application secret key. Do not expose in production. |

<BobAuthPanel />

A "master" component that switches between different auth views: sign-in, sign-up, email verification, and password reset.

🛡️ Security Note

For production applications, it is recommended to perform the application sign-in (authKey) on the server-side to avoid exposing your secret key in the browser. The BobAuthProvider supports passing an appToken directly if you have one.