React Firebase Authentication Tutorial | Firebase 9 Tutorial
Vložit
- čas přidán 17. 10. 2021
- 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 - Věda a technologie
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"}
can you share the entire snippet please i am having trouble implementing this
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!
MASHALLAH BRO THAHK U VERY MUCH
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.
Thank you so much
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.
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
I appreciate that! I remember when I was learning every technology that I teach now and I always struggled with this same problem.
@@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
faaaaaaacts!
@SamsonBrody I agree with you. I was here to say this, but you already have said. Thanks PedroTech. :)
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!
I love u
Thanks man! You saved my time.❤
Thank you
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!
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.
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.
Thank you! Really appreciate the support!
I needed someone who could just focus on functionality and explained all the concepts right away... you're amazing bro! Keep going!
Que isso cara, material excelente!
Estou indicando seu canal pra todos que eu conheço que estão começando.
Obrigado pelo conteudo
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
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
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.
Hands down the most straight forward and easy to understand tutorial on this subject. Thanks so Much!
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
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
Really love your tutorials. You have a very clear and easily understandable way of explaining the workings in your code. Thank you!
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
Thanks bro! It helped a lot, I'm also brazilian and so proud that we have people like u here.
TAMO JUNTO CARAI
so good man, i learnt Firebase crud, routing, auth and firestore in 2 days from your videos. thank you
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
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
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:)
best firebase authentication tutorial i had ever seen, excellent information and the way you explain it its just flawless, keep it going
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.
Happy to help!
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!
Incredibly explained. Your videos are fantastic and have given me a much better understanding, thank you.
This is a great video thanks for making it, please do more React + Firebase projects. And good luck with your classes!
this was a good explained tutorial just like your other tutorials, thank you so much!!
Your videos are amazing, and a big help for junior React devs. Thanks
I should have come across this channel when I was 2 years old. So much wisdom in here
Just what i needed. Thanks Pedro
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
Pedro, I love your videos. Keep the great job, mate!
Clear, consize, to the point. Thanks man!
Thank you so much Pedro, This tutorial was very helpful! Keep it up! 🚀🚀
short, concise and nice tutorial. Thanks a lot pedro
Glad you liked it!
I saw a lot of videos, but nothing compares to yours.. Thank you
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
Change to useEffect(()=>onAuthStateChanged(auth,(currentUser)=>{setUser(currentUser);})},[ ])
Thank you very Much I have watched many tutorial but none of them have Teached This much
i followed your tutorial and it works smoothly! thank you!
thanks, I love firebase/react combo, but after 1 year not use it, I confused. Your video really help and your explanation is awesome
thank u so much! i have an assignment and this really helps me. Also you explained the course so good
it clicked after your clear video nice job man!
You make authentication set up so easy, thank you!
This was fantastic and easy to follow, thanks!
first time i come here, but i feeling great. thanks for this thing man
Excellent explanation. I'm off to try it now. Thank you!
Thank you for these amazing tutorials 🙏🏼🙏🏼
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
You my freind are a LEGENDARY programmer i was finding THIS solution for 2 days and FINALLY found it it's so relieving awsome 🚀🚀🚀🚀🚀🚀🚀🚀🔥🔥🔥🔥🔥🔥
@@codewithdevhindi9937 Glad I could help! ;)
@@seandorr8133 useEffect with empty dependency array ?
You r really great bro👍👍👍. The way u clear the concepts is really great. Your videos helped me lot. Thanks...
Thank you very much for your tutorials they are perfect even for a Frenchman!
Great content and well detailed... I will always recommend this
Amazing stuff bro! Regards from Brazil :)
thank you so much, helpful, simple & time saving. :)
Parabéns pelo vídeo, muito claro e preciso!
thank you man for this tutorial, this video helped me a lot!
awersome, pedro!!! thank you !!!
Awesome! This you have done perfect! my Guy!
Thank you for this video. Great stuff!
Thank you was searching for it !!
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!
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. czcams.com/video/PKwu15ldZ7k/video.html
@@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.
The Best one 😍 i have ever seen!
Thank you so much for this wonderful tutorial...Could you make a video on how to use realtime database in firebase:)
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
Thanks, needed to see an updated 2021 example
Amazing good job! Thank you from bottom of my heart
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)
I was searching for this video. Let me implement in my project 😍🥰😘
this is great! thanks for the content bro
Ótimo vídeo Pedro!
Obrigado!
Thank you! your video was really useful to me ^^
just amazing.....saved a lot of my time. Bless u.
Thanks for tutorial! :) finally I got it😅
Se preocupa mais em mostrar o conteúdo de forma direta, do que com firulas como CSS.
PERFECT!
thanks dude! it was really helpful
Worked like a charm, thanks
Very good explanation I loved it
Thank you man you helped a lot!
LEGENDARY video
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
Bro, AMAZIN video!!! hours searchin for a simple tutorial for signup and login with React an Fb,
U THE BEST HOMIE!!!
Liked and subd!!
merci beaucoup pour vos tutoriels ils sont parfaits même pour un Français !
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 .
Thank you !
Thank you !
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?
He did, it's the first tutorial on the firebase playlist
Thanks for this.. it would be great if you make a vid on img upload to firebase storage
Thanks for the idea!
Yeah we are waiting
Pushing to my GitHub will edit with code you can use when link is up
Thank you so much, this was lit!!!!
Thanks a bunch, Pedro! ❤️
Do you have a Next.js tutorial?
thanks for the lesson, man!
Great tutorial!
This is SICK. Thank you!
Glad you like it!
Good class, excellent work
Great video! thanks!
I think you meant to say something about an issue in the last part of the video but then you might have forgotten about it when the issue with the 6 characters for the password came up?
I like your Videos bro they help me very well
Trust me you teach much much much much muchh better than my college professors.... LOVE FROM INDIA❤️
Glad to hear it!
thanks dear for such a helpful content.
Nicely Explained :)
Thanks it helps me a lot🤗
Thank You So Much It helps me alot
Thanks, This is helpful!
Finally i got it❤👍