type checking error with `fromEnv` in @aws-sdk/credential-providers

Describe the bug

While using @aws-sdk/credential-providers in a React typescript application having the following code:

import { initialize } from "@iot-app-kit/source-iotsitewise";
import { fromEnv } from "@aws-sdk/credential-providers";

const { query } = initialize({
  awsCredentials: fromEnv(),
  awsRegion: "us-east-1",
});

We encounter the following build error:

ERROR in ./src/App.tsx 16:18-25
export 'fromEnv' (imported as 'fromEnv') was not found in '@aws-sdk/credential-providers' (possible exports: fromCognitoIdentity, fromCognitoIdentityPool, fromTemporaryCredentials, fromWebToken)

Your environment

macOS

SDK version number

@aws-sdk/credential-providers@3.53.0

Is the issue in the browser/Node.js/ReactNative?

Browser

Details of the browser/Node.js/ReactNative version

Browsers:
    Chrome: 98.0.4758.109
    Firefox: 91.6.0
    Safari: 15.3

Steps to reproduce

Please share code or minimal repo, and steps to reproduce the behavior.

• Create a new ReactJS application

npx create-react-app my-app --template typescript

• Install minimal packages to reproduce issue

npm install @aws-sdk/credential-providers @iot-app-kit/source-iotsitewise

• Add following code to App.tsx

import { initialize } from '@iot-app-kit/source-iotsitewise';
import { fromEnv } from '@aws-sdk/credential-providers';

const { query } = initialize({ awsCredentials: fromEnv(), awsRegion: 'us-east-1' });

• Either run npm start or npm run build

Observed behavior

React app fails to run or build due to following type checking error

ERROR in ./src/App.tsx 16:18-25
export 'fromEnv' (imported as 'fromEnv') was not found in '@aws-sdk/credential-providers' (possible exports: fromCognitoIdentity, fromCognitoIdentityPool, fromTemporaryCredentials, fromWebToken)

Expected behavior

Although @aws-sdk/credential-providers has the following exported member, the type resolution fails. The type resolution for fromEnv should not fail.

export * from "./fromCognitoIdentity";
export * from "./fromCognitoIdentityPool";
export * from "./fromContainerMetadata";
export * from "./fromEnv";
export * from "./fromIni";
export * from "./fromInstanceMetadata";
export * from "./fromProcess";
export * from "./fromSSO";
export * from "./fromTemporaryCredentials";
export * from "./fromTokenFile";
export * from "./fromWebToken";

[diehbria]

It is incorrect to say that fromEnv wouldn’t work in the browser environment, it is common for environment variables to be placed into process.env via build processes. The use case is for local development work flows - it is a huge burden to users of software to need to figure out how to set up something such as IAM to get a ‘hello world’ working.

Due to security concerns, it is highly recommended against guiding people towards hard coding strings directly into their code bases. Within Amazon, we are actually strictly forbidden from even suggesting this within our example repositories or code samples.

For this reason we need a good path forward on these local development use cases.

Additionally, for any credential-providers which are intentionally not supported in the browser, they should be:

• documented (of which these omissions are not)
• throw an error, with an intelligible message, rather than simply being omitted from the bundles which causes lots of confusion.

[evanottinger]

I have just encountered this same issue. I don’t really understand the logic of not including fromEnv / fromProcess / fromIni in the exports for the browser version.

How do frontend developers ensure that environment variables are removed when pushing to production?

Using AWS, we can inject secrets into the environment of containerized applications at runtime. This is even the recommended practice with ECS according to the documentation. We can also make the environmental variables accessible from containers by mapping the environmental variables of an EC2 from EB to the container using docker-compose according to the EB developer’s guide. It’s not a stretch to use an entrypoint script in a container to retrieve the secrets from the environment (as described in the documentation) and place them in a credentials file which the React application can access.

I would also like to emphasize @diehbria 's comment:

If the decision is made not to include these, I think it should be considered to have the credential providers throw errors at run time which point towards the documentation and explain these aren’t supported.

My question then becomes, what is the recommendation from AWS if we’re not able to import fromEnv / fromProcess / fromIni in a containerized React application?