anomalyinnovations / serverless-stack-demo-client Goto Github PK
View Code? Open in Web Editor NEWSource for the demo app client in the Serverless Stack Guide
Home Page: https://demo2.serverless-stack.com
License: MIT License
Source for the demo app client in the Serverless Stack Guide
Home Page: https://demo2.serverless-stack.com
License: MIT License
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.
"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:
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?
Missing
const childProps = {
isAuthenticated: this.state.isAuthenticated,
userHasAuthenticated: this.userHasAuthenticated
};
in App.js beneath render
The Redirection on login seems broken.
get a link of notes like :
http://localhost:3000/notes/1bbbcb50-5ca9-11e7-a06c-01d04c457710
logout
paste the link in browser and key in user name pass word to login.
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.
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
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.
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?
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
{
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
Kept getting NotAuthorizedException response from registration/login
{ "__type":"NotAuthorizedException", "message":"Unable to verify secret hash for client ****************" }
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
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.
<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.
Similar to red-gold/react-social-network#36
I want to delete user from cognito Pool
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
Note is posted to AWS without error
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'
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
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.
how come this line is missing 0 as mentioned in the tutorial
this.props.history.push("/");
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.
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?
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) => { ... }
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
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 ?
The email input type in Login.js prevents the form from being submitted for usernames in Chrome.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.