Adding Cognito Signup and Login to your React App with AWS Amplify

[@송대선-s8g]

Thank you so much! you just saved one programmer's life...!

[@CompleteCoding]

Haha. Glad I could help!

[@LeonardoArangoCifuentes]

Hello, thank u so much for the tutorial, one question, what is the difference between the import you do and this one: import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css';

[@CompleteCoding]

This video was made before the latest version of the Amplify UI Library came out. You code is more up to date than this video now.

[@martyoneill3468]

brother this is excellent! greetings from dagestan

[@jamesbotwina8744]

such a great tool. Saves a ton of time. No more having to worry about token authentication.

[@CompleteCoding]

It's amazing how easy login and authentication becomes with cognito

[@jamesbotwina8744]

@@CompleteCoding Does it cost any money to use the forgot login functionality where AWS sends you a verification code in an email?

[@CompleteCoding]

@@jamesbotwina8744 I don't think that it does cost to send those emails. AWS SES has a free tier of 62,000 emails per month

[@jamesbotwina8744]

@@CompleteCoding wow, very nice. Looks like you can get a lot done with the free tier. I've also been looking into AWS Activate for a startup idea I have. $1000 in credits is huge!

[@CompleteCoding]

@@jamesbotwina8744 Yes, I think I use a few dollars a month on all of my projects combined. Even getting one or two paying users covers the AWS costs.

[@jdchannelviewer]

Note: This tutorial is out of date.

[@pranavbedre7841]

I am looking into using amplify and cognito for my project because I want to learn AWS. Can you mention which part is outdated so I can look for an alternative or should I switch to a different tutorial series?

[@programmusicuk]

Thanks Sam - Creeping up towards that 5K subscribers mark!

[@CompleteCoding]

I'm looking to be putting out more videos now so it shouldn't be long!

[@mbharatm]

Superb! Starts right off with EXACTLY what I wanted to take a look at... Thanks!

[@CompleteCoding]

Glad you liked it!

[@syremusic_]

Excellent video, very easy to follow. Thanks!

[@CompleteCoding]

Glad it was helpful!

[@nadiar646]

great tutorial, looking forward to building out the app with the dynamodb tutorial :)

[@CompleteCoding]

Have fun!

[@jeffjcd]

Great Content! I’ve been looking for something like time for almost a week now. Thank You 😊 so much

[@CompleteCoding]

My pleasure. I'm glad it was useful

[@alfredabate3176]

Thank you so much. You help me understand how to use React with Amplify.

[@CompleteCoding]

Happy to help!

[@xuloIsaias]

Great video!, but how do I control to create users only from my domain?

[@CompleteCoding]

You can change the settings so that users aren't able to sign themselves up. This is a setting called "Only allow administrators to create users" You can then create users from within the Cognito Console.

[@Miksta98]

Thanks man, very underated tutorial, subscribed.

[@CompleteCoding]

Thanks for the sub!

[@anupritakasbekar8172]

i have followed every step which you shared but I am getting error Attempted import error: 'AmplifySignOut' is not exported from '@aws-amplify/ui-react'. I install amplify packages with @lastest version but still getting same error. can anyone guide me please

[@CompleteCoding]

Amplify has published a V2 of their npm package and it has a lot of changes. If you want to get it working you can just install v1 npm i @aws-amplify/ui-react@1.2.26 The other option is just creating a button that when clicked calls Auth.signOut() docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-out Or looking at the v2 docs and changing it to work with that

[@user-ov1ps7go4m]

At 3:23 even though im in the amplify-react-app directory, it gives me errors when I try the amplify configure command

[@yo1414]

Very nice - thank you Sam!

[@erniea5843]

Fantastic job! Easy to follow and understand. keep up the good work

[@CompleteCoding]

Thanks for the support Ernie

[@pastafarian7]

Can Amplify set up React router? Or do I have to do that myself? (I'm asking other places too, no worries if you're busy, just something I wish was included in this tutorial)

[@TheCoderCareer]

Simple and concise, excellent tutorial - subscribed

[@CompleteCoding]

Thanks for the sub!

[@khandoor7228]

Really nice Sam, I'm looking forward to building this out more. I hope that is your intention. Hopefully a DB (Dynamo perhaps) and deployment maybe??

[@CompleteCoding]

That's the plan! Amplify allows you to connect directly to Dynamo

[@rbrojas2040]

having trouble with AmplifySignOut since it might be deprecated?

[@tranminhhaifet]

Many thanks! Has anyone customized style of Sign Out Button?

[@CompleteCoding]

I think the best way to customise the signout (or signin) is to create your own component and just call the Amplify methods for signing in and out. docs.amplify.aws/lib/auth/emailpassword/q/platform/js#sign-out

[@Petee92HTID]

Awesome tutorial man, helped me a lot. Thanks

[@CompleteCoding]

Glad it helped!

[@khanf13]

super helpful! just curious - lets say after logging in i want the user to be able to create a blog post and only users which the creater of the blogpost adds to the list of blog readers can see that blog post...how would i do this in amplify??

[@CompleteCoding]

Really interesting idea. You could do it by creating an 'approved reader' table. Each row has a primary key of the reader's userID and a range key of the articleID as well as a secondary index with primary of authorID and range key of articleID + reader userID. You'd then create a query called 'getArticles' which would query the approved readers table. That would return a list of article IDs. You'd then use those to get the articles. The owner of the article would be able to query all of the users for a given article. They could then add and remove rows from that table to allow or disallow readers.

[@BC_Clips]

Great video! thank you!!! 🤓

[@CompleteCoding]

Glad it was useful

[@gavincoulson3900]

Awesome video, thanks for this!

[@CompleteCoding]

Glad you liked it!

[@nand0l]

Awesome video, you showed your final test on local host, but this is serverless... Isn't it? So how do I push it to an S3-bucket and test it from there?

[@CompleteCoding]

Amplify has an inbuilt hosting solution (which used s3 behind the scenes) I also have a video on this with the serverless framework kzbin.info/www/bejne/qX69nmt-drh-oq8

[@braindead2237]

well explained!! Brilliant sir! Thank you very much

[@CompleteCoding]

Glad you found it useful

[@discoverick]

Hi Thanks a lot for the tuttorial, learning a lot - Do you have a tutorial how to deploy front end part to AWS and actually see this on the internet and not just local ? Thanks in advance

[@CompleteCoding]

Yes I do kzbin.info/www/bejne/qX69nmt-drh-oq8 This also covers Cloudfront. If you don't need that you can just do the S3 and s3Sync parts to see it online

[@hareeshbadiger8167]

hello I am beginner to aws.. i hv done everything what u said in video.. but once i closed everything ..how do i again access my created page or deployed react app.. i checked with npm start it showing error.. plz help me for this

[@CompleteCoding]

@@hareeshbadiger8167 If you go into your AWS account and search for "clioudfront". In there you should see your new distribution which points to your S3 bucket. It will have a URL like d111111abcdef8.cloudfront.net/index.html

[@isabelfreitas6421]

Great video, easy to follow! I was wondering have you tried using MFA with amplify?

[@CompleteCoding]

Not directly with the Amplify CLI but I have used MFA on Cognito

[@charlym9323]

Dude, you are the best

[@CompleteCoding]

Thanks, I'm glad you like the videos

[@anuragmy]

Great!!! loved it ! simple and to the point

[@CompleteCoding]

Glad you liked it!

[@divyagugale]

Thank you so much for this video, Sam! You did great work! but I have one doubt, what if I don't have administrator access and I have to log in to my AWS Account via SAML2AWS cli, how should I add the same functionality with SAML2AWS credentials. Eagerly waiting for your reply, Thank you once again :)

[@CompleteCoding]

That depends on what permissions the AWS Admin has given to the role that you are assuming in AWS. Sometimes you may need to ask them to add a certain permission to your role if you hit a permissions issue. I don't think that using SAML2AWS credentials will make any difference, but I've not tested that.

[@divyagugale]

@@CompleteCoding yes got your point, Thanks!

[@roberthmejias]

Awesome, this video ha really helped me!

[@CompleteCoding]

Glad to hear it!

[@isidorosparlamas8950]

Thank you very much! Excellent! I have this question: My react app's landing page is the login page and I need to change that to a welcome page with a link to the login page. Anybody can help?

[@CompleteCoding]

Keep watching the playlist and we get onto changing the home page very soon. kzbin.info/aero/PLmexTtcbIn_hvPcUm3oAufCtH7dwNAC-g

[@f2pethereum67]

Use react router dom and set the home page of path (/) and use redirect method to send to it welcom page

[@piotrprs572]

FCK AWSOME VIDEO!!! GREAT JOB... I save lot a time because of this. :-)

[@CompleteCoding]

Glad it helped!

[@AAquaticAApe]

Thanks for the great video! Subscribed

[@CompleteCoding]

Awesome, thank you!

[@samueleu6362]

In the last video, you said you'd use the Cognito resources set up using Serverless in the Amplify app. But all you did is use amplify to recreate the same resource?

[@CompleteCoding]

I was planning to do a custom cognito setup (using the last video) but realised that this wasn't the easiest way to do things so went with just using amplify instead.

[@lucasterable]

How does this relate to the Cognito user pool created in the previous video? 8:35 is it safe to have that info in the single-page-application code?

[@CompleteCoding]

Amplify creates it's own cognito user pool. Yes, knowing those details doesn't give anyone access to anything. It just tells them where to log in to. They could in theory use them to create their own login page but that wouldn't be much use

[@AryaPrakash28]

how to add multi tenancy login feature in react?

[@adrenelinjunky]

Thank you for the walkthrough 👍

[@CompleteCoding]

No problem 👍 glad you found it useful

[@groxiverde]

Nice video, but is there a way I can see and manage the list of users that have created an account in my amplify app?

[@CompleteCoding]

You can see all your users in cognito in the AWS console. There are also apis for cognito of you wanted to build a 'users' view in your app

[@groxiverde]

@@CompleteCoding thank you so much!!!

[@jamescoholan]

Great video, thank you!

[@CompleteCoding]

Glad you liked it!

[@fastneasy]

good video, cool accent....by the way what theme u r using in vscode ?

[@CompleteCoding]

I'm using Monokai Pro theme. It is a paid theme ($10 I think) but I really like it and have used it for years now.

[@markussell9431]

Amazing guide. Just works like a charm. One more question if I may: Is it possible to let an admin validate and confirm self-created accounts?

[@CompleteCoding]

Yes you can! You need to set up cognito so that it doesn't authenticate the user on phone or email. This way the user will be be signed up but not authenticated so will not be able to sign in. To allow a user to access the app, the cognito admin needs to approve the user. You could do this by cognito console or by cognito admin APIs.

[@monalipatel6655]

Can we add config file without amplify-cli With existing user?

[@CompleteCoding]

Yes, You can manually add any of the config files you want.

[@PayalSingh-cr3ye]

Is it possible to change or add validation for the input fields in reset password?

[@CompleteCoding]

I'm not sure if you can do that in the default UI but you can always create a custom UI, do all your own validation and then call the Amplify methods to set/reset the password and other fields.

[@raunaksinghjolly8334]

Really Helpful, tysm!

[@CompleteCoding]

Glad it helped!

[@andreamanaog7767]

can I override the ui of it ? for example if I can remove the forgot your password or create an account?

[@CompleteCoding]

Yes, there are some parameters that you can pass into the configuration for amplify to remove those buttons. You could also use the amplify auth functions and attach those to your own custom login screen if you want full control over your UI

[@yankee-in-london]

Wondering how you find Amplify. I've been of the opinion that I must avoid using it due to its massive JS payload but maybe this has gotten better?

[@CompleteCoding]

I now use the amplify auth package to manage the login to cognito and adding auth to all of the api requests. I don't use amplify for deploying any resources.

[@saulbenavides4037]

Thanks for sharing!

[@gusinthecloud]

Great Video!!!

[@deepeshchauhan1215]

Thanks for the Content! However, I am facing an error "zsh: command not found: amplify" when running the command: >> amplify configure Can you guide me through this issue? Thanks.

[@CompleteCoding]

did you run npm install -g @aws-amplify/cli You may need to restart your terminal

[@jiansu]

Thank you for the hard works! I love it. my question is how do we custom Amplify login page, lol they look ugly

[@CompleteCoding]

My pleasure. There are functions that you can call on the amplify sdk like "Auth.signIn" which you can wrap in your own actions to be used in a custom login screen. The Amplify docs are actually really good. docs.amplify.aws/lib/auth/emailpassword/q/platform/js

[@zakirdev6482]

Great Tutorial

[@CompleteCoding]

Thanks!

[@manjirikadam3984]

Very helpful, thank you

[@CompleteCoding]

You're welcome!

[@saifsaeed1158]

thank you so much my man

[@CompleteCoding]

Really glad that you liked the video

[@adamshoaib66]

where can I find all the users created via this console ?

[@CompleteCoding]

If you go into the aws console you'll find them in Cognito

[@sethcoast]

Does the authentication work when you try to actually deploy the web app on amplify?

[@CompleteCoding]

Yes, just build your react app and then host it wherever you want.

[@Saswatxp]

Hi sam I want to use aws Cognito for authentication without using aws amplify beacuse aws amplify cost more. Is it possible to do it?

[@CompleteCoding]

You shouldn't be paying any more to use Amplify. You only pay for the services that it uses. If you are talking about the amplify hosting then you don't have to use that. You can use the amplify SDK and then host the website in S3 yourself (Like I'm doing) If you really don't want to use amplify you can do everything without it. You can set up cognito and then use it as an authorisers on your APIs. You would have to create your own login and signup processes to securely work with Cognito

[@mrwho2513]

how to configure it manually for multiple user pools?

[@CompleteCoding]

I don't know if you can. You could have different deployments of the same app that point at different user pools, but I don't think you can have one app point at two pools.

[@eduardodbarretejr]

can you add button for other social media account?

[@CompleteCoding]

I'll look into making a video showing you how to do that. Keep your eyes peeled for that.

[@prabin3422]

I keep getting error ' Can't resolve './aws-exports'' any ideas? I followed the video.

[@CompleteCoding]

Does the file exist? If not then you need to make sure you've done the Amplify init and setup. That will generate that file for you

[@prabin3422]

@@CompleteCoding it was directly put under gitignore.

[@coderider9019]

What is the difference between this and hosted login ui?

[@CompleteCoding]

It looks like, behind the scenes, they are doing the same thing. It looks like you may be able to use the hosted login UI in some other ways too.

[@jesusochoa6616]

How we can customize that login form?

[@CompleteCoding]

I've got a video on that coming out tomorrow

[@muhammadibtisam1086]

Authentication Error on react app when i try to sign up

[@Vagabondeer]

Great tutorial, thanks for sharing! Any plans on making one that shows how to integrate with Stripe to create an account? :)

[@CompleteCoding]

There are loads of videos on youtube about this. It can be a complex topic with all of the different payment types and I'm not an expert in Stripe

[@sanjayl3627]

i have existing resource how can i add it

[@CompleteCoding]

I don't think you can do this with amplify. If you find out how to then let us all know

[@hritthikbose2143]

It was Great!

[@CompleteCoding]

Glad you liked it

[@dodgecode3623]

can we connect the user to the database in aws

[@CompleteCoding]

Yes, you could add a new model in amplify for a user. You can then get and update the user as you have got and updated songs. Have a React hook that triggers once when the app loads to get the user.

[@clutchitcarnage1540]

good one!

[@CompleteCoding]

Thanks for the visit

[@holdenreed_music]

Is this still relevant in 2023? Seems like a lot of the console has changed

[@roopamsingh3972]

well done

[@CompleteCoding]

Thanks

[@herbertk9266]

Thank you

[@anshusinha2378]

Thanks a lot

[@CompleteCoding]

Happy to help

[@profitpurpose]

needs updating

[@grizzle8911]

Using administrator access to do development is bad practise. Don't do this.