Banata

Build Your App

React

Pre-built sign-in and sign-up forms, auth provider, hooks for user and session state, and organization helpers.

@banata-auth/react provides UI components and hooks for building auth flows in your React application. Use it alongside @banata-auth/nextjs to get a complete client + server integration.

bash
npm install @banata-auth/react

Package Exports

Import pathWhat it provides
@banata-auth/reactUI components (SignInForm, SignUpForm, SocialButtons, AuthCard), provider, and hooks
@banata-auth/react/pluginscreateAuthClient and client plugins (e.g., organizationClient)
@banata-auth/react/convexConvex provider bridge for apps that use both Banata Auth and Convex

Browser Auth Client

Before using any components or hooks, create a browser auth client. This client talks to your app's /api/auth route:

ts
// src/lib/auth-client.ts
"use client";
 
import { createAuthClient } from "@banata-auth/react/plugins";
 
export const authClient = createAuthClient({
  baseURL: "/api/auth",
});

Pre-Built Forms

SignInForm

A complete sign-in form that supports all enabled auth methods:

tsx
"use client";
 
import Link from "next/link";
import { SignInForm } from "@banata-auth/react";
import { authClient } from "@/lib/auth-client";
 
export default function SignInPage() {
  return (
    <SignInForm
      authClient={authClient}
      callbackURL="/"
      title="Sign in"
      description="Welcome back!"
      footer={<Link href="/sign-up">Create an account</Link>}
    />
  );
}

SignUpForm

tsx
"use client";
 
import Link from "next/link";
import { SignUpForm } from "@banata-auth/react";
import { authClient } from "@/lib/auth-client";
 
export default function SignUpPage() {
  return (
    <SignUpForm
      authClient={authClient}
      callbackURL="/"
      title="Create account"
      footer={<Link href="/sign-in">Already have an account?</Link>}
    />
  );
}

SocialButtons

Render social login buttons for specific providers:

tsx
import { SocialButtons } from "@banata-auth/react";
import { authClient } from "@/lib/auth-client";
 
const providers = [
  { id: "google", label: "Google" },
  { id: "github", label: "GitHub" },
];
 
<SocialButtons
  providers={providers}
  authClient={authClient}
  callbackURL="/dashboard"
/>

Each provider object accepts:

PropertyTypeDescription
idstringProvider identifier: "google", "github", "apple", etc.
labelstringDisplay text for the button
iconReactNodeOptional custom icon

Auth Provider and Hooks

To access auth state in client components throughout your app, wrap your layout with BanataAuthProvider:

tsx
// src/components/auth-provider.tsx
"use client";
 
import { BanataAuthProvider } from "@banata-auth/react";
 
const adapter = {
  fetchSession: async () => {
    const response = await fetch("/api/auth/get-session");
    if (!response.ok) return null;
    return response.json();
  },
  signOut: async () => {
    await fetch("/api/auth/sign-out", { method: "POST" });
  },
};
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  return (
    <BanataAuthProvider adapter={adapter}>
      {children}
    </BanataAuthProvider>
  );
}

Then use the provided hooks in any client component:

useUser()

Get the current user and auth status:

tsx
import { useUser } from "@banata-auth/react";
 
function ProfileButton() {
  const { user, isLoading, signOut } = useUser();
 
  if (isLoading) return <span>Loading...</span>;
  if (!user) return <a href="/sign-in">Sign in</a>;
 
  return (
    <div>
      <span>{user.name}</span>
      <button onClick={signOut}>Sign out</button>
    </div>
  );
}

useSession()

Access the raw session data:

tsx
import { useSession } from "@banata-auth/react";
 
function SessionInfo() {
  const { session, isLoading } = useSession();
 
  if (!session) return null;
  return <span>Session expires: {session.expiresAt}</span>;
}

useOrganization()

Get the active organization:

tsx
import { useOrganization } from "@banata-auth/react";
 
function OrgHeader() {
  const { organization, isLoading } = useOrganization();
 
  if (!organization) return <span>No organization selected</span>;
  return <h2>{organization.name}</h2>;
}

useBanataAuth()

Access the full auth context:

tsx
import { useBanataAuth } from "@banata-auth/react";
 
const { user, session, organization, isLoading } = useBanataAuth();

Organization Client Plugin

If your app uses organizations with custom roles, add the organizationClient plugin to support your project's role catalog:

ts
import { createAuthClient, organizationClient } from "@banata-auth/react/plugins";
 
export const authClient = createAuthClient({
  baseURL: "/api/auth",
  plugins: [organizationClient()],
});

This lets you use authClient.organization.* methods for creating organizations, managing members, sending invitations, and switching the active organization.

Convex Bridge

If your app uses Convex for data alongside Banata for auth, use BanataConvexProvider to bridge auth tokens into your Convex client:

tsx
import { BanataConvexProvider } from "@banata-auth/react/convex";

This is a frontend integration detail — it passes the Banata auth token to Convex so your Convex queries can verify the user's identity.

Next Steps