Authentication States

The SDK exposes an authState prop that renders different UI for each phase of the authentication flow. Use it alongside onApiKeySubmit to validate an API key asynchronously.

Auth State

Loading chatbot...

Supported States

State	UI Behavior
authenticated	Normal chat interface
needApiKey	Prompt the user to enter an API key
invalidApiKey	Error state with retry affordance
loading	Spinner while auth is being determined
error	Generic error UI
subscriptionExpired	Blocking notice with upgrade CTA
botNotFound	Blocking notice when the bot provider 404s

Code Example

const [authState, setAuthState] = useState<AuthState>("needApiKey");

<Chatbot
  authState={authState}
  onApiKeySubmit={async (key) => {
    const valid = await validate(key);
    setAuthState(valid ? "authenticated" : "invalidApiKey");
  }}
  {...rest}
/>;