angularamazon-web-servicesaws-amplifyamplifyjsaws-amplify-cli

Amplify CLI - Angular + Ionic - MFA - AdminQueries API : XMLHttpRequest.handleError [as __zone_symbol__ON_PROPERTYerror]


So, I am using Amplify with ionic + angular and have followed the following link and sublinks there,

https://aws-amplify.github.io/docs/js/tutorials/building-ionic-4-apps/

https://aws-amplify.github.io/docs/cli-toolchain/quickstart#administrative-actions

Now, what I want to create is an Admin Panel in my application by which I can create users with MFA enabled for login process (just as it is done via the aws-cognito-console). Therefore, in my form I have provided the email and phone_number as mandatory input fields and for the password I am planning to create an auto-generated one using javascript.

As I could understand from the docs, this is achievable via AdminQueries API and while initializing my project with amplify cli , I did the required configuration. As a result, I did get the boilerplate code ready in the amplify backend folder as displayed in the screen below,

Check the highlighted yellow area

Unfortunately, the boilerplate code didn't have an implementation of AdminCreateUser Method i.e.

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#adminCreateUser-property

therefore, I have myself created this method in the cognitoActions.js and the route for the same has been implemented in app.js, did some CORS settings and finally did an amplify push

But when I tried to access this api method from the amplify-angular methods, it gives me the following error (I have pasted the error below the screenshot)

enter image description here

This is what all I have in my request, response headers,

enter image description here enter image description here

{"message":"Network Error","name":"Error","stack":"Error: Network Error\n at createError (http://localhost:8100/vendor.js:263903:15)\n at XMLHttpRequest.handleError [as __zone_symbol__ON_PROPERTYerror] (http://localhost:8100/vendor.js:263394:14)\n at XMLHttpRequest.wrapFn (http://localhost:8100/polyfills.js:4541:39)\n at ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:3741:31)\n at Object.onInvokeTask (http://localhost:8100/vendor.js:70625:33)\n at ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:3740:60)\n at Zone.runTask (http://localhost:8100/polyfills.js:3518:47)\n at ZoneTask.invokeTask [as invoke] (http://localhost:8100/polyfills.js:3815:34)\n at invokeTask (http://localhost:8100/polyfills.js:4953:14)\n at XMLHttpRequest.globalZoneAwareCallback (http://localhost:8100/polyfills.js:4979:17)","config":{"url":"https://4wdmydkl7e.execute-api.ap-south-1.amazonaws.com/test/addUser","method":"post","data":"{\"user\":{\"firstname\":\"Prateek\",\"lastname\":\"k\",\"email\":\"opensource.prateek@gmail.com\",\"phoneNumber\":\"+918700416661\",\"specialization\":\"instrumentation\",\"role\":\"admin\"}}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"responseType":"json","xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"host":"4wdmydkl7e.execute-api.ap-south-1.amazonaws.com","path":"/test/addUser"}}

---- Upate 1 -----

I have added the following to my polyfills.js,

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

and this to my index.html

<script>
  if (global === undefined) {
    var global = window;
  }
</script>

Solution

  • So I did an amplify delete i.e. removed the amplify from my angular 2 project and moved to the nodejs aws sdk, in my serverless backend code along with the existing lambda functions now I have got a few more lambdas to create , delete , and list users using the following Admin Queries API,

    https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AddCustomAttributes.html

    The documentation of Amplify is still broken and therefore, I will recommend to go for a much robust API / SDK as mentioned in the link above.