React Firebase Authentication - Protected Routes - Context - (Firebase v9) 🔥
Vložit
- čas přidán 27. 07. 2024
- In this video I go over Firebase v9 Authentication in React JS. We will be able to create a new user by email address, sign in, sign out, and check to see if a user is logged in or not. We will use react-router-dom v6 to navigate pages after signing in. We will also use protected routes. This means you will be required to be signed-in as a user to view the specified page otherwise the user is routed to the sign in page. Context will be used so we can access the user details in any of our React components wrapped in our Provider. All the UI styling is done with tailwind css. Check the time stamps below. Feedback welcome - thanks for watching!
If you enjoyed the video and would like me to demonstrate social sign-in (google/facebook) with firebase or how to store the user data into a firestore database then please let me know in the comments below! 👍
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Timestamps:
0:00 - Intro
00:31 Create react app
02:01 Install tailwind css
03:16 Update to react 18
04:36 Install react-router-dom
06:07 Create Sign-in/Signup components
17:52 Install/configure Firebase
23:45 Use Context
28:30 Create new user
38:50 Check to see if user is signed in onAuthStateChange
44:30 Signout
47:28 Sign in user
54:38 Protected routes
Github repo 💻
github.com/fireclint/firebase...
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
Legendary video. The other videos I found about Firebase authentication went fast and took everything for granted, but you took your time and explained every step very clearly. Keep it up dude!
Great video. Your explanations were clear and easy to follow so coding along was a breeze. Keep the amazing content coming for us!
Thanks dude!
Was looking for a video to break me out of my Authentication App bog, and your tutorial worked like a charm! Thanks again for your great content! I also enjoy the organic debugging process. See bug === bug goes boom. Love it! hahaha
I was stuck on the authentication of my project but your tutorial really came through, really, good, explanatory tutorial
Thank you🙏✌️
I like how fast you were explaining in a clear way the medular of the auth with firebase and react.
One of the cleanest tutorials I've watched. Thanks for sharing your knowledge. Respect+
You da best man! Had a project on hold for a month because I couldn't get this down. Keep up the good work!!
Thanks so much! This really helped me to understand the authentication process. I had been completely stuck and overwhelmed but this video really made sense and made it easy.
Best tutorial I ever watched. I love your voice, your pace and how well you explain things.
Thank you Andrea 🙏
Awesome project for the beginner. Thanks, I really appreciate your work :)
Never have I seen such a great straight forward video. Thank you very much
Thank you dude!
You’re amazing 🙌🏾
I wish I found you earlier but all the same, I’m grateful😍
I will say just awesome dude ,i have been looking for this for past 2 days thanks 🙏
I came across your page early this week. You are doing a great job. Thank you ❤️
Thank you so much!
This is gold, I was looking everywhere for a Firebase v9 / React auth tutorial ... oh and from a fellow Paramedic... Strong work, great channel, thank you!
No way dude that’s awesome!! I still do some work as a medic - I love it (usually 😂)
Underrated channel. I love watching the video and looking at the source code when I'm debugging. Save so much time as a result.
Much appreciated! Thanks dude!
Duuuuuuuude!!! Whenever i see your new video i am so excited to learn some new stuff! Keep it going for us bro! I appreciate that. Thank you!
Thanks dude! More to come!
Man you literally helped me get through my final project you're so great at explaining this kind of content shouldn't be free!!! but im happy it was free when I needed it!
Thank you April! I’m just trying to help others learn and save time! 🙌
Same here
Best tutorial on Firebase Authentication, extremely clear!
My dudeeee , am half through and this is eppiccc, thank you for sharing this
Thank you , Your videos are a blessing !
Thanks for you video, really helped me getting started with Firebase!
The best video on this topic on youtube right now. Subscribed. Keep it up man
Wow, thanks!
Amazing tutorial, very clear and easy to follow with good explanations. Thanks!
Glad it was helpful!
Look, I don't think you know this, but your videos are SO clear and SO easy to understand. Keep it going, please!
Thank you! 🙌
wizard!!! thanks my men amazing video easy to follow and no bs, everything is clear
thank you so much brother, the best video about this subject. there is nothing close to it and i've watched tons of it. keep explaining as you do, it''s great!
Thanks Misael!
Bro your really good at guiding us through the coding, keep on going. You'll get 50k soon
Love how complete you make the videos, great tutorial
Thank you CP
Great video, straight to the point. Thank you so much!
The beauty of your channel is you explain all the things from scratch. Now I'm so confident that I don't have any question about firebase email pass authentication. Thank you so much. If possible make some project ( e-commerce, House rent, Restaurant etc ) using react tailwindCss and firebase .
Thanks! More coming soon!
Your channel is going to blow up, just wait on it. Always pushing out relevant and fire content 🔥🔥
Thank you dude!! I’m just trying to share what I’m learning.
Love your tutorials! Keep doing more!
Thank you!
Clint is the goat. Best vids of updated react content.
Just found this gem; you are awesome thank you!
Wow.. really helpful this video tutorials for beginners... can start quickly their career.. thank you so much sir..
It was really a great tutorial, straight to the point! congrats!
Thank you sir!
Legendary tutorial much appreciated. Buying you a virtual coffee! Tahnks mate
MiVoodoo! Wow dude that’s so awesome! Thank you for supporting the channel. Much love!!
great tutorial, love the aggressive breathing
Great video man, thank you so much. Very well explained
Thank you Dan!
Thank you very much sir. I can now protect any route I want.
Thanks man! love your energy
Much appreciated dude!
This is some God Level Tutorial.i have watched a lot of tutorials for firebase but did'nt get it but now❤❤❤❤❤
Thank you So much!
Thank you so so much. This is the coolest thing ever!
nice video as always!! cant wait to see ur channel turn 10k subs 🔥🔥
I hope so too!
Came across your channel accidentally and I like your style so subscribed :D. Although I haven't watch any your videos to the end but I hope I won't have to unsubscribe ;)
Thank's dude!
Very helpfull and easy to watch! Thanks man! 🙌🙌🙌
Thanks dude!
Excellent!!! This is what I needed it.
Awesome Sergio!
Thank you soo much for this video, could make my submission on time thanks to this.
This was great! Thanks.
thanks man you really helped a lot
Thank you so much man, I've learned a lot from this video.
Thank you my friend!
thanks sir this tutorial teach me a lot of new things that i want to put in my final project
Thank you Han Solo!! Love the name too 💪
thanks this was of great help 🙌
Epic video! Thanks so much!
Glad you liked it!
Thank you this was super helpful!
Thank you Abrar!
You are the man for this video, thank you!
Thanks Alex!
Boom! Liked and Subscribed :)
One of the best tutorial 🤘
Thank you dude!
Great video👍👍
Great video. Would be amazing to see a role-based authentication video up soon.
Thank you! User admin role video coming!
Finally completed this tutorial! I love how natural how it is, errors?! Booom, we fix em together
Haha thanks man!!
thank you so much sir its very helpfull my university project
I hope you read the comments
Thanks for the simple explanation of this topic. Your channel is great and helps a lot. Submission 10 out of 10
Sure do man! Much appreciated sir!
Really great video 😊
Thank you! 😀
In the protected route, do:
const navigate = useNavigate();
if (!user) {
navigate("/signin");
}
because if you do:
if (!user) {
return ;
}
it will send you to the signin page before the user "arrives" even though you are logged in
Thank you my friend! I’ll make the update! Good catch :)
Thanks. This fixed my app from logging out user after refreshing the page.
this video alone worth the sub
Thx for the vid' gym bro !
Awesome tutorial, the context approach was truly inspiring! For the flashing content of your protected route, change the initial state of "user" to "null" instead of an empty object. That fixed it for me 💯
Thank you for the feedback man - I was unaware. That’s what it’s about right there- we are all here to help each other. Much love! 💪
Hugeeeee
Maannnnn you're so AMAZING, omg, thanks so much
Awesome dude thank you!
you are number 1 !
Great Video!
Perfect. You're such a nice guy.
I appreciate that!
Boom! Good stuff man
Thanks man!!!
Great video ,I wish More
Great video
great stuff... thx a lot
Thanks a lot for your clear explanation
Thank you my friend!
Dude keep posting new videos
I always learn something new !!
please make a project on ecommerce (or just a shopping cart to get the feel of it ! )
Absolutely man!
Great video! Hope you will get more followers.
Thanks mark!
والله انك شيخ قومك ، يومين أجرب حل للتحديث الأخير و انت جبتها بكم دقيقه الله يسعدك يا شيخ thank you bro , you saved me
Thank you!
Thank you very much 💖
good video, thanks ! i also got stuck at "createUser is not a function", between 33:45 and 35:40 you can see that at the latter , value={{createUser}} is written like so , but not earlier in the video, so if you were coding along, like me lol, others might get stuck there as it will likely not work until you get there. it might be helpful to point out the change?
i still have to finish applying the code to my own page, but i hope i won't have any more problems now 😅 again, thanks for the vid !
Thank you for this. Without you, I may still be trying to figure this one out.
Bro you are by far the best and most easy to watch developer out there.....
Thank you Ivan! Much appreciated!
@@codecommerce thank you my man… I’m combining some parts to understand react much beter. You made me get my diploma, i made a pokemon application, and a criteria was “authentication” 👊🏽 i am wondering, are you gonna make a vid on how to deploy on firebase, and use some features like “test environments” to keep working on the application, as the mail app is still running on the cloud?
Thank you very much, you rule!
Thank you my friend!
Awesome video ++++++++++++++++++ 😃
good job!
thank you from Uzbekistan
Uzbekistan- that’s awesome dude! 💪
Thanks! Boom!
Thank you Very much
thank you😍
nice that u made an updated version. In older tutorials you had to import firbase from "firbase/app" and i used to get errors because i was on the latest versions. Now you showed me initializeApp stuff, thx earned a sub
tahnks very much
Nice video. kindly make a video on role-based authentication react JS and Firebase
Thank you mate
Anytime man! Thanks for watching 🙏
Thank you so much!
You're welcome!
very good !!! 🥰💯👍
Thank you Pedro!
nice crash course even for react contexts. It would be nice if you could make other videos like an "extension" of this one. Maybe with features like shopping cart, payment page etc!
Thank you Lorenzo! Will do
very good tutorial i tried a few more eventuly
successed with this one
Awesome!!
@27:56 yeah we love this feature, you should use wrap settings for your workspace and perhaps a linter to make it span on multiple lines when you save your code.
Thank you Muhammad