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.

[amandaroseortiz]

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!

[nilsb.]

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!

[suhwanc]

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

[kaminer]

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

[zepelega]

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.

[franco-yvr]

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 ;)

[jasonko]

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

[richteraueisen]

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

[ErickWendelTraining]

UUUuh nice! Can't wait to watch it!

[nageshwarip]

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.

[tinmank]

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

[alphaibrahimabarry]

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

[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.

[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? :(

[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
<input name="username" placeholder="email" onChange={onChange}></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

[euricocatumbela]

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

[StephenRayner]

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

[revatipatil]

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

[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.