Search code examples
reactjsamazon-web-serviceswebrtcamazon-cognitoaws-amplify

Error: AWS Web RTC Verification with Cognito


I am trying to connect my javascript app AWS WebRTC with a Cognito user to get its credentials dynamically but faced the following error code:

json.js:52 Uncaught (in promise) CredentialsError: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1

I have done hard coding my credentials into the configuration and it has work successfully, however that's a bad practice hence I am trying to get AWS Web RTC credentials via my Cognito user. I have setup user pool and link in to my federal identities already. The credentials are now managed by AWS Amplify which loads AWS user profile from config file (./aws/credentials).

Following this two guides:

  1. https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-integrating-user-pools-with-identity-pools.html
  2. https://docs.aws.amazon.com/cognito/latest/developerguide/getting-credentials.html

I've written the following snippet to get my credentials but now faced the error.

AWS.config.region = '<REGION>';
  AWS.config.update({
    credentials: new AWS.CognitoIdentityCredentials({
      IdentityPoolId: '<Region>:<IdentitiyPoolID>',
      Logins: {
        'cognito-idp.<Region>.amazonaws.com/<UserPoolID> ': <id token from cognito>,
      },
    }),
  });

  var accessKeyId;
  var secretAccessKey;

  AWS.config.credentials.get(function () {
    accessKeyId = AWS.config.credentials.accessKeyId;
    secretAccessKey = AWS.config.credentials.secretAccessKey;
  });

const state = {
    accessKeyId: accessKeyId,
    secretAccessKey: secretAccessKey,
    region: 'region',
}
async function startPlayerForViewer();

Any helps is much appreciated ! Cant find much updated resources/examples online.


Solution

  • credentials.get() is an async operation that receives the keys in a callback, while the state definition happens before that callback is received. Hence, the keys are not set. You need to ensure that you define the state after the callback and ensure that the connection happens afterwards.