@auth0/auth0-spa-js 2.4.1 → 2.6.0

package/src/Auth0Client.ts

@@ -31,10 +31,11 @@ import {
   DecodedToken
 } from './cache';
 
-import { TransactionManager } from './transaction-manager';
+import { ConnectAccountTransaction, LoginTransaction, TransactionManager } from './transaction-manager';
 import { verify as verifyIdToken } from './jwt';
 import {
   AuthenticationError,
+  ConnectError,
   GenericError,
   MissingRefreshTokenError,
   TimeoutError
@@ -76,7 +77,11 @@ import {
   User,
   IdToken,
   GetTokenSilentlyVerboseResponse,
-  TokenEndpointResponse
+  TokenEndpointResponse,
+  AuthenticationResult,
+  ConnectAccountRedirectResult,
+  RedirectConnectAccountOptions,
+  ResponseType
 } from './global';
 
 // @ts-ignore
@@ -90,7 +95,10 @@ import {
   getAuthorizeParams,
   GET_TOKEN_SILENTLY_LOCK_KEY,
   OLD_IS_AUTHENTICATED_COOKIE_NAME,
-  patchOpenUrlWithOnRedirect
+  patchOpenUrlWithOnRedirect,
+  getScopeToRequest,
+  allScopesAreIncluded,
+  isRefreshWithMrrt
 } from './Auth0Client.utils';
 import { CustomTokenExchangeOptions } from './TokenExchange';
 import { Dpop } from './dpop/dpop';
@@ -99,6 +107,7 @@ import {
   type FetcherConfig,
   type CustomFetchMinimalOutput
 } from './fetcher';
+import { MyAccountApiClient } from './MyAccountApiClient';
 
 /**
  * @ignore
@@ -135,6 +144,7 @@ export class Auth0Client {
     authorizationParams: AuthorizationParams;
   };
   private readonly userCache: ICache = new InMemoryCache().enclosedCache;
+  private readonly myAccountApi: MyAccountApiClient;
 
   private worker?: Worker;
   private readonly defaultOptions: Partial<Auth0ClientOptions> = {
@@ -235,6 +245,22 @@ export class Auth0Client {
     this.domainUrl = getDomain(this.options.domain);
     this.tokenIssuer = getTokenIssuer(this.options.issuer, this.domainUrl);
 
+    const myAccountApiIdentifier = `${this.domainUrl}/me/`;
+    const myAccountFetcher = this.createFetcher({
+      ...(this.options.useDpop && { dpopNonceId: '__auth0_my_account_api__' }),
+      getAccessToken: () =>
+        this.getTokenSilently({
+          authorizationParams: {
+            scope: 'create:me:connected_accounts',
+            audience: myAccountApiIdentifier
+          }
+        })
+    });
+    this.myAccountApi = new MyAccountApiClient(
+      myAccountFetcher,
+      myAccountApiIdentifier
+    );
+
     // Don't use web workers unless using refresh tokens in memory
     if (
       typeof window !== 'undefined' &&
@@ -321,8 +347,8 @@ export class Auth0Client {
       nonce,
       code_challenge,
       authorizationParams.redirect_uri ||
-        this.options.authorizationParams.redirect_uri ||
-        fallbackRedirectUri,
+      this.options.authorizationParams.redirect_uri ||
+      fallbackRedirectUri,
       authorizeOptions?.response_mode,
       thumbprint
     );
@@ -474,9 +500,10 @@ export class Auth0Client {
       urlOptions.authorizationParams || {}
     );
 
-    this.transactionManager.create({
+    this.transactionManager.create<LoginTransaction>({
       ...transaction,
       appState,
+      response_type: ResponseType.Code,
       ...(organization && { organization })
     });
 
@@ -497,18 +524,18 @@ export class Auth0Client {
    */
   public async handleRedirectCallback<TAppState = any>(
     url: string = window.location.href
-  ): Promise<RedirectLoginResult<TAppState>> {
+  ): Promise<
+    RedirectLoginResult<TAppState> | ConnectAccountRedirectResult<TAppState>
+  > {
     const queryStringFragments = url.split('?').slice(1);
 
     if (queryStringFragments.length === 0) {
       throw new Error('There are no query params available for parsing.');
     }
 
-    const { state, code, error, error_description } = parseAuthenticationResult(
-      queryStringFragments.join('')
-    );
-
-    const transaction = this.transactionManager.get();
+    const transaction = this.transactionManager.get<
+      LoginTransaction | ConnectAccountTransaction
+    >();
 
     if (!transaction) {
       throw new GenericError('missing_transaction', 'Invalid state');
@@ -516,6 +543,38 @@ export class Auth0Client {
 
     this.transactionManager.remove();
 
+    const authenticationResult = parseAuthenticationResult(
+      queryStringFragments.join('')
+    );
+
+    if (transaction.response_type === ResponseType.ConnectCode) {
+      return this._handleConnectAccountRedirectCallback<TAppState>(
+        authenticationResult,
+        transaction
+      );
+    }
+    return this._handleLoginRedirectCallback<TAppState>(
+      authenticationResult,
+      transaction
+    );
+  }
+
+  /**
+   * Handles the redirect callback from the login flow.
+   *
+   * @template AppState - The application state persisted from the /authorize redirect.
+   * @param {string} authenticationResult - The parsed authentication result from the URL.
+   * @param {string} transaction - The login transaction.
+   *
+   * @returns {RedirectLoginResult} Resolves with the persisted app state.
+   * @throws {GenericError | Error} If the transaction is missing, invalid, or the code exchange fails.
+   */
+  private async _handleLoginRedirectCallback<TAppState>(
+    authenticationResult: AuthenticationResult,
+    transaction: LoginTransaction
+  ): Promise<RedirectLoginResult<TAppState>> {
+    const { code, state, error, error_description } = authenticationResult;
+
     if (error) {
       throw new AuthenticationError(
         error,
@@ -550,7 +609,63 @@ export class Auth0Client {
     );
 
     return {
-      appState: transaction.appState
+      appState: transaction.appState,
+      response_type: ResponseType.Code
+    };
+  }
+
+  /**
+   * Handles the redirect callback from the connect account flow.
+   * This works the same as the redirect from the login flow expect it verifies the `connect_code`
+   * with the My Account API rather than the `code` with the Authorization Server.
+   *
+   * @template AppState - The application state persisted from the connect redirect.
+   * @param {string} connectResult - The parsed connect accounts result from the URL.
+   * @param {string} transaction - The login transaction.
+   * @returns {Promise<ConnectAccountRedirectResult>} The result of the My Account API, including any persisted app state.
+   * @throws {GenericError | MyAccountApiError} If the transaction is missing, invalid, or an error is returned from the My Account API.
+   */
+  private async _handleConnectAccountRedirectCallback<TAppState>(
+    connectResult: AuthenticationResult,
+    transaction: ConnectAccountTransaction
+  ): Promise<ConnectAccountRedirectResult<TAppState>> {
+    const { connect_code, state, error, error_description } = connectResult;
+
+    if (error) {
+      throw new ConnectError(
+        error,
+        error_description || error,
+        transaction.connection,
+        state,
+        transaction.appState
+      );
+    }
+
+    if (!connect_code) {
+      throw new GenericError('missing_connect_code', 'Missing connect code');
+    }
+
+    if (
+      !transaction.code_verifier ||
+      !transaction.state ||
+      !transaction.auth_session ||
+      !transaction.redirect_uri ||
+      transaction.state !== state
+    ) {
+      throw new GenericError('state_mismatch', 'Invalid state');
+    }
+
+    const data = await this.myAccountApi.completeAccount({
+      auth_session: transaction.auth_session,
+      connect_code,
+      redirect_uri: transaction.redirect_uri,
+      code_verifier: transaction.code_verifier
+    });
+
+    return {
+      ...data,
+      appState: transaction.appState,
+      response_type: ResponseType.ConnectCode,
     };
   }
 
@@ -596,7 +711,7 @@ export class Auth0Client {
 
     try {
       await this.getTokenSilently(options);
-    } catch (_) {}
+    } catch (_) { }
   }
 
   /**
@@ -689,7 +804,8 @@ export class Auth0Client {
       const entry = await this._getEntryFromCache({
         scope: getTokenOptions.authorizationParams.scope,
         audience: getTokenOptions.authorizationParams.audience || 'default',
-        clientId: this.options.clientId
+        clientId: this.options.clientId,
+        cacheMode,
       });
 
       if (entry) {
@@ -789,7 +905,9 @@ export class Auth0Client {
         scope: localOptions.authorizationParams.scope,
         audience: localOptions.authorizationParams.audience || 'default',
         clientId: this.options.clientId
-      })
+      }),
+      undefined,
+      this.options.useMrrt
     );
 
     return cache!.access_token;
@@ -976,7 +1094,9 @@ export class Auth0Client {
         scope: options.authorizationParams.scope,
         audience: options.authorizationParams.audience || 'default',
         clientId: this.options.clientId
-      })
+      }),
+      undefined,
+      this.options.useMrrt
     );
 
     // If you don't have a refresh token in memory
@@ -1004,6 +1124,13 @@ export class Auth0Client {
         ? options.timeoutInSeconds * 1000
         : null;
 
+    const scopesToRequest = getScopeToRequest(
+      this.options.useMrrt,
+      options.authorizationParams,
+      cache?.audience,
+      cache?.scope,
+    );
+
     try {
       const tokenResult = await this._requestToken({
         ...options.authorizationParams,
@@ -1011,7 +1138,51 @@ export class Auth0Client {
         refresh_token: cache && cache.refresh_token,
         redirect_uri,
         ...(timeout && { timeout })
-      });
+      },
+        {
+          scopesToRequest,
+        }
+      );
+
+      // If is refreshed with MRRT, we update all entries that have the old
+      // refresh_token with the new one if the server responded with one
+      if (tokenResult.refresh_token && this.options.useMrrt && cache?.refresh_token) {
+        await this.cacheManager.updateEntry(
+          cache.refresh_token,
+          tokenResult.refresh_token
+        );
+      }
+
+      // Some scopes requested to the server might not be inside the refresh policies
+      // In order to return a token with all requested scopes when using MRRT we should
+      // check if all scopes are returned. If not, we will try to use an iframe to request
+      // a token.
+      if (this.options.useMrrt) {
+        const isRefreshMrrt = isRefreshWithMrrt(
+          cache?.audience,
+          cache?.scope,
+          options.authorizationParams.audience,
+          options.authorizationParams.scope,
+        );
+
+        if (isRefreshMrrt) {
+          const tokenHasAllScopes = allScopesAreIncluded(
+            scopesToRequest,
+            tokenResult.scope,
+          );
+
+          if (!tokenHasAllScopes) {
+            if (this.options.useRefreshTokensFallback) {
+              return await this._getTokenFromIFrame(options);
+            }
+
+            throw new MissingRefreshTokenError(
+              options.authorizationParams.audience || 'default',
+              options.authorizationParams.scope,
+            );
+          }
+        }
+      }
 
       return {
         ...tokenResult,
@@ -1084,11 +1255,13 @@ export class Auth0Client {
   private async _getEntryFromCache({
     scope,
     audience,
-    clientId
+    clientId,
+    cacheMode,
   }: {
     scope: string;
     audience: string;
     clientId: string;
+    cacheMode?: string;
   }): Promise<undefined | GetTokenSilentlyVerboseResponse> {
     const entry = await this.cacheManager.get(
       new CacheKey({
@@ -1096,7 +1269,9 @@ export class Auth0Client {
         audience,
         clientId
       }),
-      60 // get a new token if within 60 seconds of expiring
+      60, // get a new token if within 60 seconds of expiring
+      this.options.useMrrt,
+      cacheMode,
     );
 
     if (entry && entry.access_token) {
@@ -1134,7 +1309,7 @@ export class Auth0Client {
       | TokenExchangeRequestOptions,
     additionalParameters?: RequestTokenAdditionalParameters
   ) {
-    const { nonceIn, organization } = additionalParameters || {};
+    const { nonceIn, organization, scopesToRequest } = additionalParameters || {};
     const authResult = await oauthToken(
       {
         baseUrl: this.domainUrl,
@@ -1142,8 +1317,10 @@ export class Auth0Client {
         auth0Client: this.options.auth0Client,
         useFormData: this.options.useFormData,
         timeout: this.httpTimeoutMs,
+        useMrrt: this.options.useMrrt,
         dpop: this.dpop,
-        ...options
+        ...options,
+        scope: scopesToRequest || options.scope,
       },
       this.worker
     );
@@ -1298,7 +1475,7 @@ export class Auth0Client {
    * This is a drop-in replacement for the Fetch API's `fetch()` method, but will
    * handle certain authentication logic for you, like building the proper auth
    * headers or managing DPoP nonces and retries automatically.
-   * 
+   *
    * Check the `EXAMPLES.md` file for a deeper look into this method.
    */
   public createFetcher<TOutput extends CustomFetchMinimalOutput = Response>(
@@ -1312,12 +1489,91 @@ export class Auth0Client {
 
     return new Fetcher(config, {
       isDpopEnabled: () => !!this.options.useDpop,
-      getAccessToken: () => this.getTokenSilently(),
+      getAccessToken: authParams =>
+        this.getTokenSilently({
+          authorizationParams: {
+            scope: authParams?.scope?.join(' '),
+            audience: authParams?.audience
+          }
+        }),
       getDpopNonce: () => this.getDpopNonce(config.dpopNonceId),
-      setDpopNonce: nonce => this.setDpopNonce(nonce),
+      setDpopNonce: nonce => this.setDpopNonce(nonce, config.dpopNonceId),
       generateDpopProof: params => this.generateDpopProof(params)
     });
   }
+
+  /**
+   * Initiates a redirect to connect the user's account with a specified connection.
+   * This method generates PKCE parameters, creates a transaction, and redirects to the /connect endpoint.
+   *
+   * @template TAppState - The application state to persist through the transaction.
+   * @param {RedirectConnectAccountOptions<TAppState>} options - Options for the connect account redirect flow.
+   * @param   {string} options.connection - The name of the connection to link (e.g. 'google-oauth2').
+   * @param   {AuthorizationParams} [options.authorization_params] - Additional authorization parameters for the request to the upstream IdP.
+   * @param   {string} [options.redirectUri] - The URI to redirect back to after connecting the account.
+   * @param   {TAppState} [options.appState] - Application state to persist through the transaction.
+   * @param   {(url: string) => Promise<void>} [options.openUrl] - Custom function to open the URL.
+   *
+   * @returns {Promise<void>} Resolves when the redirect is initiated.
+   * @throws {MyAccountApiError} If the connect request to the My Account API fails.
+   */
+  public async connectAccountWithRedirect<TAppState = any>(
+    options: RedirectConnectAccountOptions<TAppState>
+  ) {
+    if (!this.options.useDpop) {
+      throw new Error('`useDpop` option must be enabled before using connectAccountWithRedirect.');
+    }
+
+    if (!this.options.useMrrt) {
+      throw new Error('`useMrrt` option must be enabled before using connectAccountWithRedirect.');
+    }
+
+    const {
+      openUrl,
+      appState,
+      connection,
+      authorization_params,
+      redirectUri = this.options.authorizationParams.redirect_uri ||
+        window.location.origin
+    } = options;
+
+    if (!connection) {
+      throw new Error('connection is required');
+    }
+
+    const state = encode(createRandomString());
+    const code_verifier = createRandomString();
+    const code_challengeBuffer = await sha256(code_verifier);
+    const code_challenge = bufferToBase64UrlEncoded(code_challengeBuffer);
+
+    const { connect_uri, connect_params, auth_session } =
+      await this.myAccountApi.connectAccount({
+        connection,
+        redirect_uri: redirectUri,
+        state,
+        code_challenge,
+        code_challenge_method: 'S256',
+        authorization_params
+      });
+
+    this.transactionManager.create<ConnectAccountTransaction>({
+      state,
+      code_verifier,
+      auth_session,
+      redirect_uri: redirectUri,
+      appState,
+      connection,
+      response_type: ResponseType.ConnectCode
+    });
+
+    const url = new URL(connect_uri);
+    url.searchParams.set('ticket', connect_params.ticket);
+    if (openUrl) {
+      await openUrl(url.toString());
+    } else {
+      window.location.assign(url);
+    }
+  }
 }
 
 interface BaseRequestTokenOptions {
@@ -1349,4 +1605,5 @@ interface TokenExchangeRequestOptions extends BaseRequestTokenOptions {
 interface RequestTokenAdditionalParameters {
   nonceIn?: string;
   organization?: string;
+  scopesToRequest?: string;
 }

package/src/Auth0Client.utils.ts

@@ -96,3 +96,69 @@ export const patchOpenUrlWithOnRedirect = <
 
   return result as T;
 };
+
+/**
+ * @ignore
+ * 
+ * Checks if all scopes are included inside other array of scopes
+ */
+export const allScopesAreIncluded = (scopeToInclude?: string, scopes?: string): boolean => {
+  const scopeGroup = scopes?.split(" ") || [];
+  const scopesToInclude = scopeToInclude?.split(" ") || [];
+  return scopesToInclude.every((key) => scopeGroup.includes(key));
+}
+
+/**
+ * @ignore
+ *
+ * For backward compatibility we are going to check if we are going to downscope while doing a refresh request
+ * while MRRT is allowed. If the audience is the same for the refresh_token we are going to use and it has
+ * lower scopes than the ones originally in the token, we are going to return the scopes that were stored
+ * with the refresh_token in the tokenset.
+ * @param useMrrt Setting that the user can activate to use MRRT in their requests
+ * @param authorizationParams Contains the audience and scope that the user requested to obtain a token
+ * @param cachedAudience Audience stored with the refresh_token wich we are going to use in the request
+ * @param cachedScope Scope stored with the refresh_token wich we are going to use in the request
+ */
+export const getScopeToRequest = (
+  useMrrt: boolean | undefined,
+  authorizationParams: { audience?: string, scope: string },
+  cachedAudience?: string,
+  cachedScope?: string
+): string => {
+  if (useMrrt && cachedAudience && cachedScope) {
+    if (authorizationParams.audience !== cachedAudience) {
+      return authorizationParams.scope;
+    }
+
+    const cachedScopes = cachedScope.split(" ");
+    const newScopes = authorizationParams.scope?.split(" ") || [];
+    const newScopesAreIncluded = newScopes.every((scope) => cachedScopes.includes(scope));
+
+    return cachedScopes.length >= newScopes.length && newScopesAreIncluded ? cachedScope : authorizationParams.scope;
+  }
+
+  return authorizationParams.scope;
+}
+
+/**
+ * @ignore
+ * 
+ * Checks if the refresh request has been done using MRRT
+ * @param cachedAudience Audience from the refresh token used to refresh
+ * @param cachedScope Scopes from the refresh token used to refresh
+ * @param requestAudience Audience sent to the server
+ * @param requestScope Scopes sent to the server
+ */
+export const isRefreshWithMrrt = (
+  cachedAudience: string | undefined,
+  cachedScope: string | undefined,
+  requestAudience: string | undefined,
+  requestScope: string,
+): boolean => {
+  if (cachedAudience !== requestAudience) {
+    return true;
+  }
+
+  return !allScopesAreIncluded(requestScope, cachedScope);
+}