Create a React Authentication Flow with AWS Amplify

  Рет қаралды 17,352

Ali Spittel

Ali Spittel

2 жыл бұрын

Create a customizable backend and frontend authentication flow with the brand new AWS Amplify Authenticator components. These are launched for Vue, Angular, and React, but in this video we'll use the React components to add sign in, sign out, and display user information. We'll also add a theme and show how to even further customize the information shown to your customers.
👩🏼‍💻 Links Mentioned 👩🏼‍💻
Blog Post Version of this tutorial - welearncode.com/amplify-authe...
Docs - ui.docs.amplify.aws/
AWS Amplify - console.aws.amazon.com/amplify
🌸 My Links 🌸
Blog - welearncode.com​​​
Twitter - / aspittel​​​​
Twitch - / aspittel​​​​
Portfolio - alispit.tel​​​

Пікірлер: 42
@MmmMmmGood17
@MmmMmmGood17 2 жыл бұрын
That’s dope! Quick to the point video too, appreciate it 🙏🏽
@krischalmahat5147
@krischalmahat5147 Жыл бұрын
In 8 minutes you explained what i was looking for since yesterday. Love these quick short videos.
@Nate-kw9by
@Nate-kw9by Жыл бұрын
This video was really well done and an excellent tutorial. Straight and to the point. Thank you!
@PawelMisiura
@PawelMisiura 11 ай бұрын
Thanks for this Ali, second time im watching this to add Aws Auth to my project. Great video!
@redbeardhomes
@redbeardhomes Жыл бұрын
This was awesome and well-explained. Thank you !
@youngzproduction7498
@youngzproduction7498 Жыл бұрын
I must say your content is spotted on. As a first time amplify user, I can follow your instruction quite easy. Thanks a lot.
@VincentFulco
@VincentFulco 2 жыл бұрын
Terrific and short. Thanks!
@Test27344
@Test27344 2 күн бұрын
Well done and exactly what I was looking for. Thank you so much!
@Munk-tt6tz
@Munk-tt6tz 6 ай бұрын
Best video on this topic, thank you!
@amarchinta4463
@amarchinta4463 2 жыл бұрын
Great stuff, thanks for sharing! Ali
@combatninjaturtle
@combatninjaturtle Жыл бұрын
This is so neat. Thank you so much ❤
@Create-The-Imaginable
@Create-The-Imaginable 2 жыл бұрын
This is a fantastic video! ❤ I needed a video with all of the steps from beginning to end! Can you do one for an Angular Authentication Flow too? 😃
@bartdiako1
@bartdiako1 2 жыл бұрын
Awsome video ! Thanks!
@ewolz
@ewolz 2 жыл бұрын
As a junior dev i landed on this when it was dabbed AdminUI, its nice to watch this evolution. The documentation should embed your video tbh. I hope we can get a tutorial on programmatically adding cognito users to groups (not sure if thats via lambda triggers) for those taking the custom Authenticator component track. Else, you kind of stagnate with an app of users with one profile, no groups Thanks Ali!
@mohammadkermani2987
@mohammadkermani2987 2 жыл бұрын
Thanks for the tutorial. Great like always. There is one thing that I feel is missing and that could be great if it could be implemented by the Amplify UI library to make more use cases for the withAuthenticator component. I wish the withAuthenticator could allow the developer to decide if they want to force the authentication or not. For example, I might want to use this higher order component in order to get check the user authentication status (and the user data if used is authenticated) and I want to handle the authentication using the other ways that already exist.
@julianhyungmin
@julianhyungmin Жыл бұрын
Thank you!
@ccandido-ti43
@ccandido-ti43 Жыл бұрын
thanks , continue
@avknash175
@avknash175 Жыл бұрын
Thanks a lot 😊
@garymarshall7410
@garymarshall7410 Жыл бұрын
Great video. Thank you. I would really like to see the same lesson applied to a Next js application.
@miw879
@miw879 Жыл бұрын
loved it
@JohnVold
@JohnVold 2 жыл бұрын
Great stuff, thanks for sharing! Also, FYI, your twitter and twitch links don't work...they seem to be adding some extra characters at the end of the URLs :)
@MEWIIE
@MEWIIE 2 жыл бұрын
My right ear loves this video 😃
@ClarkeBishopConsulting
@ClarkeBishopConsulting Жыл бұрын
I watched this video with great interest as I'm trying to map these techniques and implement Authentication for Next.js. I expect it to be very similar, but there is no component. I wish there was a Next.js equivalent video to get me started.
@cortxk6508
@cortxk6508 8 ай бұрын
thank you! I had to import amplify differently import {Amplify} from 'aws-amplify' works as a charmeleon
@navjotsingh2457
@navjotsingh2457 10 ай бұрын
tysm
@RocknClassics
@RocknClassics 2 жыл бұрын
Many thanks Ali! Let me tell you I've been doing like 3 courses and the app always crashes because of the code was not good but thanks to you I''ve been able to make it. Do you have a complete course about creating apps with Figma-react on Amplify?. Let me know if you have it. Best!
@Gourab__paul
@Gourab__paul 2 жыл бұрын
Hi Ali, I had a question, if we use amplify for authentication, do we need to take care of the routing. What happens when we press refresh ?
@sasukeyahiko7491
@sasukeyahiko7491 Жыл бұрын
Hey! I really like your vs code theme. What is the name of the theme you are using?
@kyleronayne6445
@kyleronayne6445 Жыл бұрын
When using withAuthenticator, how can I invoke a function after a user signs in or signs up?
@RocknClassics
@RocknClassics 2 жыл бұрын
Hi Ali! I've been doing some of your workshops, 3 in fact that I could finish well, however there is one that I receive a mistake. Wonder if you have a kind of "patron" account so you can give advice when needed. Many thanks.
@Billyxiao
@Billyxiao 29 күн бұрын
Hi Ali, May you teach me how do i amend the background outside the Login Box to become a jpg.
@bestzenyatta3362
@bestzenyatta3362 Жыл бұрын
is it posible to only have the login and not the register one ?
@JaLegendsDance
@JaLegendsDance 2 жыл бұрын
Hey can you do a tutorial on Building a membership with AWS Amplify, Cognito, and Stripe Billing Portal
@AliSpittelDev
@AliSpittelDev 2 жыл бұрын
Love that idea, I have this which is similar: kzfaq.info/get/bejne/erJ3eZufyrqclGQ.html but I could go further with it! thanks for the idea!
@JaLegendsDance
@JaLegendsDance 2 жыл бұрын
@@AliSpittelDev yes can you do it please..So after you rap your app with aws withauthenticator user will sign up and after success sign up they will redirect to pricing plan then to stripe checkout then user will be directed to protect content after paid signing user logout and signing back in they will be directed straight to protected content
@kittysplode
@kittysplode Жыл бұрын
yeah, no. i wanted to give this a try, but i'm going back to just coding the thing by hand. only have two pages left to finish in auth flow. it took an extra 3 days, but honestly it's worth it to not have your entire application vendor locked to aws. i lost it at the custom theming. they can't just use css, they can't use react stylesheets, they need *aws themes* for this? i would be fine if vendor locking only meant i had to switch out auth logic, but styling a page custom for aws is batshit insane. like if this is just some throw-away project or you need it done end to end in less than twelve hours, this is fine. personally, i'd rather swap out 50 lines of auth code than my entire app when i outgrow aws.
@kittysplode
@kittysplode Жыл бұрын
think of aws like a parasite that wants to inhabit and control every part of your body for its own benefit. then you will rapidly migrate from aws. they have no interest in your well being
@funnyanimalvideosshow7780
@funnyanimalvideosshow7780 Жыл бұрын
Ali i got this error on my console after running npm run dev (i'm using vite): Uncaught ReferenceError: global is not defined at node_modules/buffer/index.js (index.js:43:30) at __require2 (chunk-S5KM4IGW.js?v=58ea674c:18:50) at AuthenticationHelper.js:6:24
@TwoTechnicGamers
@TwoTechnicGamers 10 ай бұрын
Amplify as a default export is depreacted, import { Amplify } from 'aws-amplify' us this instead, caused me so much headache
@bartdiako1
@bartdiako1 2 жыл бұрын
I am not getting a confermation email when creating new user/account . has anyone had the same problem ?
@avallejoy
@avallejoy Жыл бұрын
100%
@goodstuff2read
@goodstuff2read 2 жыл бұрын
I wish people would do these without the "withAuthenticator" component. "Authentication Flow" doesn't sound like it is going to be WYSIWYG video
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 1,5 МЛН
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 26 МЛН
Each found a feeling.#Short #Officer Rabbit #angel
00:17
兔子警官
Рет қаралды 8 МЛН
Climbing to 18M Subscribers 🎉
00:32
Matt Larose
Рет қаралды 26 МЛН
This Adds MFA and Auth To Your Website In Minutes! With AWS!
8:13
Program With Erik
Рет қаралды 1,7 М.
AWS Amplify in Plain English | Getting Started Tutorial for Beginners
16:54
Tiny Technical Tutorials
Рет қаралды 41 М.
Adding Cognito Signup and Login to your React App with AWS Amplify
16:45
Complete Coding - Master AWS Serverless
Рет қаралды 117 М.
1. AWS Amplify: Create React App
18:24
Cumulus Cycles
Рет қаралды 4 М.
AWS Amplify Authentication with React Js
8:33
Last moment Learning
Рет қаралды 7 М.
New! Hosting Made Easy With AWS Amplify Gen 2
13:15
Program With Erik
Рет қаралды 3,6 М.
An Illustrated Guide to OAuth and OpenID Connect
16:36
OktaDev
Рет қаралды 555 М.
What is AWS Amplify? Pros and Cons?
8:04
Be A Better Dev
Рет қаралды 87 М.
Настоящий детектор , который нужен каждому!
0:16
Ender Пересказы
Рет қаралды 396 М.
WWDC 2024 Recap: Is Apple Intelligence Legit?
18:23
Marques Brownlee
Рет қаралды 6 МЛН
5 НЕЛЕГАЛЬНЫХ гаджетов, за которые вас посадят
0:59
Кибер Андерсон
Рет қаралды 1,6 МЛН