Attempting to embed AWS Lex chatbot into React site, failing with Error: Missing credentials in config (see console for details)

Question

I am comfortable with many aspects of AWS, but not with Cognito. I have built Lex style chatbots as Alexa skills, but this is my first time attemtping to integrate a Lex chatbot into an existing website. The website is coded in React.js using www.codesandbox.io as I'm just learning React. I'm comfortable with C#, but React is new for me. If some of the code below doesn't seem to do much, it's just because I"m testing different components, functions versus classes etc. Anyway, I've built a simple chatbot in Lex and have attempted to integrate it into this React site, but am getting the error - Error: Missing credentials in config (see console for details) whenever I attempt to chat with the bot. Any ideas? I'm not sure what I"m doing wrong.

import React from "react";
import ReactDOM from "react-dom";
import bootstrap from "bootstrap"; // eslint-disable-line no-unused-vars
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
import LexChat from "react-lex";
import AWS from 'aws-sdk';

AWS.config.update({
  region: "us-west-2",
  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: "us-west-2:<redacted>"
  })
});

class CDataRow extends React.Component {
  render() {
    return (
      <h1>
        Name:{this.props.myname}
        <br />
        Email:{this.props.email}
      </h1>
    );
  }
}

const TitleCard = props => (
  <div class="container">
    <div class="media">
      <span class="media-left">
        <img
          src="https://content.mactores.com/2017/05/19105931/Amazon-Rekognition.png"
          alt="..."
        />
      </span>
      <div class="media-body">
        <h3 class="media-heading">
          {props.titleheading} <h5>{props.subtitle}</h5>
        </h3>
      </div>
    </div>
  </div>
);

const Datarow = props => (
  <div>
    <b>Name:{props.myname}</b>
    <br />
    <b>Email:{props.email}</b>
  </div>
);
const Layout = props => (
  <div>
    <header>Super Header of Document</header>
    <main>{props.children}</main>
    <footer>Super Footer Copyright mystuff 2018 (C)</footer>
  </div>
);
const DomainOutside = props => (
  <div>
    <div class="panel panel-default">
      <div class="panel-body">{props.children}</div>
    </div>
  </div>
);
const TabListRow = props => (
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div class="card">
          <h5 class="card-header">{props.cardtitle}</h5>
          <div class="card-body">
            <p class="card-text">{props.cardcontent}</p>
          </div>
          <div class="card-footer">{props.cardfooter}</div>
        </div>
      </div>
      <div class="col-md-10">
        <h2>{props.blockheader}</h2>
        <p>{props.blockcontent}</p>
        <p>
          <a class="btn" href="#">
            View details »
          </a>
        </p>
      </div>
    </div>
  </div>
);

function App(props) {
  console.log(<CDataRow myname="JoJo" email="jojo@ops.org" />);
  return (
    <div>
      <TitleCard
        titleheading="{Lex Integration Test}"
        subtitle="Embedding Lex into a website"
      />
      <LexChat
        botName="TestReactBot"
        IdentityPoolId="us-west-2:<redacted>"
        placeholder="Placeholder text"
        style={{ position: "absolute" }}
        backgroundColor="#FFFFFF"
        height="430px"
        headerText="Store help"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App version="1" />, rootElement);

Answer 1

After creating my identityPoolId In my own case, I had to attach these two policies AmazonPollyReadOnlyAccess and AmazonLexRunBotsOnly.

To do that Navigate to the IAM console and select Roles. In Roles find the Cognito roles you created and attach the policies.