Тёмный

React Firebase Authentication Tutorial | Firebase 9 Tutorial 

PedroTech
Подписаться 207 тыс.
Просмотров 141 тыс.
50% 1

Hey guys in this video I will be showing how to create an authentication system in a react application!
Code: github.com/machadop1407/react...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#firebase #react

Наука

Опубликовано:

 

17 окт 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 317   
@loganbruesehoff3798
@loganbruesehoff3798 2 года назад
If you are having the problem where the app freezes or if VS Code doesn't like the "user?.email" the solution is to put the onAuthStateChanged into a useEffect. useEffect(() => { onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); }); }, []) user?.email can be turned into: {user ? user.email : "Not Logged In"}
@sidhantkumar152
@sidhantkumar152 2 года назад
can you share the entire snippet please i am having trouble implementing this
@Adam-bj5vx
@Adam-bj5vx 2 года назад
so funny, i just solved this problem after a few minutes of thinking and came here to post this solution but you got to it before I did. Nice job, and thanks for sharing!
@riskeydemon2171
@riskeydemon2171 2 года назад
MASHALLAH BRO THAHK U VERY MUCH
@paulinemomanyi6787
@paulinemomanyi6787 2 года назад
I spent the last 10 hrs troubleshooting this error until I came across this comment. Lots of love from an African girl who wanna be a badass dev just like you. Thanks.
@clementciron4522
@clementciron4522 2 года назад
Thank you so much
@nrwl23
@nrwl23 Год назад
Wanted to mention that the onAuthStateChanged() function needs to be called only once in react 18 and FB9 (not sure other versions). Putting it into useEffect seemed to fix it and it works perfectly. Great video!
@kingat8056
@kingat8056 Год назад
I love u
@This__is__akash
@This__is__akash Год назад
Thanks man! You saved my time.❤
@ibharathboga
@ibharathboga 11 месяцев назад
Thank you
@samsonbrody6308
@samsonbrody6308 2 года назад
I gotta say man, I love these firebase/react combo videos. you explain things better than anyone i have found yet. I think some tutorials jump ahead and just assume immediate understanding, whereas you carefully walk through each step. foundations are everything in coding
@PedroTechnologies
@PedroTechnologies 2 года назад
I appreciate that! I remember when I was learning every technology that I teach now and I always struggled with this same problem.
@unknownguy2905
@unknownguy2905 2 года назад
@@PedroTechnologies At what age did you start learning programming? you are like 20-21, 5 years younger than me and know 10x more, congrats, btw Ive checked all other firebase vids and you man make them the best out of them all, thank you for that and keep making more firebase vids
@michaelhorvilleur8898
@michaelhorvilleur8898 Год назад
faaaaaaacts!
@asifarpk
@asifarpk Год назад
@SamsonBrody I agree with you. I was here to say this, but you already have said. Thanks PedroTech. :)
@alejo_420
@alejo_420 2 года назад
this is definitely the best tutorial I've seen, thanks for going over the small details and "beginner" stuff. lots of people skip over it and it leaves room for misunderstandings and errors.
@feechuong
@feechuong 2 года назад
If anyone has the freezing problem when typing in the input, please use `onAuthStateChanged` inside a useEffect with an empty array.... anyway, someone has solved it first :D
@chrisxiang
@chrisxiang Год назад
Change to useEffect(()=>onAuthStateChanged(auth,(currentUser)=>{setUser(currentUser);})},[ ])
@user-um1yr7lg2m
@user-um1yr7lg2m 2 года назад
I've just want to learn Firebase with React. I have been watching a lot videos but your tutorials are very clean and easy by explaining each step in your code and not just jumping around. Thanks you're very very good.
@cientifica9150
@cientifica9150 Год назад
I needed someone who could just focus on functionality and explained all the concepts right away... you're amazing bro! Keep going!
@royhyde8842
@royhyde8842 2 года назад
Thank you very much for your videos, they are simple, detailed, very clear, well explained, and straight to the point. In my opinion, they are the best Firebase tutorials I have seen so far, and to be honest, I have seen quite afew.
@PedroTechnologies
@PedroTechnologies 2 года назад
Thank you! Really appreciate the support!
@allanina
@allanina 2 года назад
Pedro, muito obrigada por esse vídeo. Os conteúdos do seu canal sempre me ajudam bastante, você tem uma didática excelente e sempre parece que lê a minha mente quando eu estou presa com alguma coisa kkkkkkk valeu mesmo!
@emmayen2145
@emmayen2145 2 года назад
Wow. the moment I had to use firebase auth in my project and I had trouble cause all the other videos were "outdated". bless your soul
@tadakuniyasuda8214
@tadakuniyasuda8214 Год назад
This tutorial is the first time I got through with firebase because other bigname youtuber's tutorials are outdated !!!!! THANK YOU THANK YOU THANK YOU
@mikeburgess8294
@mikeburgess8294 9 месяцев назад
Hands down the most straight forward and easy to understand tutorial on this subject. Thanks so Much!
@pratibhapradhan1685
@pratibhapradhan1685 Год назад
I have been looking for a video that could explain this exact combination for soooo long, Tried watching a few other videos but they are nothing with comparison to this one. I have to say this, you are a great GURU. Thanks
@linyerin
@linyerin 2 года назад
Greate tutorial, thank you man. Your tutorial touches on the really basic concepts that I am looking for and is really helpful. Some other videos spend a lot of time customizing the styles, buttons, colors, etc. Who care how they style the page? That was totally a waste of time. Yours is different. Very clear and concise. I love it.
@matissjudins6272
@matissjudins6272 Год назад
so good man, i learnt Firebase crud, routing, auth and firestore in 2 days from your videos. thank you
@haloandfable
@haloandfable 2 года назад
When im stuck on something while creating a website I look for your videos because you explain concepts very well. Thank you for all the content.
@PedroTechnologies
@PedroTechnologies 2 года назад
Happy to help!
@user-my2ps2uv7u
@user-my2ps2uv7u 11 месяцев назад
I have watched many vedios on firebase, but majority people focus more on CSS and come to point later on .This is the perfect one that I was looking for
@scarsofadown
@scarsofadown 2 года назад
Que isso cara, material excelente! Estou indicando seu canal pra todos que eu conheço que estão começando. Obrigado pelo conteudo
@00xfitx2
@00xfitx2 2 года назад
Thanks bro! It helped a lot, I'm also brazilian and so proud that we have people like u here. TAMO JUNTO CARAI
@thecodingloft
@thecodingloft Год назад
Really love your tutorials. You have a very clear and easily understandable way of explaining the workings in your code. Thank you!
@raso1384
@raso1384 5 месяцев назад
Thank you so much for the tutorial!!! I was struggling with MySQL deployment and I found Firebase is much easier for me to start with as a beginner:)
@lucaslorenzo6249
@lucaslorenzo6249 Год назад
best firebase authentication tutorial i had ever seen, excellent information and the way you explain it its just flawless, keep it going
@abelmurua6980
@abelmurua6980 2 года назад
Just what I needed and you uploaded just now. Thank you!. Easier to persist the instance... If you have more on firebase that would be great... following and subscribed
@michaelhuskey2608
@michaelhuskey2608 Год назад
Great video! Really like how you are able to use the basic React concepts and Firebase without mixing in CSS & Styling which is its own domain
@Huntabyte
@Huntabyte 2 года назад
Incredibly explained. Your videos are fantastic and have given me a much better understanding, thank you.
@deniskimani421
@deniskimani421 2 года назад
Just what i needed. Thanks Pedro
@bogdanmilivojevic9619
@bogdanmilivojevic9619 Год назад
Hey Pedro, this was very helpful. You provided a great and simple lesson on Firebase authentication which can be understood by anyone. Thanks a lot ! Keep up the good work
@zeroj7492
@zeroj7492 2 года назад
short, concise and nice tutorial. Thanks a lot pedro
@PedroTechnologies
@PedroTechnologies 2 года назад
Glad you liked it!
@paulinemomanyi6787
@paulinemomanyi6787 2 года назад
I should have come across this channel when I was 2 years old. So much wisdom in here
@stephanpaul8954
@stephanpaul8954 Год назад
You're always a rockstar Pedro, Never messed around with firebase or supabase... been wanting to make a little app for a while but was dreading the authentication... someone on my team said "just use firebase, it does it for you"... I had no idea 😂😂 you saved my life!
@vanehsann
@vanehsann 5 месяцев назад
I saw a lot of videos, but nothing compares to yours.. Thank you
@H2O-OW
@H2O-OW 2 года назад
This is a great video thanks for making it, please do more React + Firebase projects. And good luck with your classes!
@carl5017
@carl5017 Год назад
Your videos are amazing, and a big help for junior React devs. Thanks
@aliwarraich5067
@aliwarraich5067 Год назад
Clear, consize, to the point. Thanks man!
@ayoubnachat5920
@ayoubnachat5920 2 года назад
this was a good explained tutorial just like your other tutorials, thank you so much!!
@MZ-yx8eg
@MZ-yx8eg 2 года назад
it clicked after your clear video nice job man!
@lynx3866
@lynx3866 10 месяцев назад
thanks, I love firebase/react combo, but after 1 year not use it, I confused. Your video really help and your explanation is awesome
@valcaro87
@valcaro87 2 года назад
i followed your tutorial and it works smoothly! thank you!
@dmytronice1337
@dmytronice1337 2 года назад
Hello Pedro, right now I am doing the test project for getting my first job as a front-end developer, and your video is really helpful. Your video kinda fresh video about firebase, but some syntax already has changed! lol
@helloworld2740
@helloworld2740 2 года назад
Thank you very Much I have watched many tutorial but none of them have Teached This much
@sekarsalsabilasp1864
@sekarsalsabilasp1864 Год назад
thank u so much! i have an assignment and this really helps me. Also you explained the course so good
@TutorXplore
@TutorXplore 3 месяца назад
You make authentication set up so easy, thank you!
@tomasalves4958
@tomasalves4958 Год назад
Pedro, I love your videos. Keep the great job, mate!
@freddyrenecariasvasquez9843
I added the useEffect thus avoiding the infinite update cycle: useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); }); return () => unsubscribe(); }, []); thanks for the video it helped me a lot .
@iStinq
@iStinq 4 месяца назад
Thank you !
@iStinq
@iStinq 4 месяца назад
Thank you !
@donejust2728
@donejust2728 Год назад
first time i come here, but i feeling great. thanks for this thing man
@patitorodri
@patitorodri 2 года назад
awersome, pedro!!! thank you !!!
@shanarussell1254
@shanarussell1254 Год назад
Excellent explanation. I'm off to try it now. Thank you!
@seandorr8133
@seandorr8133 Год назад
Really helpful tutorial! I did have some problems with the app being unresponsive after adding the onAuthStateChanged function - putting this inside a useEffect solved this for me
@codewithdevhindi9937
@codewithdevhindi9937 Год назад
You my freind are a LEGENDARY programmer i was finding THIS solution for 2 days and FINALLY found it it's so relieving awsome 🚀🚀🚀🚀🚀🚀🚀🚀🔥🔥🔥🔥🔥🔥
@seandorr8133
@seandorr8133 Год назад
@@codewithdevhindi9937 Glad I could help! ;)
@GauravRai
@GauravRai 8 месяцев назад
@@seandorr8133 useEffect with empty dependency array ?
@josuepintor9315
@josuepintor9315 2 года назад
This was fantastic and easy to follow, thanks!
@totochriss
@totochriss Год назад
Thank you very much for your tutorials they are perfect even for a Frenchman!
@ashokchhetri8513
@ashokchhetri8513 2 года назад
Thank you for these amazing tutorials 🙏🏼🙏🏼
@codedaddy1646
@codedaddy1646 Год назад
Thank you for this video. Great stuff!
@makemoneytvlusaka604
@makemoneytvlusaka604 2 года назад
Awesome! This you have done perfect! my Guy!
@sushantharne9342
@sushantharne9342 Год назад
You r really great bro👍👍👍. The way u clear the concepts is really great. Your videos helped me lot. Thanks...
@jestinabraham5626
@jestinabraham5626 2 года назад
Thank you was searching for it !!
@tabmax22
@tabmax22 Год назад
just one little pointer, you don't need to use useState to get the values of the email and password input fields, you should just use useRef variables
@Jb67912
@Jb67912 2 года назад
Thanks, needed to see an updated 2021 example
@dionardomarques18
@dionardomarques18 2 года назад
Amazing stuff bro! Regards from Brazil :)
@rafaeljordao_
@rafaeljordao_ 2 года назад
Parabéns pelo vídeo, muito claro e preciso!
@fidashnakher8942
@fidashnakher8942 2 года назад
thank you so much, helpful, simple & time saving. :)
@spikycoders
@spikycoders Год назад
The Best one 😍 i have ever seen!
@wealthiduwe5831
@wealthiduwe5831 2 года назад
Great content and well detailed... I will always recommend this
@baotruong5775
@baotruong5775 Год назад
Amazing good job! Thank you from bottom of my heart
@DeepakKumar-ss2ql
@DeepakKumar-ss2ql Год назад
just amazing.....saved a lot of my time. Bless u.
@julianocorrealo9035
@julianocorrealo9035 2 года назад
thank you man for this tutorial, this video helped me a lot!
@fn8629
@fn8629 Год назад
this is great! thanks for the content bro
@codewithdevhindi9937
@codewithdevhindi9937 Год назад
MUST READ COMMENT!!!!!🔥🔥🔥 Hello guys .. i have encounterd this problem luckliy found the solution first if you are using firebase auth when you use onAuthStateChanged function it freezes the solution to this is : put it in a useEffect() this worked for me!!
@david6650
@david6650 Год назад
thank you brother it was my problem!!!
@codewithdevhindi9937
@codewithdevhindi9937 Год назад
@@david6650 your welcome bro no problem :)
@charbelmansour8925
@charbelmansour8925 Год назад
useEffect(() => { onAuthStateChanged(auth, (currentUser) => { setUser(currentUser); }); }, []);
@praveennair2119
@praveennair2119 Год назад
I was searching for this video. Let me implement in my project 😍🥰😘
@Shabalinmax
@Shabalinmax Год назад
Thanks for tutorial! :) finally I got it😅
@yasinnkhann
@yasinnkhann 2 года назад
Ótimo vídeo Pedro!
@PedroTechnologies
@PedroTechnologies 2 года назад
Obrigado!
@akiij
@akiij 2 года назад
not sure if you've covered redux persist before but since most of auth on react requires you to store the user data on local storage & fetch it on mount, I would love to see you do a video on redux persist too! I'm working on firebase redux-toolkit but idk how to use redux persist or even create asyncThunk :3. Kind of a selfish request but if a lot of ppl want to see the same in future maybe you could make a video on it! thanks again for all the awesome content!
@Jb67912
@Jb67912 2 года назад
The use of Context on Web Dev Simplied tutorial for firebase and react might be helpful. I came from there because he did the auth initialization importing slightly the old way. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PKwu15ldZ7k.html
@akiij
@akiij 2 года назад
@@Jb67912 I learnt redux toolkit last month 😁 it's pretty sick and persist is a fix for not losing auth data or any data on page refresh unless you pass that reducer state in blacklist. Context is not much of use if you're using redux I believe, maybe I'm wrong. I haven't needed to use context since state is global in store. As for auth I used the firebase method of Andrei from ZTM. It's a paid course but I was learning react/redux so it's done now. Thanks for sharing resources, really appreciate it.
@codewithdevhindi9937
@codewithdevhindi9937 Год назад
LEGENDARY video
@calebrcannon
@calebrcannon 2 года назад
This is SICK. Thank you!
@PedroTechnologies
@PedroTechnologies 2 года назад
Glad you like it!
@TrackingAcademy
@TrackingAcademy 2 года назад
Worked like a charm, thanks
@s.y1101
@s.y1101 2 года назад
Thank you man you helped a lot!
@kumarrahul2176
@kumarrahul2176 2 года назад
thanks dude! it was really helpful
@luzcarimelucumihernandez2155
@luzcarimelucumihernandez2155 2 года назад
Thank you! your video was really useful to me ^^
@duchailu
@duchailu 2 года назад
NICE VIDEO ! seriously, very simple, you don't waste time on css or other "useless stuff" going right to the real topic (not saying css is useless, just that in these type of video, it's not what we're looking for)
@andresdosantos5310
@andresdosantos5310 Год назад
Good class, excellent work
@dymonn
@dymonn Год назад
Bro, AMAZIN video!!! hours searchin for a simple tutorial for signup and login with React an Fb, U THE BEST HOMIE!!!
@dymonn
@dymonn Год назад
Liked and subd!!
@samaypatel9684
@samaypatel9684 2 года назад
Very good explanation I loved it
@totochriss
@totochriss Год назад
merci beaucoup pour vos tutoriels ils sont parfaits même pour un Français !
@lchampzzz
@lchampzzz 2 года назад
thanks for the lesson, man!
@burakekincioglu9382
@burakekincioglu9382 2 года назад
thank you man you saved my day
@ayushranjan3002
@ayushranjan3002 2 года назад
Thank you so much for this wonderful tutorial...Could you make a video on how to use realtime database in firebase:)
@user-xh8lz2wl5q
@user-xh8lz2wl5q 2 года назад
Thank you for the lesson
@UrbanNerdOfficial
@UrbanNerdOfficial Год назад
Great tutorial!
@harshpatel1971
@harshpatel1971 2 года назад
Thanks it helps me a lot🤗
@sarawaqar1561
@sarawaqar1561 Год назад
Nicely Explained :)
@pupstardao_
@pupstardao_ Год назад
Finally i got it❤👍
@vineethkumar8132
@vineethkumar8132 2 года назад
Thank you so much, this was lit!!!!
@adarshchakraborty8555
@adarshchakraborty8555 2 года назад
Thanks, This is helpful!
@kamrangondal9009
@kamrangondal9009 2 года назад
thanks dear for such a helpful content.
@prateektiwari4116
@prateektiwari4116 2 года назад
Trust me you teach much much much much muchh better than my college professors.... LOVE FROM INDIA❤️
@PedroTechnologies
@PedroTechnologies 2 года назад
Glad to hear it!
@begimayabdraimova8439
@begimayabdraimova8439 2 года назад
thank u, it's what i needed
@brohjoe
@brohjoe Год назад
Thanks for a great clearly explained video. You are a great instructor. Like another person said, you explain the details that others gloss over which can make the difference between success and failure. Thanks a million. By the way, as others have suggested, how about a video on the Firestore database?
@itsgox
@itsgox Год назад
He did, it's the first tutorial on the firebase playlist
@souhaib1902
@souhaib1902 2 года назад
Thank You So Much It helps me alot
@kathirvelp6536
@kathirvelp6536 Год назад
Really very helpful
@alanhernandez4397
@alanhernandez4397 2 года назад
Bro, thank you too much, i was trying to make the auth, but the courses that I saw doesn't work, you help me a lot, I'm meaking a web app for a project of my school. New suscriber PS: Sorry if I have a bad english, I'm from México and I'm trying to speak English
@shiva_dev_22
@shiva_dev_22 2 года назад
dude, you are amazing
Далее
Why Signals Are Better Than React Hooks
16:30
Просмотров 462 тыс.
Фонтанчик с черным…
01:00
Просмотров 2,6 млн
Minecraft Pizza Mods
00:18
Просмотров 1,7 млн
Лайфхак для дачников
00:13
Просмотров 17 тыс.
Firebase - Back to the Basics
25:23
Просмотров 583 тыс.
React Authentication Crash Course (with Firebase v9)
22:28
The Story of Next.js
12:13
Просмотров 554 тыс.
You might not need useEffect() ...
21:45
Просмотров 153 тыс.
ОБСЛУЖИЛИ САМЫЙ ГРЯЗНЫЙ ПК
1:00
ЗАКОПАЛ НОВЫЙ ТЕЛЕФОН!!!🎁😱
0:28
iPhone 15 Pro в реальной жизни
24:07
Просмотров 334 тыс.
😮Новый ДИРЕКТОР Apple🍏
0:29
Просмотров 37 тыс.