Banata

Start Here

Project Structure

The files and packages you add to your app to integrate with Banata Auth, and what Banata manages for you.

Integrating Banata Auth into your app requires only a handful of files. This page shows you what goes where, and clarifies the boundary between your app and Banata.

What You Add to Your App

A typical Banata integration adds these files to your Next.js project:

text
src/
├── app/
│   ├── api/auth/[...all]/route.ts   ← Auth route proxy
│   ├── sign-in/page.tsx              ← Sign-in page
│   ├── sign-up/page.tsx              ← Sign-up page
│   └── page.tsx                      ← Your app (protected pages)
└── lib/
    ├── auth-server.ts                ← Server-side Banata connection
    └── auth-client.ts                ← Browser-side auth client

And these packages:

PackagePurpose
@banata-auth/nextjsAuth route proxy and server-side helpers (handler, isAuthenticated, etc.)
@banata-auth/reactPre-built UI components (SignInForm, SignUpForm) and hooks (useUser, useSession)
@banata-auth/sdkAdmin SDK for programmatic access to users, orgs, roles, and config (optional)

That's the full integration surface. Everything else in your project is normal application code.

What Banata Manages

Banata owns the auth backend and all the data associated with it. Per project, Banata manages:

  • Users, sessions, and credentials
  • Social accounts and OAuth tokens
  • Organizations, members, and invitations
  • Roles, permissions, and resource types
  • Auth method configuration and provider credentials
  • Email templates and delivery
  • Branding and redirect settings
  • Audit logs, webhooks, SSO connections, and SCIM directories

You configure all of this through the Banata dashboard (or the SDK). Your app doesn't need a local auth database or a local auth runtime.

What You Don't Need

When using Banata Auth (hosted or self-hosted), your app does not need:

  • A local auth database or user table
  • A local Better Auth runtime
  • A convex/banataAuth directory inside your app
  • Direct access to Banata's database

Those components are part of the Banata platform itself, not something each customer app includes.

File Reference

src/lib/auth-server.ts

Initializes the server-side connection to Banata. This is where you pass your API key.

ts
import { createBanataAuthServer } from "@banata-auth/nextjs/server";
 
export const {
  handler,
  isAuthenticated,
  getToken,
  preloadAuthQuery,
  fetchAuthQuery,
  fetchAuthMutation,
  fetchAuthAction,
} = createBanataAuthServer({
  apiKey: process.env.BANATA_API_KEY!,
  authUrl: process.env.BANATA_AUTH_URL,
});

src/lib/auth-client.ts

Creates the browser-side auth client that your React components use.

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

src/app/api/auth/[...all]/route.ts

Catch-all route that proxies auth requests from your app to Banata.

ts
import { handler } from "@/lib/auth-server";
 
export const { GET, POST, PUT, PATCH, DELETE, OPTIONS } = handler;

Next Steps