Connected Accounts, quickstart doc updates

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

@@ -56,7 +56,7 @@ OPENAI_API_KEY="YOUR_API_KEY"
 LANGGRAPH_API_URL=http://localhost:54367
 ```
 
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -148,6 +148,7 @@ AUTH0_SECRET='random 32 byte value'
 AUTH0_DOMAIN='<your-auth0-domain>'
 AUTH0_CLIENT_ID='<your-auth0-application-client-id>'
 AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
+AUTH0_SCOPE='openid profile email offline_access'
 
 # OpenAI API Key or any provider supported by the Vercel AI SDK
 OPENAI_API_KEY="YOUR_API_KEY"
@@ -156,7 +157,7 @@ OPENAI_API_KEY="YOUR_API_KEY"
 LANGGRAPH_API_URL=http://localhost:54367
 ```
 
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field.
@@ -194,7 +195,7 @@ auth0_ai = Auth0AI(
 
 with_calendar_access = auth0_ai.with_token_vault(
     connection="google-oauth2",
-    scopes=["https://www.googleapis.com/auth/calendar.events"],
+    scopes=["openid", "https://www.googleapis.com/auth/calendar.events"],
 )
 ```
 

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

@@ -34,7 +34,7 @@ AUTH0_CLIENT_ID='<your-auth0-application-client-id>'
 AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
 
 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}"
 
@@ -45,7 +45,12 @@ OPENAI_API_KEY="YOUR_API_KEY"
 LANGGRAPH_API_URL=http://localhost:54367
 LANGCHAIN_CALLBACKS_BACKGROUND=false
 ```
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your Regular Web application. You'll find these values in the **Basic Information** section at the top.
+Copy each value to the matching setting.
+
+To get your API's `AUTH0_AUDIENCE`, navigate to <strong>Applications > APIs </strong> in the Auth0 Dashboard and select your API. You'll find the identifier in the **General Settings** section at the top.
+
+To get your Custom API Client's `AUTH0_CUSTOM_API_CLIENT_ID`, and `AUTH0_CUSTOM_API_CLIENT_SECRET` navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your Custom API Client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -111,7 +116,6 @@ AUTH0_CLIENT_ID='<your-auth0-application-client-id>'
 AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
 
 AUTH0_AUDIENCE="https://your.domain.us.langgraph.app"
-AUTH0_SCOPE="openid profile email"
 AUTH0_CUSTOM_API_CLIENT_ID="{yourCustomApiClientId}"
 AUTH0_CUSTOM_API_CLIENT_SECRET="{yourCustomApiClientSecret}"
 
@@ -122,8 +126,12 @@ OPENAI_API_KEY="YOUR_API_KEY"
 LANGGRAPH_API_URL=http://localhost:54367
 LANGCHAIN_CALLBACKS_BACKGROUND=false
 ```
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your Regular Web application. You'll find these values in the **Basic Information** section at the top.
+Copy each value to the matching setting.
 
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your API's `AUTH0_AUDIENCE`, navigate to <strong>Applications > APIs </strong> in the Auth0 Dashboard and select your API. You'll find the identifier in the **General Settings** section at the top.
+
+To get your Custom API Client's `AUTH0_CUSTOM_API_CLIENT_ID`, and `AUTH0_CUSTOM_API_CLIENT_SECRET` navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your Custom API Client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -132,6 +140,9 @@ openssl rand -hex 32
 ```
 
 Lastly, set your OpenAI API key or use any provider supported by the Vercel AI SDK:
+```bash .env.local wrap lines
+OPENAI_API_KEY="YOUR_API_KEY"
+```
 
 ### Set up Token Vault for Google social connection
 
@@ -167,7 +178,7 @@ const withAccessTokenForConnection = (connection: string, scopes: string[]) =>
 // Connection for Google services
 export const withGmailSearch = withAccessTokenForConnection(
   'google-oauth2',
-  ['https://www.googleapis.com/auth/gmail.readonly'],
+  ['openid', 'https://www.googleapis.com/auth/gmail.readonly'],
 );
 ```
 
@@ -183,6 +194,7 @@ export const auth0 = new Auth0Client({
     scope: process.env.AUTH0_SCOPE,
     audience: process.env.AUTH0_AUDIENCE,
   },
+  enableConnectAccountEndpoint: true,
 });
 
 export const getAccessToken = async () => {

auth4genai/snippets/get-started/prerequisites/account-app-steps.jsx

@@ -7,6 +7,7 @@ export const AccountAndAppSteps = ({
   copyDomain,
   enableTokenVaultGrant = false,
   enableRefreshTokenGrant = false,
+  enableAllowRefreshTokenRotation = undefined,
 }) => {
   const steps = [
     <Step title="Create an Auth0 Account">
@@ -66,6 +67,11 @@ export const AccountAndAppSteps = ({
               Set Allowed Web Origins as: <code>{allowedWebOrigins}</code>
             </li>
           )}
+          {enableAllowRefreshTokenRotation !== undefined && (
+            <li>
+              Scroll down to the <strong>Refresh Token Rotation</strong> section and {enableAllowRefreshTokenRotation === true ? "enable" : "disable"} the <strong>Allow Refresh Token Rotation</strong> option.
+            </li>
+          )}
           {enableTokenVaultGrant && !enableRefreshTokenGrant && (
             <li>
               Scroll down and expand the <strong>Advanced</strong> section. Switch to the <strong>Grant Types</strong> tab and enable the <strong>Token Vault</strong> grant type.

auth4genai/snippets/get-started/prerequisites/call-others-api.jsx

@@ -8,9 +8,10 @@ import { AccountAndAppSteps } from "/snippets/get-started/prerequisites/account-
  * @param {string} [props.createAuth0ApplicationStep.applicationType] - Type of Auth0 application (e.g., "Regular Web")
  * @param {string} [props.createAuth0ApplicationStep.callbackUrl] - Allowed callback URL for the application
  * @param {string} [props.createAuth0ApplicationStep.logoutUrl] - Allowed logout URL for the application
- * @param {string|undefined} [props.createAuth0ApplicationStep.allowedWebOrigins] - Allowed web origins for the application 
+ * @param {string|undefined} [props.createAuth0ApplicationStep.allowedWebOrigins] - Allowed web origins for the application
  * @param {boolean} [props.createAuth0ApplicationStep.enableTokenVaultGrant] - Enable Token Vault Grant for the application
  * @param {boolean} [props.createAuth0ApplicationStep.enableRefreshTokenGrant] - Enable Refresh Token Grant for the application
+ * @param {boolean|undefined} [props.createAuth0ApplicationStep.enableAllowRefreshTokenRotation] - Enable or Disable Allow Refresh Token Rotation for the application (omitted if undefined)
  *
  * @param {Object|undefined} [props.createAuth0ApiStep] - Configuration for Auth0 API creation step
  *
@@ -27,6 +28,7 @@ export const Prerequisites = ({
     allowedWebOrigins: undefined,
     enableTokenVaultGrant: undefined,
     enableRefreshTokenGrant: undefined,
+    enableAllowRefreshTokenRotation: undefined,
   },
   createAuth0ApiStep = undefined,
   createResourceServerClientStep = undefined,
@@ -43,6 +45,7 @@ export const Prerequisites = ({
       allowedWebOrigins: createAuth0ApplicationStep.allowedWebOrigins,
       enableTokenVaultGrant: createAuth0ApplicationStep.enableTokenVaultGrant,
       enableRefreshTokenGrant: createAuth0ApplicationStep.enableRefreshTokenGrant,
+      enableAllowRefreshTokenRotation: createAuth0ApplicationStep.enableAllowRefreshTokenRotation,
     })
   );
 
@@ -91,24 +94,13 @@ export const Prerequisites = ({
         <br />
         <ul>
               <li>
-                Navigate to{" "}
-                <strong>
-                  Applications &gt; APIs
-                </strong>
+               From the Settings page of the API that you just created, click the <strong>Add Application</strong> button in the right top corner. This will open a modal to create a new Custom API Client.
               </li>
               <li>
-                Click the{" "}
-                <strong>Create API</strong> button to create a new Custom API.
-              </li>
-              <li>
-                Go to the Custom API you created and click the <strong>Add Application</strong> button in the right top corner.
-              </li>
-              <li>
-                After that click the <strong>Configure Application</strong> button in the right top corner.
+                Give your Custom API Client a name in the Application Name field and click the <strong>Add</strong> button to create a new Custom API Client.
               </li>
           <li>
-            Note down the <code>client id</code> and <code>client secret</code>{" "}
-           for your environment variables.
+            After creation is successful, you should be redirected to the settings page for your newly created Custom API Client application. Note down the <code>client id</code> and <code>client secret</code>{" "}for your environment variables.
           </li>
         </ul>
       </Step>
@@ -118,21 +110,32 @@ export const Prerequisites = ({
 
   steps.push(
     <Step key="my-account-api" title="Configure My Account API">
-      In the Auth0 Dashboard, configure the <a href="https://auth0.com/docs/manage-users/my-account-api" target="_blank">My Account API</a> to enable <a href="/intro/account-linking">account linking</a>:
+      In the Auth0 Dashboard, configure the <a href="https://auth0.com/docs/manage-users/my-account-api" target="_blank">My Account API</a>:
       <ul>
-        <li>Navigate to <strong>Authentication &gt; APIs</strong>, locate the My Account API banner, and select <strong>Activate</strong> to activate the My Account API.</li>
-        <li>To configure your client application to authorize the My Account API:
+        <li>Navigate to <strong>Authentication &gt; APIs</strong>, locate the My Account API banner, and select <strong>Activate</strong> to activate the Auth0 My Account API.</li>
+        <li>Once activated, select <strong>Auth0 My Account API</strong> and then select the <strong>Applications</strong> tab.
           <ul>
-            <li>Navigate to <strong>Applications &gt; Applications</strong> and select your client application.</li>
+            <li>Toogle your client application to authorize it to access the My Account API.</li>
+            <li>In the dropdown menu, select the <strong>Connected Accounts scopes</strong> for the application, ensuring that at a minimum, the <code>create:me:connected_accounts</code> permission is selected.</li>
             <li>Under <strong>APIs</strong>, toggle on <strong>Auth0 My Account API</strong>.</li>
-            <li>Select the <a href="https://auth0.com/docs/manage-users/my-account-api#scope" target="_blank">Connected Accounts scopes</a> for the application in the dropdown.</li>
             <li>Select <strong>Update</strong>.</li>
           </ul>
         </li>
+        <li>If you&apos;re using Multi-Resource Refresh Tokens, navigate to the <strong>Settings</strong> tab. Under <strong>Access Settings</strong>, select <strong>Allow Skipping User Consent</strong>.</li>
       </ul>
     </Step>
   );
 
+  steps.push(<Step key="mrrt-policy" title="Define a Multi-Resource Refresh Token policy for your Application">
+      After your web application has been granted access to the My Account API, you will also need to leverage the <a href="https://auth0.com/docs/secure/tokens/refresh-tokens/multi-resource-refresh-token" target="_blank">Multi-Resource Refresh Token</a> feature, which enables the refresh token delivered to your application to also obtain an access token to call the My Account API. <br/><br/>
+      You can quickly define a <a href="https://auth0.com/docs/secure/tokens/refresh-tokens/multi-resource-refresh-token/configure-and-implement-multi-resource-refresh-token" target="_blank">refresh token policy</a> for your application to use when requesting access tokens for the My Account API by doing the following:
+      <ul>
+        <li>Navigate to <strong>Applications &gt; Applications</strong> and select your client application.</li>
+        <li>On the <strong>Settings</strong> tab, scroll down to the <strong>Multi-Resource Refresh Token</strong> section.</li>
+        <li>Select <strong>Edit Configuration</strong> and then enable the MRRT toggle for the <strong>Auth0 My Account API</strong>.</li>
+      </ul>
+  </Step>)
+
   steps.push(
     <Step key="google-connection" title="Configure Google Social Integration">
       Set up a Google developer account that allows for third-party API calls by

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

@@ -35,7 +35,7 @@ AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
 OPENAI_API_KEY="YOUR_API_KEY"
 ```
 
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -97,12 +97,8 @@ AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
 
 # OpenAI API Key or any provider supported by the Vercel AI SDK
 OPENAI_API_KEY="YOUR_API_KEY"
-
-# LANGGRAPH
-LANGGRAPH_API_URL=http://localhost:54367
-LANGCHAIN_CALLBACKS_BACKGROUND=false
 ```
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -134,7 +130,7 @@ const auth0AI = new Auth0AI();
 // Connection for Google services
 export const withGoogleConnection = auth0AI.withTokenVault({
   connection: "google-oauth2",
-  scopes: ["https://www.googleapis.com/auth/calendar.events"],
+  scopes: ["openid", "https://www.googleapis.com/auth/calendar.events"],
   refreshToken: getRefreshToken,
 });
 ```
@@ -147,7 +143,9 @@ Create a file at `/src/lib/auth0.ts` file with the following code:
 import { Auth0Client } from '@auth0/nextjs-auth0/server';
 
 // Create an Auth0 Client.
-export const auth0 = new Auth0Client();
+export const auth0 = new Auth0Client({
+  enableConnectAccountEndpoint: true,
+});
 
 // Get the refresh token from Auth0 session
 export const getRefreshToken = async () => {
@@ -261,10 +259,12 @@ import { TokenVaultConsent } from "@/components/auth0-ai/TokenVault";
 
 interface TokenVaultInterruptHandlerProps {
   interrupt: Auth0InterruptionUI | null;
+  onFinish?: () => void;
 }
 
 export function TokenVaultInterruptHandler({
   interrupt,
+  onFinish,
 }: TokenVaultInterruptHandlerProps) {
   if (!TokenVaultInterrupt.isInterrupt(interrupt)) {
     return null;
@@ -275,6 +275,7 @@ export function TokenVaultInterruptHandler({
       <TokenVaultConsent
         mode="popup"
         interrupt={interrupt}
+        onFinish={onFinish}
         connectWidget={{
           title: "Authorization Required.",
           description: interrupt.message,

auth4genai/snippets/get-started/vercel-ai-next-js/user-authentication.mdx

@@ -8,7 +8,7 @@ import { DownloadQuickstartButton } from "/snippets/download-quickstart/Download
   <Tab
     title="Use sample app (recommended)"
   >
-  
+
 ### Download sample app
 Start by downloading and extracting the sample app. Then open in your preferred IDE.
 <DownloadQuickstartButton
@@ -34,7 +34,7 @@ AUTH0_DOMAIN='<your-auth0-domain>'
 AUTH0_CLIENT_ID='<your-auth0-application-client-id>'
 AUTH0_CLIENT_SECRET='<your-auth0-application-client-secret>'
 ```
-To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to the **Settings** tab in the Auth0 Dashboard. You'll find these values in the **Basic Information** section at the top.
+To get your Auth0 application's `AUTH0_DOMAIN`, `AUTH0_CLIENT_ID`, and `AUTH0_CLIENT_SECRET`, navigate to <strong>Applications > Applications </strong> in the Auth0 Dashboard and select your client application. You'll find these values in the **Basic Information** section at the top.
 Copy each value to the matching setting.
 
 Next, run this command to generate a random 32 byte value and copy it to the `AUTH0_SECRET` field:
@@ -219,4 +219,4 @@ Sign up to your application to create a new user account. You will then see a we
 Want to see how it all comes together? Explore or clone the fully implemented sample application on [GitHub](https://github.com/auth0-samples/auth0-ai-samples/tree/main/authenticate-users/vercel-ai-next-js).
 
   </Tab>
-</Tabs>
+</Tabs>