Build an Authentication/Login System on AWS with React.js and a Serverless API - Part 2 (frontend)

[noeldolan]

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. 👍😎

[js__k]

I love your videos! However, React is evolving so quickly that this example requires many changes in various parts 😂

[lizzigibson]

great videos! They've been really useful to put a fullstack app together on AWS. I'm excited to see more!

[mottacoke]

Well done mate! Honestly one of the best tutorials Ive seen in ages.

[joecrash]

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.

[riyazdharamshi]

Great videos! Why not use AWS Cognito instead of building everything from scratch? Any thoughts on AWS Amplify?

[rockvnme]

Love it so much, I would like to watch a login with Cognito User Pool. Thanks 😘

[DaveThomson]

It works! Was able to create an account and login

[rodrigofrancalacci]

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.

[khandoor]

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?

[alcampignite]

Hi Felix, would it possible to have a tutorial on the refresh token?

[baos]

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

[noahsmith]

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.

[studentxin]

I retied in 3 regions (that was irritating but I did) I was not able to test dummy api (forget the remainig part)

[chamberscdaniel]

Can you make a tutorial about restricting video content on the premium section?

[SergeyGrebenkin]

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: {
"*",
"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",
"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.

[petarbjelica]

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 )

[meteisiksalan]

Would you be able to share the github for the front-end code portion aswell?

[sushmasrivemparala]

Can you keep those front end and backend files?

[AliHumadi]

why i ge
t 401 and sometimes 502 error