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

[sudhirjena]

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";

[sekamaneka]

i also face the same problem

[justenau]

Receiving the same error but for fromIni as well

[JuanUmbarila-engooden]

Has anyone found a way to fix it? I have the same problem with fromIni

[justenau]

One strange workaround that worked for me after a lot of experimenting was using version 3.40 of this package and importing fromIni with require statement instead of the usual import (even though my project is with es6)
const { fromIni } = require("@aws-sdk/credential-providers");

Though that did not work with forEnv and this workaround doesn't solve the initial problem there is on the newest version :/

[JuanUmbarila-engooden]

One strange workaround that worked for me after a lot of experimenting was using version 3.40 of this package and importing fromIni with require statement instead of the usual import (even though my project is with es6) const { fromIni } = require("@aws-sdk/credential-providers");

Though that did not work with forEnv and this workaround doesn't solve the initial problem there is on the newest version :/

Thank you for you reply!!!
I made that change in the code but when I call fromIni it still does not recognize it.
fromIni is not a function

It's a strange behavior of the library

[stuartmccoll]

Has anybody been able to resolve this?

I'm hitting the same issue with fromIni in v3.58.0.

import { fromIni } from "@aws-sdk/credential-providers";

The following error is raised:

export 'fromIni' (imported as 'fromIni') was not found in '@aws-sdk/credential-providers' (possible exports: fromCognitoIdentity, fromCognitoIdentityPool, fromTemporaryCredentials, fromWebToken)

Looking at index.web.ts, the exports match those returned in the above error message:

export * from "./fromCognitoIdentity";
export * from "./fromCognitoIdentityPool";
export * from "./fromTemporaryCredentials";
export * from "./fromWebToken";

Do additional exports need to be added here to match those within index.ts?

[trivikr]

Assigning to @ajredniwja for triaging.

[trivikr]

We don't export fromEnv in browser environments, as they don't have an environment to read variables from.
Similar use case for fromIni which reads from configuration files, which do not exist in browser environments.

For a browser application, you need to use one of the following credential providers: fromCognitoIdentity, fromCognitoIdentityPool, fromTemporaryCredentials, fromWebToken

@sudhirjena @justenau Can you explain you use case where you plan to read credentials from environment or configuration files in the browser?
If you're using server side rendering in your React application, does any configuration need to be set to use Node.js code from dependencies?

[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.

[trivikr]

it is common for environment variables to be placed into process.env via build processes

Can you share an example or documentation of how it's done in case of create react app?
I'm wondering if it's specific to React or CRA or used extensively in frontend ecosystem.

• documented (of which these omissions are not)

I created a feature request to add documentation at #3586

• throw an error, with an intelligible message, rather than simply being omitted from the bundles which causes lots of confusion.

The existing error clearly mentions fromEnv is not exported for browser environment. The users shouldn't try to import credential provider not available in their environment.

[diehbria]

The existing error clearly mentions fromEnv is not exported for browser environment. The users shouldn't try to import credential provider not available in their environment.

Which is not documented, and clearly many people think this is an accidental bug, as evident by this ticket. This method of communicating the API is not a good design, because the library still exports them as typescript types.

Environment variables in the front end:

• https://create-react-app.dev/docs/adding-custom-environment-variables/
• https://www.npmjs.com/package/rollup-plugin-inject-process-env
• https://webpack.js.org/plugins/environment-plugin/
  this is not a CRA specific thing, every modern front-end build system has ability to inject process.env. It's used commonly for local development configurations.

[trivikr]

• create-react-app.dev/docs/adding-custom-environment-variables

This wiki clearly mentions

WARNING: Do not store any secrets (such as private API keys) in your React app!

It's not explicitly called out in homepage of rollup and webpack plugins, the SDK shouldn't expose fromEnv for frontend which would encourage users to do something which is not a standard. Although injecting process.env is supported by CRA directly, and in rollup and webpack through plugins - it's not a browser standard to have environment variables in the frontend.

If we officially expose fromEnv in the frontend, users may prefer it over frontend specific standard credential providers fromCognitoIdentity, fromCognitoIdentityPool, fromTemporaryCredentials and fromWebToken.

Here's the workaround to explicitly set credentials if you're injecting them through process.env

const client = new ClientName({
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  },
})

This explicit code during client creation will ensure that it's not recommended by the SDK.
I'm marking this issue as guidance.