Connected Accounts, quickstart doc updates #271
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -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 | ||||||
pmalouin marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| * @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> | ||||||
| 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> | ||||||
| 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> | ||||||
| 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> | ||||||
|
|
@@ -120,19 +112,29 @@ export const Prerequisites = ({ | |||||
| <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>: | ||||||
| <ul> | ||||||
| <li>Navigate to <strong>Authentication > APIs</strong>, locate the My Account API banner, and select <strong>Activate</strong> to activate the Auth0 My Account API.</li> | ||||||
| <li>To configure your client application to authorize the My Account API: | ||||||
| <ul> | ||||||
| <li>Navigate to <strong>Applications > Applications</strong> and select your client application.</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, ensuring that the <code>create:me:connected_accounts</code> permission at least is selected.</li> | ||||||
|
Contributor
There was a problem hiding this comment.
Suggested change
|
||||||
| <li>Select <strong>Update</strong>.</li> | ||||||
| </ul> | ||||||
| </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 > 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> | ||||||
|
Contributor
There was a problem hiding this comment. i think you also need to enable Allow Skipping User Consent for the My Account API in order for MRRT to work. i remember running into this error and someone else reporting this recently i put that step under the My Account API config to reduce UX friction (the user having to go back and forth between My Account API config and then the application config for MRRT: https://docs.google.com/document/d/1OQ5nnWGvBtLAnk6QIsxicuCd2WA1OUbxsMSvyrk-gA8/edit?tab=t.0#heading=h.cisneua0vv4x |
||||||
| </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 | ||||||
|
|
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 <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" | ||
| ``` | ||
| 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: ["openid", "https://www.googleapis.com/auth/calendar.events"], | ||
|
Contributor
There was a problem hiding this comment. |
||
| 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({ | ||
| 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, | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 <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> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.