anomalyinnovations / serverless-stack-demo-client Goto Github PK

Though I am logged in as a valid user, I can neither get nor create notes from localhost. I keep getting 403 { missing authorization token}. Can someone help with this?

Getting this error response

User: arn:aws:sts::abjkdbfjadfafd:assumed-role/notes-app-api-dev-CognitoAuthRole-hajfhdjkfhdf/CognitoIdentityCredentials is not authorized to perform: execute-api:Invoke on resource: arn:aws:execute-api:us-east-1:********7995:1nfaldncc5/dev/GET/notes

I suggest to replace the import statement in aws-lib
import AWS from 'aws-sdk';
with
import AWS from 'aws-sdk/global';

this will import aws config, etc without all the client services and apis.

This is enough to get the cognito credentials.

Size is reduced from 1.45mo to 145.69kb for aws-sdk.

source : https://github.com/aws/aws-sdk-js

The email input type in Login.js prevents the form from being submitted for usernames in Chrome.

Getting an error trying to run this...

create-react-app is up to date etc

Through app.js

async componentDidMount() {
    try {
      if (await Auth.currentSession()) {
        this.userHasAuthenticated(true);
      }
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
      this.props.history.push("/");   // Simply add this line to protect all path
    }
    this.setState({ isAuthenticating: false });
  }

Why do you want to use AuthenticatedRoute.js ?

Very thanks to create this demo that I can easily start a Cognito UI in 5 minutes (the only change is to replace src/config.js with my cognito details)

But when go through src/Routes.js, I realised that I need define api gateway paths individually

In this demo, you made paths Notes and Notes/{id} with backend serverless API

  create:
    handler: create.main
    events:
      - http:
          path: notes
          method: post
          cors: true
          authorizer: aws_iam

  get:
    handler: get.main
    events:
      - http:
          path: notes/{id}
          method: get
          cors: true
          authorizer: aws_iam

But I have a lot of paths in api gateway events, do I have to write routes for each path? I don't want to do that.

So how to manage the api gateway paths without define them one by one in src/Routes.js? After cognito login, it should redirects the access to backend API gateway, let API gateway takes over the rest.

Kept getting NotAuthorizedException response from registration/login
{ "__type":"NotAuthorizedException", "message":"Unable to verify secret hash for client ****************" }

The Redirection on login seems broken.

To reproduce

1. get a link of notes like :
   http://localhost:3000/notes/1bbbcb50-5ca9-11e7-a06c-01d04c457710

2. logout

3. paste the link in browser and key in user name pass word to login.

4. After login will see the message :

proxyConsole.js:56 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Notes component.

This demo gives a lot of help on how to use Cognito, but recently aws archived one sdk used in this demo: amazon-cognito-identity-js and move on with AWS Amplify.

https://github.com/aws/amazon-cognito-identity-js

Amazon Cognito Identity SDK for JavaScript

NOTE: We have discontinued developing this library as part of this GitHub repository. We will continue to develop it as part of the AWS Amplify GitHub repository. You can still reach us by creating an issue on the AWS Amplify GitHub repository or posting to the Amazon Cognito Identity forums. Versions 1.x will still be available via NPM. Future development will continue on the 2.x versions.

Would you please change the codes to use AWS Amplify?

Thanks.

Hello,
Thanks for a great tutorial.
For those who want to use the components in an application, I have noticed a small glitch on the RouteNavItem component:
The onclick is overriden without a preventDefault which leads to both a standard navigation on the link and get on the server as well as the history push. This causes the page to be loaded as well, loosing the AWS.config.credentials, leading to a retrieval of the credentials from storage and refresh of the token at every navigation from a navbar link plus aborted APIG calls as the page reloads while executing.
On the current app this effect is limited as navigations are mostly programmatic (e.g. login page redirect to home, note detail opening/editing) but can still be noted from a note, navigating to the home page.
For expanded apps with several menus with APIG initial loading, the effect will be far more noticeable with APIG

alert messages popping out and a luggish load of the containers (done twice).

I would suggest the following change on RouteNavItems.js (12):

    onClick={e => {e.preventDefault(); history.push(e.currentTarget.getAttribute("href"));}}

only the push is executed, removing issues of server back and forth and aborted APIG calls.
Hope it helps.
Cheers,
Charles

I want to delete user from cognito Pool

Missing

const childProps = {
  isAuthenticated: this.state.isAuthenticated,
  userHasAuthenticated: this.userHasAuthenticated
};

in App.js beneath render

See the screenshot - does all this Async magic get rejigged around on the fly or something?

Hi,
So far everything has ran well and passed all the tests. I could upload my files as well and I see them in my DynamoDB. However, I am currently getting a 500 error when I load my page after implementing the renderNotesList function in Home.js. When inspecting and clicking on /prod url, it says ""error": "One or more parameter values were invalid: Condition parameter type does not match schema type"". I looked through the discourse and the only thing I could find was to check DynamoDB to make sure I have the correct attribute names, which I do. Any help is appreciated,
Thanks.

Getting alert per screenshot when trying to login after enabling saving the usertoken to the state.

I've copied the App.js and Login.js files from this repo which matched what I have and still having the same issue.

https://puu.sh/uHuK2/931462da8b.png

Hitting this in the Auth.signOut() call:

TypeError: Cannot read property 'clearCachedId' of null

I've actually wrapped the call in a try-catch, as it swallows the exception and does nothing otherwise.

Must be an aws-amplify issue, however.

{
  loader: "css-loader",
  options: {
     modules: true,
     localIdentName: "[name]-[local]_[hash:8]"
  }
}

css failed

import styles from './Home.scss'

The printed styles are not what I want

how come this line is missing 0 as mentioned in the tutorial

this.props.history.push("/");

I followed the guide: https://serverless-stack.com/chapters/create-a-new-reactjs-app.html

and got this error on the login with AWS Cognito section:

TypeError: WEBPACK_IMPORTED_MODULE_0_aws_sdk_global.util.crypto.lib.randomBytes is not a function

Then I downloaded the whole project installed and run it and got the same error.

"postdeploy": "aws cloudfront create-invalidation --distribution-id E1KTCKT9SOAHBW --paths '/*' && aws cloudfront create-invalidation --distribution-id E3MQXGQ47VCJB0 --paths '/*'",

Why have 2 distribution ID?

Several people are getting this error, but have opened the issue under the wrong project:

sst/sst.dev#114

TypeError: WEBPACK_IMPORTED_MODULE_3__sigV4Client.a.newClient(...).signRequest is not a function

I've confirmed that my awsLib.js and sigV4Client.js are identical to the source in github. This issue seems to only occur upon login. If I reload the page (hard refresh) the homepage with items renders just fine. I'm guessing it has something to do with the proximity of the AWS call to Lambda, and the login/authentication?

I'm not finding a resolution - any ideas?

Anyone found it hard to hit breakpoints or set them up in chrome with this version of create react app?

Ie see how some of these are greyed out

https://serverless-stack.com/chapters/redirect-on-login.html

The above chapter specifies a function querystring. This function fails by taking a url of type

/login?redirect=/myaccouny?somearg=hithere&diffarg=hello&random=2019235929rwfsjfoo98iuih

and redirecting to

/myaccouny?somearg=hithere

cutting off any additional query args after the first one in the url redirected to

    <UnauthenticatedRoute path="/login" exact component={Login} props={childProps} />
    <AuthenticatedRoute path="/settings" exact component={Settings} props={childProps} />

How to implement login page without Navbar ?
I want to show Navbar when I have logged in.

Hi team, The issue is with multiple sign-outs of the same user.

The other day I was experimenting a feature which is known as global sign out of the same user across devices and what I saw that I wasn't able to logout automatically from one screen/device and stayed signed in when I signed out from the other screen/device with the same user signed in both the screens/devices.

What could be done to mitigate this issue?

I want to create admin and user permissions to get different menu by using cognito groups(Admin, User).
how to determine which current user's identity is admin or user ?
how to add a user into groups after signup?

What is happening:

When posting a new note on /notes/new a alert error is displayed 'SyntaxError: Unexpected end of JSON input'.
No note is posted to AWS

What is expected to happen:

Note is posted to AWS without error

Steps to reproduce

In ./src/libs/awsLib.js -> Function invokeApi
If the return has results.json() on the end the error will display. Removing .json() will post the note.

However, if .json() is remove when displaying the default route (./src/containers/Home.js) then the web app fails with error 'Unhandled Rejection (TypeError): Cannot read property 'trim' of undefined'

Similar to red-gold/react-social-network#36

In your new updated version of RouteNavItem.js you have put a lambda in the render method.

The problem with these types methods is that they can not be referenced a second time causing them to be recreated in memory. Depending on how often this is being rendered this can cause a significant memory leak and performance hit.

I recommend assigning the method's memory address to a container.
const clickHandler = (e) => { ... }

I've tried a few different ways to make the login page the default home page, but can't seem to get it to work without causing weird issues with being unauth'd or having the URL not land.

What's the proper way to setup the route so the login page is the home page, and also the fallback for logout and 404?

I think this is more of a configuration issue.
https://hackathon.jatazoulja.com/article/5

This page isn’t working
hackathon.jatazoulja.com redirected you too many times.
Try clearing your cookies.
ERR_TOO_MANY_REDIRECTS

I followed the steps here:
https://serverless-stack.com/chapters/create-a-cloudfront-distribution.html