Banata

Platform Operators

Hosted Sign-In

Let Banata render the auth UI for you. Your app links to a hosted sign-in page, the user authenticates, and Banata redirects them back.

Hosted sign-in is an alternative integration path where Banata renders the authentication UI on your behalf. Instead of building sign-in and sign-up pages in your own app, you link users to a Banata-hosted page that handles the entire auth flow and redirects them back when they're done.

This is a good fit when you want to get auth working quickly without designing your own UI, or when you prefer to keep auth screens outside your app entirely.

How It Works

  1. Your app links the user to Banata's hosted sign-in page, passing your project's client_id as a query parameter.
  2. Banata renders the sign-in UI with the auth methods and providers you've configured for the project.
  3. The user authenticates on the Banata domain.
  4. Banata redirects back to your app's callback URL.
  5. Your app finalizes the session on its own domain.

Prerequisites

The hosted UI reflects the configuration already saved for your project. Before you test it, make sure you've completed the following in the Banata dashboard:

  1. Enable at least one auth method — go to Authentication > Methods and turn on the methods you want to appear on the hosted page.
  2. Add provider credentials — if you enabled social OAuth, configure your provider credentials under Authentication > Providers.
  3. Set up email delivery — if you're using email-based flows (email & password, magic links, OTP), configure an email provider under Emails > Providers.
  4. Configure branding (optional) — update your project's branding settings so the hosted pages match your product's look and feel.

App Requirements

Even though Banata handles the UI, your app still needs a few things in place:

Proxy Route

Set up the /api/auth/[...all] proxy route in your app. This is the same route used by the primary SDK integration and is required for session management.

API Key

Your server must have a valid project-scoped API key. Create one in the dashboard under API Keys and store it as an environment variable. See the API Keys guide for details.

Callback Handling

Your app needs a /auth/callback route that receives the redirect from Banata after the user authenticates. If this route is missing or misconfigured, the hosted flow will complete successfully on the Banata side but the user won't have a valid session in your app.

Make sure your auth route also exports the OPTIONS handler and allows the hosted UI origin for CORS.

Branding

The hosted UI uses the same project configuration as the dashboard and the SDK. That means:

  • Branding changes you make in the dashboard are automatically reflected on the hosted pages.
  • Configuration updates from the SDK are also reflected.
  • There is no separate theme file to maintain for hosted auth.

Troubleshooting

The hosted page loads but shows no sign-in options

Your project is missing auth configuration. Check Authentication > Methods to confirm at least one method is enabled, and check Authentication > Providers to confirm credentials are configured for any social providers you've turned on.

The hosted flow completes but the user is still unauthenticated

Check the following:

  1. Your app has a /auth/callback route that handles the redirect.
  2. Your auth route exports the OPTIONS handler.
  3. Your auth route allows the hosted UI origin in its CORS configuration.
  4. Your app is using a valid project-scoped API key (not a workspace slug or other identifier).

Rate limit exceeded

Banata rate-limits sensitive auth endpoints per project, IP, path, and (for email-based flows) the submitted identifier. If you're hitting rate limits during development:

  1. Wait for the retry window to expire.
  2. Use a different email address if you're testing sign-up.
  3. Avoid repeatedly submitting the same form while iterating.

The hosted page returns the wrong project

Verify that the client_id parameter is set to the project's client ID from the Banata dashboard. This is not the workspace slug or workspace name — it's the ID shown on the project's settings page.

Next Steps

  • Quick Start — set up the primary app-owned auth integration with @banata-auth/nextjs
  • API Keys — create and manage the keys that connect your app to a project
  • Auth Configuration — configure the auth methods and providers that appear in the hosted UI
  • Email Templates — customize the emails sent during email-based auth flows
  • Deploy — go live with your Banata-powered app