- Initiate a Connected Accounts flow that will allow the user to connect their Google account and grant access to the AI agent.
- Retrieve access tokens for a Google social connection.
- Integrate with an AI agent to call Google APIs.
Pick your tech stack
LangGraph.js + Next.js
Vercel AI + Next.js
LangGraph + FastAPI
Vercel AI + React SPA
Prerequisites
Before getting started, make sure you have completed the following steps:1
Create an Auth0 Account
To continue with this quickstart, you need to have an Auth0 account.
2
Create an Auth0 Application
Go to your Auth0 Dashboard to create a new Auth0 Application.
- Navigate to Applications > Applications in the left sidebar.
- Click the Create Application button in the top right.
- In the pop-up select Regular Web Applications and click Create.
- Once the Application is created, switch to the Settings tab.
- Scroll down to the Application URIs section.
- Set Allowed Callback URLs as:
http://localhost:3000/auth/callback - Set Allowed Logout URLs as:
http://localhost:3000 - Click Save in the bottom right to save your changes.
3
Configure My Account API
The Connected Accounts flow uses the My Account API to create and manage connected accounts for a user across supported external providers.
In the Auth0 Dashboard, configure the My Account API:
In the Auth0 Dashboard, configure the My Account API:
- Navigate to Authentication > APIs, locate the My Account API banner, and select Activate to activate the Auth0 My Account API.
- Once activated, select Auth0 My Account API and then select the Applications tab.
- Toogle your client application to authorize it to access the My Account API.
- In the dropdown menu, select the Connected Accounts scopes for the application, ensuring that at a minimum, the
create:me:connected_accountspermission is selected. - Select Update.
- If you're using Multi-Resource Refresh Tokens, navigate to the Settings tab. Under Access Settings, select Allow Skipping User Consent.
4
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 Multi-Resource Refresh Token feature, which enables the refresh token delivered to your application to also obtain an access token to call the My Account API.
You can quickly define a refresh token policy for your application to use when requesting access tokens for the My Account API by doing the following:
You can quickly define a refresh token policy for your application to use when requesting access tokens for the My Account API by doing the following:
- Navigate to Applications > Applications and select your client application.
- On the Settings tab, scroll down to the Multi-Resource Refresh Token section.
- Select Edit Configuration and then enable the MRRT toggle for the Auth0 My Account API.
5
Configure Google Social Integration
Set up a Google developer account that allows for third-party API calls by following the Google Social Integration instructions.
6
OpenAI Platform
Set up an OpenAI account and API key.
- Use sample app (recommended)
- Integrate into your app
Download sample app
Start by downloading and extracting the sample app. Then open in your preferred IDE.Create your environment file
In the root directory of your project, create a new.env.local file and add the following content:.env.local
AUTH0_DOMAIN, AUTH0_CLIENT_ID, and AUTH0_CLIENT_SECRET, navigate to Applications > Applications 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 Applications > APIs 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 Applications > Applications 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:generate random 32 byte value
.env.local
Install packages
Ensure you havenpm installed or follow the instructions to install npm in its documentation.
In the root directory of your project, run the following command to install the required packages:Test your application
Start the application withnpm run all:dev. Then, navigate to http://localhost:3000.This opens LangGraph Studio in a new tab. You can safely close it.
Next steps
You have successfully added the ability to get access tokens for tool calling to your application. For next steps:- Call your APIs on user’s behalf docs.
- Learn more about how Auth0’s Token Vault manages the tokens of supported identity providers.