Production Authentication

Replace devMode with proper authentication for production.

Why devMode is localhost only

devMode embeds your API key in the HTML—visible to users. It’s blocked on non-localhost origins.

Using the ticketAuth Prop

For production, use the ticketAuth prop with a server-generated ticket:

import { Char } from '@mcp-b/char';

export function CharAgent({ ticketAuth }: { ticketAuth: TicketAuth }) {
  return <Char ticketAuth={ticketAuth} />;
}

Server-Side: Generate the Ticket

// Your API route
const response = await fetch('https://api.usechar.ai/api/auth/ticket', {
  method: 'POST',
  headers: { Authorization: `Bearer ${idToken}` },
});
const ticketAuth = await response.json();

// Pass ticketAuth to your client component

Complete Example

import { useEffect, useState } from 'react';
import { Char, type TicketAuth } from '@mcp-b/char';

export function CharAgent({ idToken }: { idToken: string }) {
  const [ticketAuth, setTicketAuth] = useState<TicketAuth | null>(null);

  useEffect(() => {
    fetch('/api/char-ticket', {
      method: 'POST',
      headers: { Authorization: `Bearer ${idToken}` },
    })
      .then((res) => res.json())
      .then(setTicketAuth);
  }, [idToken]);

  if (!ticketAuth) return null;

  return <Char ticketAuth={ticketAuth} />;
}

Supported Identity Providers

Auth0
Okta
Azure AD
Google
Firebase
Clerk
WorkOS
Custom OIDC

See Identity Providers for setup guides.

Key Takeaways

Never expose API keys in production
Use ticketAuth prop with server-generated tickets
Generate tickets server-side using your user’s ID token
All major IDPs are supported via OIDC

Multi-Step Actions

Deployment Checklist