Creating a custom authentication flow from scratch with AWS Amplify and React

In this live stream, I will start from a new React application and build out a completely custom authentication flow on the client using React hooks, including multi-factor authentication for sign ups and an event listener for authentication events using AWS Amplify and Amazon Cognito.

[@amandaroseortiz7461]

loved this! super basic but definitely gets the basics across! Im newish to react and AWS has such minimal documentation. Glad you went over everything in such detail!

[@naderdabit]

Thank you!

[@nilsb.3115]

being a senior backend dev/architect there really isn't too much documentation out there on how to implement custom flow on the frontend part, at least not for frontend newbies like me ;-) helped me a lot! so big thanks to you for not only this particular video :-) I often end up with your videos or repos when trying to find solutions to particular problems!

[@kaminer6212]

This is a great. Thanks!!! I had some problems understanding the AWS documentation.

[@suhwanc]

thank you very much.. I was only going to do the customization through withathenticator. Thanks to that, I realized how deep it was.

[@gowthamdasari6227]

Thanks a lot Nader👏

[@jasonko1202]

Nice, concise, and super useful tutorial! Thanks Nader :)

[@syremusic_]

Fantastic tutorial, thank you Nader!

[@viveksanghvi4394]

ur honestly a godsend

[@viveksanghvi4394]

also lowkey thought you were GSP for a sec xD

[@franco-yvr9799]

Many thanks, great end to end setup video! With a few extra hours of work, i managed to make a moden login page! At least 20 views are from me ;)

[@chandlergersh]

This tutorial was awesome! Thank you.

[@richteraueisen4844]

This code is beautiful.. I strive to have my code vibe like this. Thanks Nader

[@zepelega22]

Hi Nader, I watched the last live stream, it was awesome. I asked you about multi-tenant with Amplify / AppSync, you answered me that the documentation was about to be released, any updates about that? It would realy help me. Thank you for the content you have already made available to us. Hello from Brazil.

[@ErickWendelTraining]

Brazillians everywhere! hhee \o/

[@m4rcosazevedo]

@@ErickWendelTraining always....

[@jb4948]

Well done!

[@danielgregory1357]

Perfect, thank you!

[@ErickWendelTraining]

UUUuh nice! Can't wait to watch it!

[@nageshwarip8047]

Hey Nader, Thanks for sharing this . Its help me lot. I glad if you share auth flow with challengeName with formState 🙂

[@RefactoringRyan]

Hey Nader! Thanks for sharing this with the community, I got about as far as you did in this video before coming across it with my angular project. The biggest issue I am running into is refreshing the sessions using the session token. It seems like currentSession isn’t working as expected. The token only refreshes on a manual reload of the browser.

[@kettenbach]

Boss tweets everyday ‼️🙏😀💎

[@strengergabor]

Thank you!

[@IAMTHEMUSK]

Thank you amazing video ! I just had some difficulties cause I didn't want to use username but only email. Be aware that in this case you have to use username and not email as input And I still have one question, now that we have our proper Auth interface, how are we supposed to manage in the code to show it when it's necessary? I know that with withAuthenticator we just need to add export default withAuthenticator(component), to force the user to be logged. In our case do we just have to check if the user is logged in and if not show the interface instead of the page content? Thanks a lot

[@euricocatumbela9671]

I Nader thanks for the great video, please will you explain how to throw exceptions for empty inputs?

[@ewolz]

Do you have an extra video on forgotten password, remember me or sending email on sign up, would be nice to add some lambda triggers for us juniors. Thanks for the great work.

[@LeonardoArangoCifuentes]

Hi, I'm using amplify import auth, to import a user pool but I get this error, The selected Cognito User Pool does not have at least 1 Web app client configured. Web app clients are app clients without a client secret. even though I already created an app client in the pool in aws.

[@tinmank]

When I saw custom authentication I thought it is something like passwordless (OTP) login or something. :/

[@alphaibrahimabarry5410]

Thanks Nader, could you share your code on github please?

[@revatipatil939]

Where the log-in user details will be present? In user Cognito pool only?

[@SuperSarhanWebdev]

can you please share something article video whatever on how to use @function with graphql to affect the data coming from dynamobd not static data written inside the function code I get lost in the flow

[@SumeetChawla]

Thank you for creating this video. I think all the videos should be collated and kept as links in the Amplify docs somewhere. Any idea why the Hub might not be responding? Am doing the exact thing but seems like the hub is not reacting to the auth events happening. Update: So till I manually dispatched an event from the signout method, the event wasn't trigged. I had to do Hub.dispatch('auth', { event: 'signOut', data: undefined }, 'Auth'); But the documentation mentions that Auth events are already dispatched. Confused? :(

[@StephenRayner]

Follow up videos for unit testing with jest and react testing library? Very little in this playlist for unit tests

[@allysonmolloy710]

Thanks for the tutorial! I am getting an 'unexpected use of event' error when trying to run the code. How can I fix this? Thanks in advance!

[@vinayakkirangi2196]

Unhandled Rejection (AuthError): Confirmation code cannot be empty any solution?

[@basics-school]

is there any recent tuts??

[@fabianbalmaceda6808]

Hi Nader, I been working on a personal project using amplify, your videos are very useful. I have some questions for the stream: - How to add and use Cognito groups? - Is it possible to add custom properties to the Cognito user table, on register? Thanks.

[@zepelega22]

Hi Fabián, excuse me for the intrusion, what you hoping to achive is possible via Lambda Triggers. If you will, until the talk, you might want to take a look at the documentation, it's prettie simple to implement, both via Amplify CLI or via Amplify Console. Hope that help, certainly helped me. docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools-working-with-aws-lambda-triggers.html

[@wplearning]

Whats up Nader

[@SpurtiB]

Nice tutorial. I followed the exact steps but when I enter authentication code I receive error "AuthError: Confirmation code cannot be empty".

[@irman3716]

Same here, I am receiving the same error messagge :(

[@irman3716]

fixed by changing await Auth.confirmSignUp({username, code}) into await Auth.confirmSignUp(username, code)

[@rorycawley8334]

"What javascript framework are you using (Use arrow keys)" > none Why didn't you choose react?

[@emmanuelmanana1527]

12:22

[@SchooldepotCoUk]

Where can we download the code?

[@loganpowell]

Is that a real banksy?

[@RaulGlasgow]

no code?

[@ozankurucu6261]

Can you share github source code?

[@MrEnsiferum77]

My question is, how u gonna refactor this one, if tommorow, aws amplify for some reason is gone?

[@ApoorvMote]

This was complete misleading. I thought custom authentication will be with using lambda triggers to build auth not have React auth tutorial. I am building amp website that doesn't allow custom javascript in frontend.