Private Bot

Connect to a private bot provider that requires an API key. The SDK handles the unauthenticated → needApiKey → authenticated state transitions for you.

Private Bot Authentication

This demo connects to a private bot provider that requires an API key. The chatbot will automatically prompt for the key if the SDK detects an unauthenticated state.

Authentication Flow

• API Key required for access
• Auth state management
• Error handling for unauthorized access

Loading chatbot...

Code Example

import { useState } from "react";
import { Chatbot } from "@asgard-js/react";
import type { AuthState } from "@asgard-js/core";

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

  return (
    <Chatbot
      title="Private Bot"
      config={{
        botProviderEndpoint: "https://...",
        apiKey: authState === "authenticated" ? storedKey : undefined,
      }}
      customChannelId="private-channel"
      authState={authState}
      onApiKeySubmit={async (key) => {
        // Validate the key, then switch state
        setAuthState("authenticated");
      }}
      onAuthError={(error) => {
        if (error.isAuthError) setAuthState("needApiKey");
      }}
    />
  );
}

Auth Flow

Step	AuthState	SDK Behavior
1. Initial	needApiKey	Shows API key input form
2. Submit key	—	Triggers onApiKeySubmit
3. Valid key	authenticated	Establishes SSE connection
4. Invalid key	invalidApiKey	Shows error, allows re-entry

See also the Auth demo for all 7 AuthState values.