Build an Authentication/Login System on AWS with React.js and a Serverless API - Part 2 (frontend)
HTML-код
- Опубликовано: 12 сен 2024
- This is a 2 part tutorial series where I talk about how to build a complete register / login system on AWS from scratch. The backend is a node.js serverless API with a dynamodb for user information storage. It uses bcrypt to encrypt passwords and uses jwt to generate tokens. The frontend is built with react.js and is hosted on an AWS S3 bucket.
Support the channel plz 😊: www.buymeacoff...
Part 1 (backend): • Build an Authenticatio...
video on how to host a website with a custom domain and https: • Host a Website on AWS ...
bucket policy: jinmeister.com...
Another great video following on from part 1. Not too surprising that as video is a couple of years old, I ran into a few minor problems related updated version of react-router-dom, but managed to eventually get around them.
Big thank you for taking the time to put this video together. 👍😎
I have got the error in register. js as status is undefined instead of displaying already exists could u pls help me ?
great videos! They've been really useful to put a fullstack app together on AWS. I'm excited to see more!
Glad that u found it helpful!!
Well done mate! Honestly one of the best tutorials Ive seen in ages.
Thanks mate :)
I love your videos! However, React is evolving so quickly that this example requires many changes in various parts 😂
I really enjoy your short, simplistic tutorials - thank you! I have tried to walk through this step by step but due to the new v6 of react-router-dom, I'm unsure exactly how to make it work without getting a blank page at time for the protected pages. Could you please post a follow-up for this project as I really appreciate the simplicity of the project without a lot of necessary things you see with other tutorials.
Love it so much, I would like to watch a login with Cognito User Pool. Thanks 😘
Glad it helped
Yes, please. +1 for Cognito.
It works! Was able to create an account and login
Actually I got runtime error as an cannot read properties of undefined(reading status),could you please help me by giving any solution
Thanks!
Thank You SO much ♥
Do u got the output
I am getting an error as cannot read properties of undefined
Great videos! Why not use AWS Cognito instead of building everything from scratch? Any thoughts on AWS Amplify?
That’s a good call out..aws amplify is prob a simpler solution. This is a tutorial for ppl to understand the ins and outs of the system
gonna love this i know for sure
There is interest here for more. Let's add on to this please maybe another database for 'Projects' or something and really explore fine grained authorization. So maybe an Admin can add projects and non-logged in and Guest users can only view the Projects. Just an idea that builds on top of this. Also what about storing our User to Global state using Context api?
Hi Felix, would it possible to have a tutorial on the refresh token?
Couple of comments to this tutorial. If you open frontend and test from chrome (not from postman), it uses CORS preflight request to OPTIONS method of register resource in backend.
1. What you need to do is to specify the lambda handler for OPTIONS method of register resource in API and write the following in lambda index.js:
case event.httpMethod === 'OPTIONS':
response = util.buildCORSResponse(200, 'Success');
break;
where buildCORSResponse is in util.js:
function buildCORSResponse(statusCode, body) {
return {
statusCode: statusCode,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "content-type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE",
"Content-Type": "application/json"
},
body: JSON.stringify(body)
}
}
2. Bind OPTIONS method for each resource to lambda in API Gateway, so lambda could handle OPTION requests from clients and return the above-mentioned values. This is important!
after that the register tab will work as shown in the video.
I still get the CORS error when trying the register form. I have added the case in inde.js and i added the function in util.js.
@@lundkvistarn Use Firefox browser to see the request and response. F12->Network. It shows more information than Chrome.
@@SergeyGrebenkin Managed to solve it thanks. I had to also enable CORS on the post method in the API gateway.
Still get from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. PLs advise
@@lundkvistarn can you help me: i still get the CORS error, even after adding the code and enabling the CORS in Gateway!
Building an Ecommerce, I would like to know how do a create a profile page for each user once login happens, with its photo, wish list products, orders history, etc... But can't find a way to save and retrieve this information using the AWS bundle.
I got the cors No 'Access-Control-Allow-Origin' header is present on the requested resource. tried different ways to enable cors in api gateway but still doesn't work
im getting this error when trying to make the axios requests from the frontend (they work in postman just fine):
{my api gateway}.... blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Felix, what about hiding my x-api-key from the client? There is no server in the static S3 website, so I can't really send it from there. What do you purpose? (CloudFront & lambda@edge maybe?)
I retied in 3 regions (that was irritating but I did) I was not able to test dummy api (forget the remainig part)
why i ge
t 401 and sometimes 502 error
Can you keep those front end and backend files?
Can you make a tutorial about restricting video content on the premium section?
i know where your heading to ?
Can anyone share the code ?
Hi Felix, i have a question regarding S3 bucket settings. I was curious, if i allow public access to my bucket, does that mean that anyone can write in it ? ( I am afraid that can make my data to go over the amazon free limit, and charge me on my credit card )
the way we set up the s3 access policy (i.e., allow public access for website hosting) is only for public read NOT write. other people cannot write files to it!!!!
@@FelixYu buckets should never be public, fullstop
Would you be able to share the github for the front-end code portion aswell?
here is the source code for the frontend:
github.com/felixyu9/complete-register-login-system-frontend
Hey Felix I am getting error the back end server is down what to do now
that means there is an error in the lambda function. go to the lambda console -> monitoring -> view logs in cloudwatch. u can see the error there and fix it accordingly
Good job but i am getting 405 Method not allowed error
Make sure u have the endpoint and method set correctly
@@FelixYu yes it got resolved thanks