React Native - Cannot read property 'metadata' of undefined

[tylerhanson]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

In an attempt to upgrade a mobile app project from aws-sdk v2 to v3, I'm running into an issue with the client-s3 library. We use STS web identity federation credentials and when I create an S3Client with credentials using fromWebToken all client.send calls return TypeError: Cannot read property 'metadata' of undefined. Stepping through the call stack reveals this is occurring at client-sts when stsClient.send(new AssumeRoleWithWebIdentityCommand(params)) is called. configuration.requestHandler is undefined. Supplying a requestHandler at the S3 client configuration level doesn't appear to help.

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/client-s3@3.709.0, @aws-sdk/credential-providers@3.709.0,

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

Node 18.20.4, react-native 0.76.5

Reproduction Steps

Paste this into App.tsx in a barebones react native application.

import "react-native-url-polyfill/auto";
import "react-native-get-random-values";
import "react-native-fetch-polyfill";
import '@aws-sdk/util-endpoints'

import React, { useEffect, useState } from 'react';

import {
  SafeAreaView,
  Text,
} from 'react-native';

import {
  S3Client,
  ListObjectsV2Command
} from '@aws-sdk/client-s3';
import { fromWebToken } from '@aws-sdk/credential-providers';

// Add values here
const ROLE_ARN = ""
const IDENTITY = ""
const TOKEN = ""
const BUCKET = ""

function App(): React.JSX.Element {
  const fetchList = async () => {
    try {
      const credentials = {
        roleArn: ROLE_ARN,
        webIdentityToken: TOKEN
      }
  
      const client = new S3Client({
        region: 'us-west-2',
        credentials: fromWebToken(credentials)
      })

      const input = {
        Bucket: BUCKET
      }
      const command = new ListObjectsV2Command(input);

      const response = await client.send(command);
      console.log(response)
    } catch (e) {
      console.log(e)
    }
  }

  return (
    <SafeAreaView>
      <Text onPress={fetchList}>Fetch List</Text>
    </SafeAreaView>
  );
}

export default App;

package.json

    "@aws-sdk/client-s3": "^3.709.0",
    "@aws-sdk/credential-providers": "^3.709.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-fetch-polyfill": "^1.1.3",
    "react-native-get-random-values": "^1.11.0",
    "react-native-url-polyfill": "^2.0.0"

Observed Behavior

TypeError: Cannot read property 'metadata' of undefined

Expected Behavior

STS to resolve successfully

Possible Solution

No response

Additional Information/Context

No response

[aBurmeseDev]

Hi @tylerhanson - thanks for reaching out.

I have modified the code with a few changes below:

• Import STSClient and NodeHttpHandler from @aws-sdk/client-sts and @smithy/node-http-handler.
• Create an instance of the STSClient with the requestHandler set to new NodeHttpHandler().
• Pass the stsClient instance to the fromWebToken credential provider when creating the S3Client.

import { NodeHttpHandler } from "@smithy/node-http-handler";
import { STSClient } from "@aws-sdk/client-sts";

...

function App(): React.JSX.Element {
  const fetchList = async () => {
    try {
      const credentials = {
        roleArn: ROLE_ARN,
        webIdentityToken: TOKEN
      }

      const stsClient = new STSClient({
        region: 'us-west-2',
        credentials: fromWebToken(credentials),
        requestHandler: new NodeHttpHandler(),
      });

      const client = new S3Client({
        region: 'us-west-2',
        credentials: fromWebToken(stsClient, credentials)
      })

      const input = {
        Bucket: BUCKET
      }
      const command = new ListObjectsV2Command(input);

      const response = await client.send(command);
      console.log(response)
    } catch (e) {
      console.log(e)
    }
  }

  return (
    <SafeAreaView>
      <Text onPress={fetchList}>Fetch List</Text>
    </SafeAreaView>
  );
}

Since you mentioned the upgrade from v2, here's docs on notable changes between v2 and v3 for your reference.

Let me know if that works!