title: AWS Amplify federated Okta authentication with hosted Cognito UI
body: <p>I'm trying update an existing React Amplify app which authenticates using AWS Cognito user pools to also authenticate using Okta SSO integrated via SAML. Cognito was configured according to <a href="https://aws.amazon.com/premiumsupport/knowledge-center/cognito-okta-saml-identity-provider/" rel="nofollow noreferrer">these instructions</a> and I'm pretty sure everything is configured correctly, because when I use the &quot;Launch Hosted UI&quot; button from the Cognito console, I see the correct login dialog with both Okta and Cognito username/password panels and can authenticate using either.</p>
  <p>I can't get the same panel to display when invoked using the <code>Authenticator</code> component in React though and I think it's because I don't have the <code>federated</code> parameter set correctly, but the only documentation I can find is for configuring with Google, Facebook, or Auth0, not Okta.</p>
  <p>The error that I'm getting is:</p>
  <p><code>Unhandled Rejection (TypeError): Cannot read property 'oauthSignIn' of undefined</code></p>
  <p>and the code is set up as follows (but I've tried MANY permutations without luck):</p>
  <pre><code>const federatedInfo = {
      oauth_config: {
          domain: 'xxx.auth.us-east-1.amazoncognito.com',
          clientID: 'zzz',
          redirectUri: 'http://localhost:3000/',
          audience: 'urn:amazon:cognito:sp:us-east-yyy',
          responseType: 'token', //'token id_token', // for now we only support implicit grant flow
          scope: 'openid email',
          returnTo: 'http://localhost:3000/'
      }
  };
  
  
     &lt;Authenticator
          {...props}
          theme={AmplifyTheme}
          federated={federatedInfo}
          hideDefault={true}
          signUpConfig={authConfig.signUpConfig}
          onStateChange={(state, data) =&gt; {
              setAuthData({authState: state, user: data});
          }}
          children={[&lt;Greetings/&gt;, &lt;SignIn federated={federatedInfo}/&gt;, &lt;ConfirmSignIn/&gt;, &lt;VerifyContact/&gt;, &lt;ForgotPassword/&gt;, &lt;RequireNewPassword/&gt;]}
      /&gt;;
  </code></pre>
  <p>Any hints on how to get this to work?</p>