Generative UI custom authentication

*Im working on generative UI using langraph server and langrpah sdk.

  • SDK not including bearer token for frontend javascript assets like entrypoint.css, entrypoint.js.
SDK Client creation

import { Client } from '@langchain/langgraph-sdk';
import { env } from '~/env';

export function createClient({ auth_token }: { auth_token: string }) {
  const client = new Client({
    apiUrl: env.NEXT_PUBLIC_LANGGRAPH_API_URL,
    defaultHeaders: { Authorization: `Bearer ${auth_token}` },
  });
  return client;
}
useStream initialisation

  const streamValue = useTypedStream({
    apiUrl,
    defaultHeaders: {
      "authorization": jwtToken
    },
    assistantId,
    threadId: threadId ?? null,
    onFinish(state) {
      if (state.values.promptSuggestions) {
        setPromptSuggestions(state.values.promptSuggestions);
      }
    },
    onCustomEvent: (event, options) => {
      if (isUIMessage(event) || isRemoveUIMessage(event)) {
        options.mutate((prev) => {
          const ui = uiMessageReducer(prev.ui ?? [], event);
          return { ...prev, ui };
        });
      }
    },
    onThreadId: (id) => {
      setThreadId(id);
      // Refetch threads list when thread ID changes.
      // Wait for some seconds before fetching so we're able to get the new thread that was created.
      sleep().then(() => refetch());
    },
  });