feat: add support for connected accounts

py-langchain/README.md

@@ -35,7 +35,7 @@ Next, you'll need to set up environment variables in your repo's `.env` file. Co
 To start with the basic examples, you'll just need to add your OpenAI API key and Auth0 credentials.
 
 - To start with the examples, you'll just need to add your OpenAI API key and Auth0 credentials for the Web app.
-  - You can setup a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/call-others-apis-on-users-behalf).
+  - You can set up a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/get-started/call-others-apis-on-users-behalf).
   - An Auth0 FGA account, you can create one [here](https://dashboard.fga.dev). Add the FGA store ID, client ID, client secret, and API URL to the `.env` file.
 
 Next, install the required packages using your preferred package manager, e.g. uv:

py-langchain/backend/README.md

@@ -9,7 +9,7 @@ You'll need to set up environment variables in your repo's `.env` file. Copy the
 To start with the basic examples, you'll just need to add your OpenAI API key and Auth0 credentials.
 
 - To start with the examples, you'll just need to add your OpenAI API key and Auth0 credentials for the Web app.
-  - You can setup a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/call-others-apis-on-users-behalf).
+  - You can set up a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/get-started/call-others-apis-on-users-behalf).
   - An Auth0 FGA account, you can create one [here](https://dashboard.fga.dev). Add the FGA store ID, client ID, client secret, and API URL to the `.env` file.
 
 Next, install the required packages using your preferred package manager, e.g. uv:

py-langchain/frontend/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@auth0/ai": "^5.0.1",
+    "@auth0/ai": "^5.1.1",
     "@langchain/core": "^0.3.66",
     "@langchain/langgraph-sdk": "^0.0.109",
     "@radix-ui/react-avatar": "^1.1.10",

py-langchain/frontend/src/components/auth0-ai/TokenVault/TokenVaultAuthProps.tsx

@@ -2,7 +2,8 @@
 import type { ReactNode } from "react";
 
 /**
- * Defines the mode the EnsureAPIAccess component will use to prompt the user to authorize the API access.
+ * Defines the mode the TokenVaultConsent component will use to prompt the user to connect a third-party account and
+ * authorize the API access.
  * - `redirect` will redirect the user to the provider's authorization page.
  * - `popup` will open a popup window to prompt the user to authorize the API access.
  * - `auto` will automatically choose the best mode based on the user's device and browser.
@@ -13,10 +14,11 @@ export type TokenVaultAuthProps = {
   interrupt: {
     connection: string;
     requiredScopes: string[];
+    authorizationParams?: Record<string, string>;
     resume?: () => void;
   };
   auth?: {
-    authorizePath?: string;
+    connectPath?: string;
     returnTo?: string;
   };
   onFinish?: () => void;

py-langchain/frontend/src/components/auth0-ai/TokenVault/index.tsx

@@ -1,8 +1,8 @@
 import { BrowserView, MobileView } from "react-device-detect";
 
-import type { TokenVaultAuthProps } from "./TokenVaultAuthProps";
 import { TokenVaultConsentPopup } from "./popup";
 import { TokenVaultConsentRedirect } from "./redirect";
+import type { TokenVaultAuthProps } from "./TokenVaultAuthProps";
 
 export function TokenVaultConsent(props: TokenVaultAuthProps) {
   const { mode } = props;

py-langchain/frontend/src/components/auth0-ai/TokenVault/popup.tsx

@@ -4,12 +4,13 @@ import { useCallback, useEffect, useState } from "react";
 
 import { WaitingMessage } from "../util/loader";
 import { PromptUserContainer } from "../util/prompt-user-container";
+
 import type { TokenVaultAuthProps } from "./TokenVaultAuthProps";
 
 export function TokenVaultConsentPopup({
-  interrupt: { connection, requiredScopes, resume },
+  interrupt: { connection, requiredScopes, authorizationParams, resume },
   connectWidget: { icon, title, description, action, containerClassName },
-  auth: { authorizePath = "/auth/login", returnTo = "/close" } = {},
+  auth: { connectPath = "/auth/connect", returnTo = "/close" } = {},
   onFinish,
 }: TokenVaultAuthProps) {
   const [isLoading, setIsLoading] = useState(false);
@@ -43,14 +44,17 @@ export function TokenVaultConsentPopup({
   //Open the login popup
   const startLoginPopup = useCallback(async () => {
     const search = new URLSearchParams({
-      returnTo,
       connection,
-      access_type: "offline",
-      prompt: "consent",
-      connection_scope: requiredScopes.join(),
+      returnTo,
+      // Add all extra authorization parameters to the search params, they will be collected and submitted via the
+      // authorization_params parameter of the connect account flow.
+      ...authorizationParams,
     });
+    for (const requiredScope of requiredScopes) {
+      search.append("scopes", requiredScope);
+    }
 
-    const url = new URL(authorizePath, window.location.origin);
+    const url = new URL(connectPath, window.location.origin);
     url.search = search.toString();
 
     const windowFeatures =
@@ -63,7 +67,7 @@ export function TokenVaultConsentPopup({
       setLoginPopup(popup);
       setIsLoading(true);
     }
-  }, [connection, requiredScopes, returnTo, authorizePath]);
+  }, [connection, requiredScopes, returnTo, authorizationParams, connectPath]);
 
   if (isLoading) {
     return <WaitingMessage />;

py-langchain/frontend/src/components/auth0-ai/TokenVault/redirect.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { PromptUserContainer } from "../util/prompt-user-container";
+
 import type { TokenVaultAuthProps } from "./TokenVaultAuthProps";
 
 export function TokenVaultConsentRedirect({
-  interrupt: { requiredScopes, connection },
+  interrupt: { connection, requiredScopes, authorizationParams },
   connectWidget: { icon, title, description, action, containerClassName },
   auth: {
-    authorizePath = "/auth/login",
+    connectPath = "/auth/connect",
     returnTo = window.location.pathname,
   } = {},
 }: TokenVaultAuthProps) {
@@ -21,13 +22,17 @@ export function TokenVaultConsentRedirect({
         label: action?.label ?? "Connect",
         onClick: () => {
           const search = new URLSearchParams({
-            returnTo,
             connection,
-            access_type: "offline",
-            connection_scope: requiredScopes.join(),
+            returnTo,
+            // Add all extra authorization parameters to the search params, they will be collected and submitted via the
+            // authorization_params parameter of the connect account flow.
+            ...authorizationParams,
           });
+          for (const requiredScope of requiredScopes) {
+            search.append("scopes", requiredScope);
+          }
 
-          const url = new URL(authorizePath, window.location.origin);
+          const url = new URL(connectPath, window.location.origin);
           url.search = search.toString();
 
           // Redirect to the authorization page

py-langchain/frontend/src/components/chat-window.tsx

@@ -8,7 +8,7 @@ import { useStream } from "@langchain/langgraph-sdk/react";
 import { type Message } from "@langchain/langgraph-sdk";
 
 import { ChatMessageBubble } from "@/components/chat-message-bubble";
-import { TokenVaultInterruptHandler } from "@/components/auth0-ai/TokenVault/TokenVaultInterruptHandler";
+import { TokenVaultInterruptHandler } from "@/components/TokenVaultInterruptHandler";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { getLoginUrl } from "@/lib/use-auth";

scripts/update_packages.sh

@@ -0,0 +1,122 @@
+#!/bin/bash
+
+# Script to update @auth0/ai packages to their latest versions
+# Usage: ./update_packages.sh
+
+set -e
+
+# Define the versions
+AUTH0_SPA_JS_VERSION="^2.9.0"
+AUTH0_NEXTJS_VERSION="^4.13.0"
+AUTH0_AI_VERSION="^5.1.1"
+AUTH0_AI_VERCEL_VERSION="^4.1.0"
+AUTH0_AI_LANGCHAIN_VERSION="^4.1.0"
+AUTH0_AI_LLAMAINDEX_VERSION="^4.1.0"
+
+REGISTRY="--registry https://registry.npmjs.org/"
+
+echo "Starting package updates..."
+
+# Function to update a package.json file and reinstall packages
+update_package_json() {
+    local file="$1"
+    local updated=false
+
+    echo "Checking $file..."
+
+    if grep -q '"@auth0/auth0-spa-js"' "$file"; then
+        echo "  Updating @auth0/auth0-spa-js to $AUTH0_SPA_JS_VERSION"
+        sed -i '' 's/"@auth0\/auth0-spa-js": "[^"]*"/"@auth0\/auth0-spa-js": "'$AUTH0_SPA_JS_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if grep -q '"@auth0/nextjs-auth0"' "$file"; then
+        echo "  Updating @auth0/nextjs-auth0 to $AUTH0_NEXTJS_VERSION"
+        sed -i '' 's/"@auth0\/nextjs-auth0": "[^"]*"/"@auth0\/nextjs-auth0": "'$AUTH0_NEXTJS_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if grep -q '"@auth0/ai"' "$file"; then
+        echo "  Updating @auth0/ai to $AUTH0_AI_VERSION"
+        sed -i '' 's/"@auth0\/ai": "[^"]*"/"@auth0\/ai": "'$AUTH0_AI_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if grep -q '"@auth0/ai-vercel"' "$file"; then
+        echo "  Updating @auth0/ai-vercel to $AUTH0_AI_VERCEL_VERSION"
+        sed -i '' 's/"@auth0\/ai-vercel": "[^"]*"/"@auth0\/ai-vercel": "'$AUTH0_AI_VERCEL_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if grep -q '"@auth0/ai-langchain"' "$file"; then
+        echo "  Updating @auth0/ai-langchain to $AUTH0_AI_LANGCHAIN_VERSION"
+        sed -i '' 's/"@auth0\/ai-langchain": "[^"]*"/"@auth0\/ai-langchain": "'$AUTH0_AI_LANGCHAIN_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if grep -q '"@auth0/ai-llamaindex"' "$file"; then
+        echo "  Updating @auth0/ai-llamaindex to $AUTH0_AI_LLAMAINDEX_VERSION"
+        sed -i '' 's/"@auth0\/ai-llamaindex": "[^"]*"/"@auth0\/ai-llamaindex": "'$AUTH0_AI_LLAMAINDEX_VERSION'"/g' "$file"
+        updated=true
+    fi
+
+    if [ "$updated" = true ]; then
+        echo "  Updated $file"
+        dir=$(dirname "$file")
+
+        # Simple approach: collect all @auth0 packages, uninstall them, then reinstall
+        packages_to_uninstall=""
+        packages_to_reinstall=""
+
+        if grep -q '"@auth0/auth0-spa-js":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/auth0-spa-js"
+            packages_to_reinstall="$packages_to_reinstall @auth0/auth0-spa-js@$AUTH0_SPA_JS_VERSION"
+        fi
+
+        if grep -q '"@auth0/nextjs-auth0":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/nextjs-auth0"
+            packages_to_reinstall="$packages_to_reinstall @auth0/nextjs-auth0@$AUTH0_NEXTJS_VERSION"
+        fi
+
+        if grep -q '"@auth0/ai":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/ai"
+            packages_to_reinstall="$packages_to_reinstall @auth0/ai@$AUTH0_AI_VERSION"
+        fi
+
+        if grep -q '"@auth0/ai-vercel":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/ai-vercel"
+            packages_to_reinstall="$packages_to_reinstall @auth0/ai-vercel@$AUTH0_AI_VERCEL_VERSION"
+        fi
+
+        if grep -q '"@auth0/ai-langchain":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/ai-langchain"
+            packages_to_reinstall="$packages_to_reinstall @auth0/ai-langchain@$AUTH0_AI_LANGCHAIN_VERSION"
+        fi
+
+        if grep -q '"@auth0/ai-llamaindex":' "$file"; then
+            packages_to_uninstall="$packages_to_uninstall @auth0/ai-llamaindex"
+            packages_to_reinstall="$packages_to_reinstall @auth0/ai-llamaindex@$AUTH0_AI_LLAMAINDEX_VERSION"
+        fi
+
+        # Uninstall all @auth0 packages at once
+        if [ -n "$packages_to_uninstall" ]; then
+            echo "    Uninstalling:$packages_to_uninstall"
+            (cd "$dir" && npm uninstall$packages_to_uninstall 2>/dev/null || true)
+        fi
+
+        # Reinstall all @auth0 packages at once
+        if [ -n "$packages_to_reinstall" ]; then
+            echo "    Reinstalling:$packages_to_reinstall"
+            (cd "$dir" && npm install$packages_to_reinstall $REGISTRY)
+        fi
+    fi
+}
+
+# Find all package.json files and update them
+find . -name "package.json" -type f -not -path "*/node_modules/*" | while read -r file; do
+    if grep -q '@auth0/ai' "$file"; then
+        update_package_json "$file"
+    fi
+done
+
+echo "Package updates completed!"

ts-langchain/.env.example

@@ -12,12 +12,12 @@ AUTH0_CLIENT_ID="{yourClientId}"
 AUTH0_CLIENT_SECRET="{yourClientSecret}"
 # Use your SHOP_API_AUDIENCE or a separate LangGraph API audience
 AUTH0_AUDIENCE="https://your.domain.us.langgraph.app"
-AUTH0_SCOPE="openid profile email"
+AUTH0_SCOPE="openid profile email offline_access"
 AUTH0_CUSTOM_API_CLIENT_ID="{yourCustomApiClientId}"
 AUTH0_CUSTOM_API_CLIENT_SECRET="{yourCustomApiClientSecret}"
 
 # Database configuration
-DATABASE_URL="postgresql://postgres:postgres@localhost:5432/ai_documents_db"   
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/ai_documents_db"
 
 # Auth0 FGA
 FGA_STORE_ID=<your-fga-store-id>

ts-langchain/README.md

@@ -32,7 +32,7 @@ Next, you'll need to set up environment variables in your repo's `.env.local` fi
 To start with the basic examples, you'll just need to add your OpenAI API key and Auth0 credentials.
 
 - To start with the examples, you'll just need to add your OpenAI API key and Auth0 credentials for the Web app and Machine to Machine App.
-  - You can setup a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/call-others-apis-on-users-behalf).
+  - You can set up a new Auth0 tenant with an Auth0 Web App and Token Vault following the Prerequisites instructions [here](https://auth0.com/ai/docs/get-started/call-others-apis-on-users-behalf).
   - An Auth0 FGA account, you can create one [here](https://dashboard.fga.dev). Add the FGA store ID, client ID, client secret, and API URL to the `.env.local` file.
   - Optionally add a [SerpAPI](https://serpapi.com/) API key for using web search tool.
 
@@ -67,7 +67,7 @@ Agent configuration lives in `src/lib/agent.ts`. From here, you can change the p
 This package has [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) set up by default - you can explore the bundle size interactively by running:
 
 ```bash
-$ ANALYZE=true bun run build
+$ ANALYZE=true npm run build
 ```
 
 ## License