feat: adds JS Token Vault + CIBA renaming updates

Author: priley86

auth4genai/integrations/github.mdx

@@ -83,7 +83,7 @@ To configure the Token Vault for your GitHub connection, you can use the followi
     ```tsx wrap lines
     const auth0AI = new Auth0AI();
 
-    export const withGitHubConnection = auth0AI.withTokenForConnection({
+    export const withGitHubConnection = auth0AI.withTokenVault({
       connection: "github",
       // scopes are not supported for GitHub yet. Set required scopes when creating the accompanying GitHub app
       scopes: [],

auth4genai/integrations/google.mdx

@@ -150,7 +150,7 @@ To configure the Token Vault for your Google connection, you can use the followi
     ```tsx wrap lines
     const auth0AI = new Auth0AI();
 
-    export const withGoogleConnection = auth0AI.withTokenForConnection({
+    export const withGoogleConnection = auth0AI.withTokenVault({
       connection: "google-oauth2",
       scopes: ["https://www.googleapis.com/auth/calendar.freebusy", ...],
       refreshToken: getAuth0RefreshToken(),

auth4genai/integrations/slack.mdx

@@ -84,7 +84,7 @@ To configure the Token Vault for your GitHub connection, you can use the followi
     ```tsx wrap lines
     const auth0AI = new Auth0AI();
 
-    export const withSlackConnection = auth0AI.withTokenForConnection({
+    export const withSlackConnection = auth0AI.withTokenVault({
       connection: "sign-in-with-slack",
       scopes: ["channels:read", ...],
       refreshToken: getAuth0RefreshToken(),

auth4genai/intro/call-others-apis-on-users-behalf.mdx

@@ -1,6 +1,6 @@
 ---
 title: Call Other's APIs on User's Behalf
-description: "[Token Vault](/intro/token-vault) lets your AI agent call external APIs on the user's behalf. We provide SDKs for Python, JavaScript, and popular AI frameworks like LangChain, LlamaIndex, Genkit, and Vercel AI, making it easy and straightforward to get access tokens for your federated connections."
+description: "[Token Vault](/intro/token-vault) lets your AI agent call external APIs on the user's behalf. We provide SDKs for Python, JavaScript, and popular AI frameworks like LangChain, LlamaIndex, Genkit, and Vercel AI, making it easy and straightforward to get access tokens for your third-party connections."
 ---
 
 ## Web applications with backend for frontend
@@ -135,4 +135,4 @@ To begin using Auth0 Token Vault with your AI agents, refer to the following res
     icon="key"
     horizontal
   />
-</Columns>
+</Columns>

auth4genai/intro/token-vault.mdx

@@ -47,9 +47,9 @@ By using Token Vault, you can:
 The process of using Token Vault involves the following key steps:
 
 1. **User authentication and consent:** The [user links](/intro/account-linking) and authenticates with an external Identity Provider (e.g., Google) and grants your application permission to access their data by approving the requested OAuth scopes.
-2. **Secure token storage:** Auth0 receives the federated access and refresh tokens from the external provider and stores them securely within Token Vault.
-3. **Token exchange:** Your application can then exchange a valid Auth0 refresh token for a federated access token from Token Vault. This allows your application to obtain the necessary credentials to call the third-party API without the user having to re-authenticate. It also means your application does not need to store or manage any credentials.
-4. **API call:** With the federated access token, your AI agent can make authorized calls to the third-party API on the user's behalf.
+2. **Secure token storage:** Auth0 receives access and refresh tokens from the external provider and stores them securely within Token Vault.
+3. **Token exchange:** Your application can then exchange a valid Auth0 refresh token for a third-party access token from Token Vault. This allows your application to obtain the necessary credentials to call the third-party API without the user having to re-authenticate. It also means your application does not need to store or manage any credentials.
+4. **API call:** With the third-party access token, your AI agent can make authorized calls to the third-party API on the user's behalf.
 
 ## Supported integrations
 

auth4genai/sdks/javascript-sdk.mdx

@@ -63,7 +63,7 @@ This library helps to set up the React components that can be used in AI applica
 - Tools for getting access tokens for supported social and enterprise identity providers
 
 ```bash wrap lines
-npx @auth0/ai-components add FederatedConnections
+npx @auth0/ai-components add TokenVault
 ```
 
 ### [Redis Store for Auth0 AI](https://github.com/auth0-lab/auth0-ai-js/tree/main/packages/ai-redis)

auth4genai/snippets/get-started/langchain-fastapi-py/async-auth.mdx

@@ -147,7 +147,7 @@ async def api_route(
 
 #### Create a tool to call your API
 
-In this example, we use a tool that buys products on the user's behalf. When the user approves the transaction, the Auth0 AI SDK retrieves an access token to call the shop's API. Upon completing the CIBA flow, the AI agent responds with a message confirming the purchase. The Auth0 AI SDK returns an error response if the user denies the transaction.
+In this example, we use a tool that buys products on the user's behalf. When the user approves the transaction, the Auth0 AI SDK retrieves an access token to call the shop's API. Upon completing the Async Authorization flow, the AI agent responds with a message confirming the purchase. The Auth0 AI SDK returns an error response if the user denies the transaction.
 
 Now, create a file `app/agents/tools/shop_online.py` and add the following code:
 

auth4genai/snippets/get-started/langchain-fastapi-py/call-others-api.mdx

@@ -256,7 +256,7 @@ async def list_upcoming_events_fn():
     google_access_token = get_access_token_from_token_vault()
     if not google_access_token:
         raise ValueError(
-            "Authorization required to access the Federated Connection API"
+            "Authorization required to access the Token Vault connection API"
         )
 
     calendar_service = build(

auth4genai/snippets/get-started/langchain-next-js/async-auth.mdx

@@ -36,7 +36,7 @@ Integrate the Auth0 AI SDK into your application to secure your async AI agent w
 
 #### Configure the Auth0 AI SDK
 
-To require asynchronous authorization for your tool, the tool needs to be wrapped with the Async authorizer, `withAsyncUserConfirmation()`. Let's create a helper function to wrap the tool with the Async authorizer.
+To require asynchronous authorization for your tool, the tool needs to be wrapped with the Async authorizer, `withAsyncAuthorization()`. Let's create a helper function to wrap the tool with the Async authorizer.
 
 Create a file at `src/lib/auth0-ai.ts` and instantiate a new Auth0 AI SDK client:
 
@@ -46,8 +46,8 @@ import { AccessDeniedInterrupt } from "@auth0/ai/interrupts";
 
 const auth0AI = new Auth0AI();
 
-// CIBA flow for user confirmation
-export const withAsyncAuthorization = auth0AI.withAsyncUserConfirmation({
+// Async Authorization flow for user confirmation
+export const withAsyncAuthorization = auth0AI.withAsyncAuthorization({
   userID: async (_params, config) => {
     return config.configurable?.langgraph_auth_user?.sub;
   },
@@ -76,9 +76,9 @@ export const withAsyncAuthorization = auth0AI.withAsyncUserConfirmation({
 });
 ```
 
-This will intercept the tool call to initiate a CIBA request:
+This will intercept the tool call to initiate a Async Authorization request:
 
-- The CIBA request includes the user ID that will approve the request.
+- The Async Authorization request includes the user ID that will approve the request.
 - Auth0 sends the user a mobile push notification. The AI agent polls the `/token` endpoint for a user response.
 - The mobile application retrieves the `bindingMessage` containing the consent details, in this case, the details of the product to purchase.
 - The user responds to the request:
@@ -241,15 +241,15 @@ export { auth as authHandler };
 
 #### Create a tool to call your API
 
-In this example, we use a tool that buys products on the user's behalf. When the user approves the transaction, the Auth0 AI SDK retrieves an access token to call the shop's API. Upon completing the CIBA flow, the AI agent responds with a message confirming the purchase. The Auth0 AI SDK returns an error response if the user denies the transaction.
+In this example, we use a tool that buys products on the user's behalf. When the user approves the transaction, the Auth0 AI SDK retrieves an access token to call the shop's API. Upon completing the Async Authorization flow, the AI agent responds with a message confirming the purchase. The Auth0 AI SDK returns an error response if the user denies the transaction.
 
 Now, create a file `src/lib/tools/shop-online.ts` and add the following code:
 
 ```ts src/lib/tools/shop-online.ts wrap lines
 import { tool } from "@langchain/core/tools";
 import { z } from "zod";
 
-import { getCIBACredentials } from "@auth0/ai-langchain";
+import { getAsyncAuthorizationCredentials } from "@auth0/ai-langchain";
 
 export const shopOnlineTool = tool(
   async ({ product, qty, priceLimit }) => {
@@ -272,7 +272,7 @@ export const shopOnlineTool = tool(
       priceLimit,
     };
 
-    const credentials = getCIBACredentials();
+    const credentials = getAsyncAuthorizationCredentials();
     const accessToken = credentials?.accessToken;
 
     if (accessToken) {

auth4genai/snippets/get-started/langchain-next-js/call-others-api.mdx

@@ -149,7 +149,7 @@ const auth0AI = new Auth0AI({
 });
 
 const withAccessTokenForConnection = (connection: string, scopes: string[]) =>
-  auth0AI.withTokenForConnection({
+  auth0AI.withTokenVault({
     connection,
     scopes,
     accessToken: async (_, config) => {
@@ -321,15 +321,15 @@ This example uses `GmailSearch` from the `@langchain/community` tools. This tool
 
 ```ts src/lib/tools/gmail-seatch.ts wrap lines highlight={10}
 //...
-import { getAccessTokenForConnection } from "@auth0/ai-langchain";
+import { getAccessTokenFromTokenVault } from "@auth0/ai-langchain";
 import { GmailSearch } from "@langchain/community/tools/gmail";
 
 import { withGmailSearch } from "../../lib/auth0-ai";
 
 export const gmailSearchTool = withGmailSearch(
   new GmailSearch({
     credentials: {
-      accessToken: async () => getAccessTokenForConnection(),
+      accessToken: async () => getAccessTokenFromTokenVault(),
     },
   })
 );
@@ -365,36 +365,36 @@ When you try to use the tool, the application requests any additional Google sco
 To implement, install the Auth0 AI Components for Next.js SDK to get the required UI components:
 
 ```bash wrap lines
-npx @auth0/ai-components add FederatedConnections
+npx @auth0/ai-components add TokenVault
 ```
 
-Add a new file, `src/components/auth0-ai/FederatedConnections/FederatedConnectionInterruptHandler.tsx`, with the following code:
+Add a new file, `src/components/auth0-ai/TokenVault/TokenVaultInterruptHandler.tsx`, with the following code:
 
-```tsx src/components/auth0-ai/FederatedConnections/FederatedConnectionInterruptHandler.tsx wrap lines
-import { FederatedConnectionInterrupt } from "@auth0/ai/interrupts";
+```tsx src/components/auth0-ai/TokenVault/TokenVaultInterruptHandler.tsx wrap lines
+import { TokenVaultInterrupt } from "@auth0/ai/interrupts";
 import type { Interrupt } from "@langchain/langgraph-sdk";
 
-import { EnsureAPIAccess } from "@/components/auth0-ai/FederatedConnections";
+import { TokenVaultConsent } from "@/components/auth0-ai/TokenVault";
 
-interface FederatedConnectionInterruptHandlerProps {
+interface TokenVaultInterruptHandlerProps {
   interrupt: Interrupt | undefined | null;
   onFinish: () => void;
 }
 
-export function FederatedConnectionInterruptHandler({
+export function TokenVaultInterruptHandler({
   interrupt,
   onFinish,
-}: FederatedConnectionInterruptHandlerProps) {
+}: TokenVaultInterruptHandlerProps) {
   if (
     !interrupt ||
-    !FederatedConnectionInterrupt.isInterrupt(interrupt.value)
+    !TokenVaultInterrupt.isInterrupt(interrupt.value)
   ) {
     return null;
   }
 
   return (
     <div key={interrupt.ns?.join("")} className="whitespace-pre-wrap">
-      <EnsureAPIAccess
+      <TokenVaultConsent
         mode="popup"
         interrupt={interrupt.value}
         onFinish={onFinish}
@@ -409,11 +409,11 @@ export function FederatedConnectionInterruptHandler({
 }
 ```
 
-Now, update your chat window code to include the `FederatedConnectionInterruptHandler` component, for example:
+Now, update your chat window code to include the `TokenVaultInterruptHandler` component, for example:
 
 ```tsx src/components/chat-window.tsx wrap lines highlight={2,3,8-19,36-38}
 //...
-import { FederatedConnectionInterruptHandler } from '@/components/auth0-ai/FederatedConnections/FederatedConnectionInterruptHandler';
+import { TokenVaultInterruptHandler } from '@/components/auth0-ai/TokenVault/TokenVaultInterruptHandler';
 
 //... existing code
 export function ChatWindow(props: {
@@ -448,7 +448,7 @@ export function ChatWindow(props: {
                 emptyStateComponent={props.emptyStateComponent}
               />
               <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
-                <FederatedConnectionInterruptHandler interrupt={chat.interrupt} onFinish={() => chat.submit(null)} />
+                <TokenVaultInterruptHandler interrupt={chat.interrupt} onFinish={() => chat.submit(null)} />
               </div>
             </>
           )