Skip to main content
Auth0 が安全に発行したアクセストークンを使用して、AI agent が認証済みユーザーに代わって API を呼び出せるようにします。API には、Auth0 で構成済みの任意の API を使用できます。 このクイックスタートを終えると、Auth0 と統合された、次の機能を備えた AI アプリケーションが完成します。
  • Auth0 のアクセストークンを取得する。
  • Auth0 のアクセストークンを使用して、API エンドポイント (ここでは Auth0 の /userinfo エンドポイント) に対してツール呼び出しを行う。
  • AI agent を介してユーザーにデータを返す。

技術スタックを選択する

Download sample app

Start by downloading and extracting the sample app. Then open in your preferred IDE.

Install dependencies

In the root directory of your project, install the following dependencies:
  • @langchain/langgraph: The core LangGraph module.
  • @langchain/openai: OpenAI provider for LangChain.
  • langchain: The core LangChain module.
  • zod: TypeScript-first schema validation library.
  • langgraph-nextjs-api-passthrough: API passthrough for LangGraph.

Update the environment file

Copy the .env.example file to .env.local and update the variables with your Auth0 credentials. You can find your Auth0 domain, client ID, and client secret in the application you created in the Auth0 Dashboard.

Pass credentials to the agent

You have to pass the access token from the user’s session to the agent. First, create a helper function to get the access token from the session. Add the following function to src/lib/auth0.ts:
src/lib/auth0.ts
Now, update the /src/app/api/chat/[..._path]/route.ts file to pass the access token to the agent:
src/app/api/chat/[..._path]/route.ts

Add Custom Authentication

For more information on how to add custom authentication for your LangGraph Platform application, read the Custom Auth guide.
In your langgraph.json, add the path to your auth file:
langgraph.json
Then, in your auth.ts file, add your auth logic:
src/lib/auth.ts

Define a tool to call your API

In this step, you’ll create a LangChain tool to make the first-party API call. The tool fetches an access token to call the API.In this example, after taking in an Auth0 access token during user login, the tool returns the user profile of the currently logged-in user by calling the /userinfo endpoint.
src/lib/tools/user-info.ts

Add the tool to the AI agent

The AI agent processes and runs the user’s request through the AI pipeline, including the tool call. Update the src/lib/agent.ts file to add the tool to the agent.
src/lib/agent.ts
You need an API Key from OpenAI or another provider to use an LLM. Add that API key to your .env.local file:
.env.local
If you use another provider for your LLM, adjust the variable name in .env.local accordingly.

Test your application

To test the application, run npm run all:dev and navigate to http://localhost:3000.
This will open the LangGraph Studio in a new tab. You can close it as we won’t require it for testing the application.
To interact with the AI agent, you can ask questions like "who am I?" to trigger the tool call and test whether it successfully retrieves information about the logged-in user.
That’s it! You’ve successfully integrated first-party tool-calling into your project.Explore the example app on GitHub.

次のステップ