|
9 | 9 | - [Use with Auth0 organizations](#use-with-auth0-organizations) |
10 | 10 | - [Protecting a route with a claims check](#protecting-a-route-with-a-claims-check) |
11 | 11 | - [Device-bound tokens with DPoP](#device-bound-tokens-with-dpop) |
| 12 | +- [Using Multi Resource Refresh Tokens](#using-multi-resource-refresh-tokens) |
| 13 | +- [Connect Accounts for using Token Vault](#connect-accounts-for-using-token-vault) |
12 | 14 |
|
13 | 15 | ## Use with a Class Component |
14 | 16 |
|
@@ -571,3 +573,113 @@ createFetcher({ |
571 | 573 | }) |
572 | 574 | }); |
573 | 575 | ``` |
| 576 | +
|
| 577 | +## Using Multi-Resource Refresh Tokens |
| 578 | +
|
| 579 | +With **Multi-Resource Refresh Tokens** -or simply **MRRT**- now a refresh token from one API, can be used to request a new access token from another different API. Read more about how MRRT works for browser-based applications to help you decide, wether you need or not, to use this functionality. |
| 580 | +
|
| 581 | +- [Multi-Resource Refresh Token](https://auth0.com/docs/secure/tokens/refresh-tokens/multi-resource-refresh-token) |
| 582 | +
|
| 583 | +## Enabling MRRT |
| 584 | +
|
| 585 | +MRRT is disabled by default. To enable it, set the `useMrrt` option to `true` when invoking the provider. You will need to set `useRefreshTokens` and `useRefreshTokensFallback` to `true` as well For example: |
| 586 | +
|
| 587 | +```jsx |
| 588 | +<Auth0Provider |
| 589 | + domain="YOUR_AUTH0_DOMAIN" |
| 590 | + clientId="YOUR_AUTH0_CLIENT_ID" |
| 591 | + useRefreshTokens={true} |
| 592 | + useRefreshTokensFallback={true} |
| 593 | + useMrrt={true} // 👈 |
| 594 | + authorizationParams={{ redirect_uri: window.location.origin }} |
| 595 | +> |
| 596 | +``` |
| 597 | +
|
| 598 | +> [!IMPORTANT] |
| 599 | +> In order MRRT to work, it needs a previous configuration setting the refresh token policies. |
| 600 | +> Visit [configure and implement MRRT.](https://auth0.com/docs/secure/tokens/refresh-tokens/multi-resource-refresh-token/configure-and-implement-multi-resource-refresh-token) |
| 601 | +
|
| 602 | +## Connect Accounts for using Token Vault |
| 603 | +
|
| 604 | +The Connect Accounts feature uses the Auth0 My Account API to allow users to link multiple third party accounts to a single Auth0 user profile. |
| 605 | +
|
| 606 | +When using Connected Accounts, Auth0 acquires tokens from upstream Identity Providers (like Google) and stores them in a secure [Token Vault](https://auth0.com/docs/secure/tokens/token-vault). These tokens can then be used to access third-party APIs (like Google Calendar) on behalf of the user. |
| 607 | +
|
| 608 | +The tokens in the Token Vault are then accessible to [Resource Servers](https://auth0.com/docs/get-started/apis) (APIs) configured in Auth0. The SPA application can then issue requests to the API, which can retrieve the tokens from the Token Vault and use them to access the third-party APIs. |
| 609 | +
|
| 610 | +This is particularly useful for applications that require access to different resources on behalf of a user, like AI Agents. |
| 611 | +
|
| 612 | +### Configure the SDK |
| 613 | +
|
| 614 | +The SDK must be configured with an audience (an API Identifier) - this will be the resource server that uses the tokens from the Token Vault. |
| 615 | +
|
| 616 | +The SDK must also be configured to use refresh tokens and MRRT ([Multiple Resource Refresh Tokens](https://auth0.com/docs/secure/tokens/refresh-tokens/multi-resource-refresh-token)) since we will use the refresh token grant to get Access Tokens for the My Account API in addition to the API we are calling. |
| 617 | +
|
| 618 | +The My Account API requires DPoP tokens, so we also need to enable DPoP. |
| 619 | +
|
| 620 | +```jsx |
| 621 | +<Auth0Provider |
| 622 | + domain="YOUR_AUTH0_DOMAIN" |
| 623 | + clientId="YOUR_AUTH0_CLIENT_ID" |
| 624 | + authorizationParams={{ |
| 625 | + redirect_uri: window.location.origin, |
| 626 | + audience: '<AUTH0 API IDENTIFIER>' // The API that will use the tokens from the Token Vault |
| 627 | + }} |
| 628 | + useRefreshTokens={true} |
| 629 | + useMrrt={true} |
| 630 | + useDpop={true} |
| 631 | +> |
| 632 | + <App /> |
| 633 | +</Auth0Provider> |
| 634 | +``` |
| 635 | +
|
| 636 | +### Login to the application |
| 637 | +
|
| 638 | +Use the login methods to authenticate to the application and get a refresh and access token for the API. |
| 639 | +
|
| 640 | +```jsx |
| 641 | +const Login = () => { |
| 642 | + const { loginWithRedirect } = useAuth0(); |
| 643 | + return <button onClick={() => loginWithRedirect({ |
| 644 | + authorizationParams: { |
| 645 | + audience: '<AUTH0 API IDENTIFIER>', // The API that will use the tokens from the Token Vault |
| 646 | + scope: 'openid profile email offline_access read:calendar' // Make sure you get a Refresh Token as you're using MRRT to get access to the My Account API |
| 647 | + } |
| 648 | + })}>Login</button>; |
| 649 | +}; |
| 650 | +``` |
| 651 | +
|
| 652 | +### Connect to a third party account |
| 653 | +
|
| 654 | +Use the new `connectAccountWithRedirect` method to redirect the user to the third party Identity Provider to connect their account. |
| 655 | +
|
| 656 | +```jsx |
| 657 | +const ConnectAccount = () => { |
| 658 | + const { connectAccountWithRedirect } = useAuth0(); |
| 659 | + return <button onClick={() => connectAccountWithRedirect({ |
| 660 | + connection: '<CONNECTION eg, google-apps-connection>', |
| 661 | + access_type: 'offline', // You must also request a refresh token from the third party Identity Provider for it to be stored in Token Vault. |
| 662 | + authorization_params: { |
| 663 | + scope: '<SCOPE eg https://www.googleapis.com/auth/calendar.acls.readonly>' |
| 664 | + } |
| 665 | + })}>Connect Google Calendar</button>; |
| 666 | +}; |
| 667 | +``` |
| 668 | +
|
| 669 | +When the redirect completes, the user will be returned to the application and the tokens from the third party Identity Provider will be stored in the Token Vault. |
| 670 | +
|
| 671 | +```jsx |
| 672 | +<Auth0Provider |
| 673 | + // ... |
| 674 | + onRedirectCallback={(appState) => { |
| 675 | + if (appState.connectedAccount) { |
| 676 | + console.log(`You've connected to ${appState.connectedAccount.connection}`); |
| 677 | + } |
| 678 | + window.history.replaceState({}, document.title, '/'); |
| 679 | + }} |
| 680 | +> |
| 681 | + <App /> |
| 682 | +</Auth0Provider> |
| 683 | +``` |
| 684 | +
|
| 685 | +You can now [call the API](#calling-an-api) with your access token and the API can use [Access Token Exchange with Token Vault](https://auth0.com/docs/secure/tokens/token-vault/access-token-exchange-with-token-vault) to get tokens from the Token Vault to access third party APIs on behalf of the user. |
0 commit comments