Configure AWS Amplify

Chapter Comments
1

From @jayair on Thu Mar 15 2018 19:38:04 GMT+0000 (UTC)

Link to chapter - https://serverless-stack.com/chapters/configure-aws-amplify.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/208

2

From @davidmsvetlecic on Tue Mar 20 2018 23:01:47 GMT+0000 (UTC)

fyi (in case anyone else had this problem): I was not able to upload a file to S3 due to permission error. Even though there was no difference in the policy, creating a new Cognito Identity Pool and it worked for me.

3

From @viccooper142 on Thu Apr 05 2018 23:10:15 GMT+0000 (UTC)

Small typo: “The name: “notes” is basically telling Amplify that we want to name our API. Amplify allows you to add multiple APIs that you your app is going to work with. In our case our entire backend is just one single API.”

4

From @jayair on Fri Apr 06 2018 18:49:23 GMT+0000 (UTC)

@viccooper142 Thanks. Fixed.

5

From @ramnavan on Wed Apr 11 2018 15:45:21 GMT+0000 (UTC)

My question is behind the relationship between user pool and identity pool when performing signup and signin. Since signup and signin are primarily handled only my the Cognito User Pool, it confuses me why IdentityPoolId needs to be specified when configuring AWS Amplify? SignUp operation especially just creates user in the User Pool. What’s identity pool’s involvement here?

6

From @jayair on Wed Apr 11 2018 23:23:22 GMT+0000 (UTC)

@ramnavan I’m not sure if you had a chance to look at this chapter - https://serverless-stack.com/chapters/cognito-user-pool-vs-identity-pool.html

But the Identity Pool uses the User Pool as an authentication provider and then secures access to the other AWS resources.

7

Im getting this error Uncaught TypeError: Cannot read property ‘crypto’ of undefined when importing Amplify from “aws-amplify”;

Has anyone seen this ?

8

Was able to solve it. If anyone else is having the same issue and using webpack. Just exclude node_modules where you use babel-loader in webpack config file like this:
{ test: /.(js)$/, use: ‘babel-loader’, exclude: /node_modules/ }

1 Like
9

Thanks for reporting back.

Were you using a Webpack config on top of Create React App?

10

How to protect the configuration files? I don’t want to expose my keys in a js file, where everyone can see in the source code. I am using angular 6 though in my project.

11

These ids can be publicly visible. We are securing them on the backend with Cognito and IAM. This ensures that you need to be logged in to to your app to access these resources.

12

But what prevents me(or anyother else) to get these ids and use them in my application, wouldn’t I be able to login/register using your UserPool and etc. and thus poluting this pool with contacts from different app.

13

These Id’s are meant to be available on the client side. So in theory somebody would be able to use these to sign up for your app through a different client. Of course that is pretty similar to just signing up for your app directly. I’ll need to check if there is a way to filter based on the source domain.

15

Are you still of the opinion these Id’s can be exposed in a repo?

16

Oh yeah totally. There would be not other way to do this. And the authentication is what allows users to access these resources. The id’s on their own aren’t useful.

17

Hello, great tutorial here. I have a little difficulty. I am trying to build something similar but in react native using expo.

MY QUESTION: Why did you have to initialize AWS amplify in src/index.js? is it a convention? can i initialize it in App.js?
Forgive me if the question sounds vague, trying to get a grasp of this

18

Hmm I guess you could since we aren’t really using it in index.js. But it’s mostly by convention that we are defining it there.

19

Hello, thanks for creating this guide, it’s probably the best and most comprehensive one I’ve seen! I really appreciate your work.

I’m having issues building React as soon as I import Amplify from ‘aws-amplify’.

src/index.js
import { Amplify } from 'aws-amplify';

Build error after runing yarn start:
Error in ./~/idb/build/cjs/index.js
Module parse failed: /Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/idb/build/cjs/index.js Unexpected token (58:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (58:25)
@ ./~/@aws-amplify/datastore/lib/storage/adapter/indexeddb.js 54:10-24

/Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/chokidar/lib/fsevents-handler.js:26
  return (new fsevents(path)).on('fsevent', callback).start();
      ^
TypeError: fsevents is not a constructor
at createFSEventsInstance (/Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/chokidar/lib/fsevents-handler.js:26:11)
at setFSEventsListener (/Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/chokidar/lib/fsevents-handler.js:80:16)
at FSWatcher.FsEventsHandler._watchWithFsEvents (/Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/chokidar/lib/fsevents-handler.js:244:16)
at FSWatcher.<anonymous> (/Users/tk/Google Drive/projects/amplify-notes-app/frontend/node_modules/chokidar/lib/fsevents-handler.js:378:25)
at LOOP (fs.js:1757:14)
at processTicksAndRejections (internal/process/task_queues.js:79:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Seems like an issue with the fsevents module. I tried reinstalling fs events with the latest version manually and resetting my node_modules (removing node_modules/yarn-lock + reinstalling).

I’m using CRA for this.

Thanks for the help!

1 Like
20

I got it working! Here’s what I did:

  1. Cleaned yarn and npm cache (yarn cache clean + npm cache clean --force)
  2. Upgraded react-scripts to version 3 with yarn add react-scripts@3
  3. Changed Amplify as a default export (rather than a named export as the tutorial said), because react was complaining about it
    From
    import { Amplify } from 'aws-amplify'
    to
    import Amplify from 'aws-amplify

When I ran yarn start again it prompted me to “target the browser”, which added the following to package.json and it worked.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
1 Like
21

That’s really weird. Glad that you figured it out.

Which version of AWS Amplify do you have in your package.json?

This is what we are using:

And we import it using: