Error: Configure AWS Amplify / Create a Login Page

Hi, Before I raise my issue, excellent tutorial on Serverless (pity the serverless guys didn’t write something like this).

I am going through your tutorial and everything works upto the point listed in my heading.
even the npx aws-api-gateway-cli-test --username admin@example.com --password Passw0rd! … worked.

Now that I have created the React app, it falls over once I add the amplify stuff in (i have also added the login page code into the app, as that’s when we retry the app in the tutorial.

I do have a config.js:
export default {
s3: {
REGION: “eu-west-2”,
BUCKET: “din-notes-upload”
},
apiGateway: {
REGION: “eu-west-2”,
URL: “ht://hfo5keqtdf.execute-api.eu-west-2.amazonaws.com/prod” // i removed the tps so i can post here
},
cognito: {
REGION: “eu-west-2”,
USER_POOL_ID: " eu-west-2_ipJDuNI6q",
APP_CLIENT_ID: “40o6gfv9s8lv8d1osmm4a5ie2n”,
IDENTITY_POOL_ID: “eu-west-2:06923f5f-7caf-4b8c-a4f0-fdbd90015c84”
}
};

It is the exact one from my code, so you can test as well

But the react apps falls over on the browser. see error (it’s long but, i wanted to be complete):

Error displayed in the browser immediately after a compile:

Error: Invalid UserPoolId format.

new CognitoUserPool

F:/Code/SourceTreeCode/notes-app-client/node_modules/amazon-cognito-identity-js/es/CognitoUserPool.js:50

AuthClass.configure

F:/Code/SourceTreeCode/src/Auth.ts:174

  171 | cognitoClientId: userPoolWebClientId,  
  172 | UserPoolId: userPoolId,  
  173 | domain: cognitoHostedUIConfig['domain'],
> 174 | scopes: cognitoHostedUIConfig['scope'],      | ^  
  175 | redirectSignIn: cognitoHostedUIConfig['redirectSignIn'],  
  176 | redirectSignOut: cognitoHostedUIConfig['redirectSignOut'],  
  177 | responseType: cognitoHostedUIConfig['responseType'],

View compiled

(anonymous function)

F:/Code/SourceTreeCode/src/Amplify.ts:52

  49 | // if someone is using like Amplify.Auth  
  50 | Amplify.Auth = null;  
  51 | Amplify.Analytics = null;> 
  52 | Amplify.API = null;     | ^  
  53 | Amplify.Storage = null;  
  54 | Amplify.I18n = null;  
  55 | Amplify.Cache = null;

View compiled

Function.Amplify.configure

F:/Code/SourceTreeCode/src/Amplify.ts:51

  48 | // for backward compatibility to avoid breaking change  
  49 | // if someone is using like Amplify.Auth  
  50 | Amplify.Auth = null;> 
  51 | Amplify.Analytics = null;     | ^  
  52 | Amplify.API = null;  
  53 | Amplify.Storage = null;  
  54 | Amplify.I18n = null;

View compiled

Module…/src/index.js

F:/Code/SourceTreeCode/notes-app-client/src/index.js:11

   8 | import config from './config';   
   9 |   
  10 | > 
  11 | Amplify.configure({  
  12 |   Auth: {  
  13 |     mandatorySignIn: true,  
  14 |     region: config.cognito.REGION,

View compiled

webpack_require

F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:784

  781 | };  
  782 |   
  783 | // Execute the module function> 
  784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  
  785 |   
  786 | // Flag the module as loaded  
  787 | module.l = true;

View compiled

fn

F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:150

  147 | 		);  
  148 | 		hotCurrentParents = [];  
  149 | 	}> 
  150 | 	return __webpack_require__(request);      | ^  
  151 | };  
  152 | var ObjectFactory = function ObjectFactory(name) {  
  153 | 	return {

View compiled

1

localhost:3000/static/js/main.chunk.js:1009:18

webpack_require

F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:784

  781 | };  782 |   783 | // Execute the module function> 
  784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  
  785 |   
  786 | // Flag the module as loaded  
  787 | module.l = true;

View compiled

checkDeferredModules

F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:45

  42 | 	}  
  43 | 	if(fulfilled) {  
  44 | 		deferredModules.splice(i--, 1);> 
  45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  
  46 | 	}  
  47 | }  
  48 | 

View compiled

Array.webpackJsonpCallback [as push]

F:/Code/SourceTreeCode/notes-app-client/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  
  30 |   
  31 | 	// run deferred modules when all chunks ready> 
  32 | 	return checkDeferredModules();     | ^  
  33 | };  
  34 | function checkDeferredModules() {  
  35 | 	var result;

View compiled

(anonymous function)

://localhost:3000/static/js/main.chunk.js:1:85


It seems to be complaining about ‘scopes’ but I don’t know if its a red herring.
Could anyone help? I’m pretty much out of ideas at the moment.

node -> v12.18.1
npm -> 6.14.5

sls -version
Framework Core: 1.74.1
Plugin: 3.6.15
SDK: 2.3.1
Components: 2.31.12
package.json:
“dependencies”: {
@testing-library/jest-dom”: “^4.2.4”,
@testing-library/react”: “^9.5.0”,
@testing-library/user-event”: “^7.2.1”,
“aws-amplify”: “^3.0.20”,
“react”: “^16.13.1”,
“react-bootstrap”: “^0.33.1”,
“react-dom”: “^16.13.1”,
“react-router-bootstrap”: “^0.25.0”,
“react-router-dom”: “^5.1.2”,
“react-scripts”: “3.4.1”
},

Running aws-api-gateway-cli-test (on windows, remove the ‘ps’ in invoke url to publish here):
npx aws-api-gateway-cli-test --username admin@example.com
–password Passw0rd!
–user-pool-id eu-west-2_ipJDuNI6q
–app-client-id 40o6gfv9s8lv8d1osmm4a5ie2n
–cognito-region eu-west-2
–identity-pool-id eu-west-2:06923f5f-7caf-4b8c-a4f0-fdbd90015c84
–invoke-url htt://hfo5keqtdf.execute-api.eu-west-2.amazonaws.com/prod
–api-gateway-region eu-west-2
–path-template /notes
–method POST
–body “{“content”:“hello world”,“attachment”:“hello.jpg”}”
produces:
npx: installed 106 in 21.117s
Authenticating with User Pool
Getting temporary credentials
Making API request
{
status: 200,
statusText: ‘OK’,
data: {
userId: ‘eu-west-2:d429f8d2-4960-4574-8d15-1a711e437d97’,
noteId: ‘c2ae1500-c414-11ea-a8c3-298658d0b7c2’,
content: ‘hello world’,
attachment: ‘hello.jpg’,
createdAt: 1594540403280
}
}

(difficult to get this post to respect tabs)

Regards
Den

Thank you!

Do you mind formatting your post a little better? I can’t quite make out what the error message is.

Btw, when are you getting the error? Is it when you trying to login?

Sure will tidy it up, i had it nice and tabbed and discourse removed it.
So when the app is compiled and refreshed in the browser, it’s the first thing you see (error stack trace). None of the app even gets a chance to render.

I see. It’s a weird error. Can you double-check your config? And compare it to the repo from the guide?

Hi,

I did double check it, was the same, I decided to write my own flutter app and it worked with that. Since then I have been investigating others and terraform is coming out as the front runner. Serverless is more geared towards lambda and hate the fact it uses cloud formation underneath. Terraform at least uses the api, just hate the HCL syntax and missing the typescript. But their beta is incorporating typescript so testing that.

Like I said your walk through on serverless was very good. If I was more serverless I may have stuck with it.

Thanks

Ah I see. Got it. In the future we’ll be supporting CDK as opposed to the YAML from CloudFormation.