feat(trpc-react): cache sigv4 credentials

Instead of making requests to the identity pool for fresh credentials on every api call in the react
trpc client, we cache credentials (in memory) until just before they expire

re #49

Author: cogwirrel

packages/nx-plugin/src/trpc/react/files/src/hooks/useSigV4.tsx.template

@@ -1,14 +1,31 @@
 import { AwsClient } from 'aws4fetch';
 import { CognitoIdentityClient } from '@aws-sdk/client-cognito-identity';
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-identity';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useAuth } from 'react-oidc-context';
 import { useRuntimeConfig } from './useRuntimeConfig';
+import { AwsCredentialIdentity, AwsCredentialIdentityProvider } from '@smithy/types';
+
+// Credential expiration grace time before considering credentials as expired
+const CREDENTIAL_EXPIRY_OFFSET_MILLIS = 30 * 1000;
 
 export const useSigV4 = () => {
   const { cognitoProps } = useRuntimeConfig();
   const { user } = useAuth();
 
+  const [cachedCredentials, setCachedCredentials] = useState<{ [key: string]: AwsCredentialIdentity }>({});
+
+  const withCachedCredentials = useCallback(async (provider: AwsCredentialIdentityProvider, ...cacheKeys: string[]): Promise<AwsCredentialIdentity> => {
+    const key = `sigv4/${cacheKeys.join('/')}`;
+    const cachedCreds = cachedCredentials[key];
+    if (cachedCreds && cachedCreds.expiration && cachedCreds.expiration.getTime() > Date.now() + CREDENTIAL_EXPIRY_OFFSET_MILLIS) {
+      return cachedCreds;
+    }
+    const credentials = await provider();
+    setCachedCredentials((prev) => ({ ...prev, [key]: credentials }));
+    return credentials;
+  }, [cachedCredentials, setCachedCredentials]);
+
   return useCallback(
     async (input: RequestInfo | URL, init?: RequestInit | undefined) => {
       if (!cognitoProps) {
@@ -29,7 +46,7 @@ export const useSigV4 = () => {
       const cognitoidentity = new CognitoIdentityClient({
         credentials: credentialsFromCognitoIdentityPool,
       });
-      const credential = await cognitoidentity.config.credentials();
+      const credential = await withCachedCredentials(cognitoidentity.config.credentials, cognitoProps.identityPoolId, user.profile.sub);
       const awsClient = new AwsClient(credential);
       return awsClient.fetch(input, init);
     },

packages/nx-plugin/src/trpc/react/generator.ts

@@ -388,7 +388,7 @@ export async function reactGenerator(
         ? ['oidc-client-ts', 'react-oidc-context']
         : []) as any),
     ]),
-    {},
+    withVersions(['@smithy/types']),
   );
   await formatFilesInSubtree(tree);
   return () => {

packages/nx-plugin/src/utils/versions.ts

@@ -20,6 +20,7 @@ export const VERSIONS = {
   '@trpc/client': '11.0.0-rc.700',
   '@trpc/server': '11.0.0-rc.700',
   '@types/aws-lambda': '^8.10.145',
+  '@smithy/types': '^4.1.0',
   aws4fetch: '^1.0.20',
   'aws-cdk': '^2.166.0',
   'aws-cdk-lib': '^2.166.0',