useStream() requiring a secret as input

[nelsonwhyu]

langgraph/libs/sdk-js/src/react/stream.tsx

Line 634 in 316f841

apiKey: options.apiKey,

@dqbd , thanks for the great work! I was trying to leverage useStream() in a next js project. It is a client side component but requires apiKey as input. For me, apiKey is a secret that i prefer not exposed to browser. (In Next JS i struggle to have the useStream takes in apiKey from .env because its a client component)

I did some research and seems it's recommended to have useStream() accept a fetcher as input, where the fetcher calls the server side to instantiate Client from @langchain/langgraph-sdk and retrieve streaming responses from langgraph.

Wondering if you know a better approach to leverage the useStream() while keeping the apiKey secured?

Thanks!

[brilliantstory2]

How did you named variable in .env?
Did you try prefix NEXT_PUBLIC_?
for example NEXT_PUBLIC_API_KEY="apikey"

[nelsonwhyu]

@brilliantstory2 Thanks for looking at this! I believe prefixing env var with NEXT_PUBLIC_ will run, but that means making the secret available to browser. In cases where I may use my chatbot to service multiple users that may not be ideal.

Was almost going to implement an alternative that have the hook call a server side endpoint that initiates Client and streaming response from server side. But then i ran into this https://blog.langchain.dev/custom-authentication-and-access-control-in-langgraph/ and it looks like custom auth may be the way to go for my case. My langgraph server was built in JS/TS though, so may have to wait a bit.

[dqbd]

Custom auth for JS is on our roadmap, in the meantime you can use https://github.com/bracesproul/langgraph-nextjs-api-passthrough to act as a middleware between client and LangGraph API (cc @bracesproul)

[nelsonwhyu]

@dqbd That's awesome! Thanks a lot!

[amitchaudharyc]

@dqbd Hey, is this solved? I am trying to pass session-token in new Client() to receive it in graph, but somehow useStream() doesn't work. So could you please guide me. My main goal is that I have NextJS app and I have session token. I just want to carry forward that in header so that I can use it tool calls.