fix: ensure Connected Accounts use fetcher to properly use DPoP (#2366)

Author: frederikprijck

src/server/auth-client.test.ts

@@ -204,7 +204,11 @@ ca/T0LLtgmbMmxSv/MmzIg==
         // Connect Account
         if (url.pathname === "/me/v1/connected-accounts/connect") {
           if (onConnectAccountRequest) {
-            await onConnectAccountRequest(new Request(input, init));
+            // When body is send, new Request() requires duplex: 'half'
+            // This appeared to only become neccessary once we started using the fetcher.
+            await onConnectAccountRequest(
+              new Request(input, { ...init, duplex: "half" } as RequestInit)
+            );
           }
 
           return Response.json(
@@ -224,7 +228,11 @@ ca/T0LLtgmbMmxSv/MmzIg==
         // Connect Account complete
         if (url.pathname === "/me/v1/connected-accounts/complete") {
           if (onCompleteConnectAccountRequest) {
-            await onCompleteConnectAccountRequest(new Request(input, init));
+            // When body is send, new Request() requires duplex: 'half'
+            // This appeared to only become neccessary once we started using the fetcher.
+            await onCompleteConnectAccountRequest(
+              new Request(input, { ...init, duplex: "half" } as RequestInit)
+            );
           }
 
           if (completeConnectAccountErrorResponse) {
@@ -4738,6 +4746,7 @@ ca/T0LLtgmbMmxSv/MmzIg==
           }
         });
 
+        // Here is an issue
         expect(mockOnCallback).toHaveBeenCalledWith(
           null,
           expectedContext,

src/server/auth-client.ts

@@ -1,11 +1,6 @@
 import { NextResponse, type NextRequest } from "next/server.js";
 import * as jose from "jose";
 import * as oauth from "oauth4webapi";
-import {
-  allowInsecureRequests,
-  customFetch,
-  protectedResourceRequest
-} from "oauth4webapi";
 import * as client from "openid-client";
 
 import packageJson from "../../package.json" with { type: "json" };
@@ -79,6 +74,7 @@ import {
 import { toSafeRedirect } from "../utils/url-helpers.js";
 import { addCacheControlHeadersForSession } from "./cookies.js";
 import {
+  AccessTokenFactory,
   Fetcher,
   FetcherConfig,
   FetcherHooks,
@@ -691,7 +687,7 @@ export class AuthClient {
 
       const [completeConnectAccountError, connectedAccount] =
         await this.completeConnectAccount({
-          accessToken: tokenSetResponse.tokenSet.accessToken,
+          tokenSet: tokenSetResponse.tokenSet,
           authSession: transactionState.authSession!,
           connectCode: req.nextUrl.searchParams.get("connect_code")!,
           redirectUri: createRouteUrl(
@@ -1035,7 +1031,7 @@ export class AuthClient {
     const { tokenSet, idTokenClaims } = getTokenSetResponse;
     const [connectAccountError, connectAccountResponse] =
       await this.connectAccount({
-        accessToken: tokenSet.accessToken,
+        tokenSet: tokenSet,
         connection,
         authorizationParams,
         returnTo
@@ -1842,7 +1838,7 @@ export class AuthClient {
    * The user will be redirected to authorize the connection.
    */
   async connectAccount(
-    options: ConnectAccountOptions & { accessToken: string }
+    options: ConnectAccountOptions & { tokenSet: TokenSet }
   ): Promise<[ConnectAccountError, null] | [null, NextResponse]> {
     const redirectUri = createRouteUrl(this.routes.callback, this.appBaseUrl);
     let returnTo = this.signInReturnToPath;
@@ -1871,7 +1867,7 @@ export class AuthClient {
 
     const [error, connectAccountResponse] =
       await this.createConnectAccountTicket({
-        accessToken: options.accessToken,
+        tokenSet: options.tokenSet,
         connection: options.connection,
         redirectUri: redirectUri.toString(),
         state,
@@ -1910,38 +1906,37 @@ export class AuthClient {
         this.issuer
       );
 
+      const fetcher = await this.fetcherFactory({
+        useDPoP: this.useDPoP,
+        getAccessToken: async () => ({
+          accessToken: options.tokenSet.accessToken,
+          expiresAt: options.tokenSet.expiresAt || 0,
+          scope: options.tokenSet.scope,
+          token_type: options.tokenSet.token_type
+        }),
+        fetch: this.fetch
+      });
+
       const httpOptions = this.httpOptions();
       const headers = new Headers(httpOptions.headers);
       headers.set("Content-Type", "application/json");
 
-      const requestBody = JSON.stringify({
+      const requestBody = {
         connection: options.connection,
         redirect_uri: options.redirectUri,
         state: options.state,
         code_challenge: options.codeChallenge,
         code_challenge_method: options.codeChallengeMethod,
         authorization_params: options.authorizationParams
-      });
+      };
 
-      const res = await protectedResourceRequest(
-        options.accessToken,
-        "POST",
-        connectAccountUrl,
-        headers,
-        requestBody,
-        {
-          ...httpOptions,
-          [customFetch]: (url: string, requestOptions: any) => {
-            const tmpRequest = new Request(url, requestOptions);
-            return this.fetch(tmpRequest);
-          },
-          [allowInsecureRequests]: this.allowInsecureRequests || false,
-          ...(this.useDPoP &&
-            this.dpopKeyPair && {
-              DPoP: oauth.DPoP(this.clientMetadata, this.dpopKeyPair!)
-            })
-        }
-      );
+      const res = await fetcher.fetchWithAuth(connectAccountUrl.toString(), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(requestBody)
+      });
 
       if (!res.ok) {
         try {
@@ -1984,11 +1979,15 @@ export class AuthClient {
         }
       ];
     } catch (e: any) {
+      let message =
+        "An unexpected error occurred while trying to initiate the connect account flow.";
+      if (e instanceof DPoPError) {
+        message = e.message;
+      }
       return [
         new ConnectAccountError({
           code: ConnectAccountErrorCodes.FAILED_TO_INITIATE,
-          message:
-            "An unexpected error occurred while trying to initiate the connect account flow."
+          message: message
         }),
         null
       ];
@@ -2008,32 +2007,31 @@ export class AuthClient {
       const headers = new Headers(httpOptions.headers);
       headers.set("Content-Type", "application/json");
 
-      const requestBody = JSON.stringify({
+      const fetcher = await this.fetcherFactory({
+        useDPoP: this.useDPoP,
+        getAccessToken: async () => ({
+          accessToken: options.tokenSet.accessToken,
+          expiresAt: options.tokenSet.expiresAt || 0,
+          scope: options.tokenSet.scope,
+          token_type: options.tokenSet.token_type
+        }),
+        fetch: this.fetch
+      });
+
+      const requestBody = {
         auth_session: options.authSession,
         connect_code: options.connectCode,
         redirect_uri: options.redirectUri,
         code_verifier: options.codeVerifier
-      });
+      };
 
-      const res = await protectedResourceRequest(
-        options.accessToken,
-        "POST",
-        completeConnectAccountUrl,
-        headers,
-        requestBody,
-        {
-          ...httpOptions,
-          [customFetch]: (url: string, requestOptions: any) => {
-            const tmpRequest = new Request(url, requestOptions);
-            return this.fetch(tmpRequest);
-          },
-          [allowInsecureRequests]: this.allowInsecureRequests || false,
-          ...(this.useDPoP &&
-            this.dpopKeyPair && {
-              DPoP: oauth.DPoP(this.clientMetadata, this.dpopKeyPair!)
-            })
-        }
-      );
+      const res = await fetcher.fetchWithAuth(completeConnectAccountUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(requestBody)
+      });
 
       if (!res.ok) {
         try {
@@ -2172,19 +2170,6 @@ export class AuthClient {
       throw discoveryError;
     }
 
-    const defaultAccessTokenFactory = async (
-      getAccessTokenOptions: GetAccessTokenOptions
-    ) => {
-      const [error, getTokenSetResponse] = await this.getTokenSet(
-        options.session,
-        getAccessTokenOptions || {}
-      );
-      if (error) {
-        throw error;
-      }
-      return getTokenSetResponse.tokenSet;
-    };
-
     const fetcherConfig: FetcherConfig<TOutput> = {
       // Fetcher-scoped DPoP handle and nonce management
       dpopHandle:
@@ -2200,7 +2185,7 @@ export class AuthClient {
     };
 
     const fetcherHooks: FetcherHooks = {
-      getAccessToken: defaultAccessTokenFactory,
+      getAccessToken: options.getAccessToken,
       isDpopEnabled: () => options.useDPoP ?? this.useDPoP ?? false
     };
 
@@ -2234,5 +2219,5 @@ type GetTokenSetResponse = {
  */
 export type FetcherFactoryOptions<TOutput extends Response> = {
   useDPoP?: boolean;
-  session: SessionData;
+  getAccessToken: AccessTokenFactory;
 } & FetcherMinimalConfig<TOutput>;

src/server/client.ts

@@ -554,9 +554,13 @@ export class Auth0Client {
    * @param options Optional configuration for getting the access token.
    * @param options.refresh Force a refresh of the access token.
    */
-  async getAccessToken(
-    options?: GetAccessTokenOptions
-  ): Promise<{ token: string; expiresAt: number; scope?: string }>;
+  async getAccessToken(options?: GetAccessTokenOptions): Promise<{
+    token: string;
+    expiresAt: number;
+    scope?: string;
+    token_type?: string;
+    audience?: string;
+  }>;
 
   /**
    * getAccessToken returns the access token.
@@ -572,7 +576,13 @@ export class Auth0Client {
     req: PagesRouterRequest | NextRequest,
     res: PagesRouterResponse | NextResponse,
     options?: GetAccessTokenOptions
-  ): Promise<{ token: string; expiresAt: number; scope?: string }>;
+  ): Promise<{
+    token: string;
+    expiresAt: number;
+    scope?: string;
+    token_type?: string;
+    audience?: string;
+  }>;
 
   /**
    * getAccessToken returns the access token.
@@ -588,7 +598,13 @@ export class Auth0Client {
     arg1?: PagesRouterRequest | NextRequest | GetAccessTokenOptions,
     arg2?: PagesRouterResponse | NextResponse,
     arg3?: GetAccessTokenOptions
-  ): Promise<{ token: string; expiresAt: number; scope?: string }> {
+  ): Promise<{
+    token: string;
+    expiresAt: number;
+    scope?: string;
+    token_type?: string;
+    audience?: string;
+  }> {
     const defaultOptions: GetAccessTokenOptions = {
       refresh: false
     };
@@ -645,7 +661,13 @@ export class Auth0Client {
     req: PagesRouterRequest | NextRequest | undefined,
     res: PagesRouterResponse | NextResponse | undefined,
     options: GetAccessTokenOptions
-  ): Promise<{ token: string; expiresAt: number; scope?: string }> {
+  ): Promise<{
+    token: string;
+    expiresAt: number;
+    scope?: string;
+    token_type?: string;
+    audience?: string;
+  }> {
     const session: SessionData | null = req
       ? await this.getSession(req)
       : await this.getSession();
@@ -698,7 +720,9 @@ export class Auth0Client {
     return {
       token: tokenSet.accessToken,
       scope: tokenSet.scope,
-      expiresAt: tokenSet.expiresAt
+      expiresAt: tokenSet.expiresAt,
+      token_type: tokenSet.token_type,
+      audience: tokenSet.audience
     };
   }
 
@@ -982,7 +1006,12 @@ export class Auth0Client {
     const [error, connectAccountResponse] =
       await this.authClient.connectAccount({
         ...options,
-        accessToken: accessToken.token
+        tokenSet: {
+          accessToken: accessToken.token,
+          expiresAt: accessToken.expiresAt,
+          scope: getMyAccountTokenOpts.scope,
+          audience: accessToken.audience
+        }
       });
 
     if (error) {
@@ -1219,9 +1248,22 @@ export class Auth0Client {
       );
     }
 
+    const getAccessToken = async (
+      getAccessTokenOptions: GetAccessTokenOptions
+    ) => {
+      const [error, getTokenSetResponse] = await this.authClient.getTokenSet(
+        session,
+        getAccessTokenOptions || {}
+      );
+      if (error) {
+        throw error;
+      }
+      return getTokenSetResponse.tokenSet;
+    };
+
     const fetcher: Fetcher<TOutput> = await this.authClient.fetcherFactory({
       ...options,
-      session
+      getAccessToken
     });
 
     return fetcher;