KZhead

React Firebase Authentication - Protected Routes - Context - (Firebase v9) 🔥

Code Commerce
2024 ж. 9 Мам.
62 068 Рет қаралды
Жүктеу

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!

    @KarakiriCAE@KarakiriCAE Жыл бұрын

  • Great video. Your explanations were clear and easy to follow so coding along was a breeze. Keep the amazing content coming for us!

    @shamiyafo@shamiyafo Жыл бұрын

    • Thanks dude!

      @codecommerce@codecommerce Жыл бұрын

  • I like how fast you were explaining in a clear way the medular of the auth with firebase and react.

    @tejedaAlex@tejedaAlex Жыл бұрын

  • You da best man! Had a project on hold for a month because I couldn't get this down. Keep up the good work!!

    @siddheshborse5416@siddheshborse5416 Жыл бұрын

  • I came across your page early this week. You are doing a great job. Thank you ❤️

    @sixtusonyedibe1619@sixtusonyedibe16192 жыл бұрын

    • Thank you so much!

      @codecommerce@codecommerce2 жыл бұрын

  • 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

    @ShredNekM80@ShredNekM80 Жыл бұрын

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

    @samitaasbl1335@samitaasbl1335 Жыл бұрын

  • Best tutorial I ever watched. I love your voice, your pace and how well you explain things.

    @Andrea-mm5yy@Andrea-mm5yy Жыл бұрын

    • Thank you Andrea 🙏

      @codecommerce@codecommerce Жыл бұрын

  • I was stuck on the authentication of my project but your tutorial really came through, really, good, explanatory tutorial Thank you🙏✌️

    @codexjay674@codexjay674 Жыл бұрын

  • One of the cleanest tutorials I've watched. Thanks for sharing your knowledge. Respect+

    @thesheikhnoor@thesheikhnoor Жыл бұрын

  • Your channel is going to blow up, just wait on it. Always pushing out relevant and fire content 🔥🔥

    @HaitouHaitou@HaitouHaitou Жыл бұрын

    • Thank you dude!! I’m just trying to share what I’m learning.

      @codecommerce@codecommerce Жыл бұрын

  • 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!

    @april9606@april96062 жыл бұрын

    • Thank you April! I’m just trying to help others learn and save time! 🙌

      @codecommerce@codecommerce2 жыл бұрын

    • Same here

      @gayashanmadhuranga3375@gayashanmadhuranga3375 Жыл бұрын

  • The best video on this topic on youtube right now. Subscribed. Keep it up man

    @martinznnajijr4737@martinznnajijr47372 жыл бұрын

    • Wow, thanks!

      @codecommerce@codecommerce2 жыл бұрын

  • Never have I seen such a great straight forward video. Thank you very much

    @csc5215@csc5215 Жыл бұрын

    • Thank you dude!

      @codecommerce@codecommerce Жыл бұрын

  • 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!

    @anildemir5425@anildemir54252 жыл бұрын

    • Thanks dude! More to come!

      @codecommerce@codecommerce2 жыл бұрын

  • 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!

    @JH-br4iv@JH-br4iv2 жыл бұрын

    • No way dude that’s awesome!! I still do some work as a medic - I love it (usually 😂)

      @codecommerce@codecommerce2 жыл бұрын

  • Bro your really good at guiding us through the coding, keep on going. You'll get 50k soon

    @nathankibet9184@nathankibet9184 Жыл бұрын

  • Awesome project for the beginner. Thanks, I really appreciate your work :)

    @samadsiddiqui5925@samadsiddiqui592510 ай бұрын

  • Love how complete you make the videos, great tutorial

    @c.p.carminameza1057@c.p.carminameza1057 Жыл бұрын

    • Thank you CP

      @codecommerce@codecommerce Жыл бұрын

  • Underrated channel. I love watching the video and looking at the source code when I'm debugging. Save so much time as a result.

    @quintondekyls9709@quintondekyls97092 жыл бұрын

    • Much appreciated! Thanks dude!

      @codecommerce@codecommerce2 жыл бұрын

  • Thank you , Your videos are a blessing !

    @amancharlamanas3812@amancharlamanas381211 ай бұрын

  • Love your tutorials! Keep doing more!

    @avarma_y@avarma_y Жыл бұрын

    • Thank you!

      @codecommerce@codecommerce Жыл бұрын

  • I will say just awesome dude ,i have been looking for this for past 2 days thanks 🙏

    @ashharmansuri6816@ashharmansuri6816 Жыл бұрын

  • Amazing tutorial, very clear and easy to follow with good explanations. Thanks!

    @djonsi88@djonsi88 Жыл бұрын

    • Glad it was helpful!

      @codecommerce@codecommerce Жыл бұрын

  • Thanks for you video, really helped me getting started with Firebase!

    @123BiB321@123BiB321 Жыл бұрын

  • Look, I don't think you know this, but your videos are SO clear and SO easy to understand. Keep it going, please!

    @TheToxicFangX@TheToxicFangX11 ай бұрын

    • Thank you! 🙌

      @codecommerce@codecommerce11 ай бұрын

  • My dudeeee , am half through and this is eppiccc, thank you for sharing this

    @tdgualu7148@tdgualu7148 Жыл бұрын

  • Just found this gem; you are awesome thank you!

    @josuenataren4806@josuenataren4806 Жыл бұрын

  • nice video as always!! cant wait to see ur channel turn 10k subs 🔥🔥

    @socrates1701@socrates17012 жыл бұрын

    • I hope so too!

      @codecommerce@codecommerce2 жыл бұрын

  • great tutorial, love the aggressive breathing

    @yourewelcome7662@yourewelcome766210 ай бұрын

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

    @alifhasanshahOfficial@alifhasanshahOfficial Жыл бұрын

    • Thanks! More coming soon!

      @codecommerce@codecommerce Жыл бұрын

  • Thx for the vid' gym bro !

    @RitchieOfficiel@RitchieOfficiel Жыл бұрын

  • wizard!!! thanks my men amazing video easy to follow and no bs, everything is clear

    @FFFYYYYY@FFFYYYYY Жыл бұрын

  • 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!

    @Misathebotter@Misathebotter Жыл бұрын

    • Thanks Misael!

      @codecommerce@codecommerce Жыл бұрын

  • Great video, straight to the point. Thank you so much!

    @petren44@petren445 ай бұрын

  • Best tutorial on Firebase Authentication, extremely clear!

    @codeshv4071@codeshv40716 ай бұрын

  • Legendary tutorial much appreciated. Buying you a virtual coffee! Tahnks mate

    @MiVoodoo@MiVoodoo Жыл бұрын

    • MiVoodoo! Wow dude that’s so awesome! Thank you for supporting the channel. Much love!!

      @codecommerce@codecommerce Жыл бұрын

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

    @pawelczar@pawelczar Жыл бұрын

    • Thank's dude!

      @codecommerce@codecommerce Жыл бұрын

  • It was really a great tutorial, straight to the point! congrats!

    @rodrigo.bunhak@rodrigo.bunhak Жыл бұрын

    • Thank you sir!

      @codecommerce@codecommerce Жыл бұрын

  • Epic video! Thanks so much!

    @GH-pu3xc@GH-pu3xc9 ай бұрын

    • Glad you liked it!

      @codecommerce@codecommerce8 ай бұрын

  • Great video man, thank you so much. Very well explained

    @danmartin4822@danmartin48222 жыл бұрын

    • Thank you Dan!

      @codecommerce@codecommerce2 жыл бұрын

  • Thank you very much sir. I can now protect any route I want.

    @Isotope5000@Isotope50006 ай бұрын

  • You’re amazing 🙌🏾 I wish I found you earlier but all the same, I’m grateful😍

    @techgirlmya@techgirlmya8 ай бұрын

  • Thank you this was super helpful!

    @abrarrauf6761@abrarrauf6761 Жыл бұрын

    • Thank you Abrar!

      @codecommerce@codecommerce Жыл бұрын

  • thanks man you really helped a lot

    @andrewdube6357@andrewdube63572 ай бұрын

  • Clint is the goat. Best vids of updated react content.

    @LarryMarkel@LarryMarkel Жыл бұрын

  • Thank you so so much. This is the coolest thing ever!

    @Zeiwon@Zeiwon Жыл бұрын

  • Thanks a lot for your clear explanation

    @subramanyam.d24m56@subramanyam.d24m56 Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • Thanks man! love your energy

    @georgios1476@georgios1476 Жыл бұрын

    • Much appreciated dude!

      @codecommerce@codecommerce Жыл бұрын

  • This was great! Thanks.

    @mattmooney8625@mattmooney8625 Жыл бұрын

  • Great video. Would be amazing to see a role-based authentication video up soon.

    @cmar8647@cmar86472 жыл бұрын

    • Thank you! User admin role video coming!

      @codecommerce@codecommerce2 жыл бұрын

  • One of the best tutorial 🤘

    @angomoson7356@angomoson7356 Жыл бұрын

    • Thank you dude!

      @codecommerce@codecommerce Жыл бұрын

  • Excellent!!! This is what I needed it.

    @89oka@89oka Жыл бұрын

    • Awesome Sergio!

      @codecommerce@codecommerce Жыл бұрын

  • thanks sir this tutorial teach me a lot of new things that i want to put in my final project

    @HanSolo-hr4hz@HanSolo-hr4hz11 ай бұрын

    • Thank you Han Solo!! Love the name too 💪

      @codecommerce@codecommerce11 ай бұрын

  • thanks this was of great help 🙌

    @sammy.2827@sammy.2827 Жыл бұрын

  • Very helpfull and easy to watch! Thanks man! 🙌🙌🙌

    @At3nT@At3nT Жыл бұрын

    • Thanks dude!

      @codecommerce@codecommerce Жыл бұрын

  • Boom! Liked and Subscribed :)

    @ilirbajrami2902@ilirbajrami2902 Жыл бұрын

  • Really great video 😊

    @mayurlatake96@mayurlatake96 Жыл бұрын

    • Thank you! 😀

      @codecommerce@codecommerce Жыл бұрын

  • Thank you soo much for this video, could make my submission on time thanks to this.

    @pseudonetwork2581@pseudonetwork2581 Жыл бұрын

  • Thank you so much man, I've learned a lot from this video.

    @mostafaekbal3863@mostafaekbal3863 Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • Wow.. really helpful this video tutorials for beginners... can start quickly their career.. thank you so much sir..

    @gayashanmadhuranga3375@gayashanmadhuranga3375 Жыл бұрын

  • thank you so much sir its very helpfull my university project

    @tharindulak@tharindulak2 ай бұрын

  • You are the man for this video, thank you!

    @alexzimmerman3447@alexzimmerman3447 Жыл бұрын

    • Thanks Alex!

      @codecommerce@codecommerce Жыл бұрын

  • This is some God Level Tutorial.i have watched a lot of tutorials for firebase but did'nt get it but now❤❤❤❤❤

    @dharmeshkase6003@dharmeshkase600311 ай бұрын

    • Thank you So much!

      @codecommerce@codecommerce10 ай бұрын

  • Boom! Good stuff man

    @nourmoubayed@nourmoubayed Жыл бұрын

    • Thanks man!!!

      @codecommerce@codecommerce Жыл бұрын

  • Great video👍👍

    @fari4r588@fari4r588 Жыл бұрын

  • Perfect. You're such a nice guy.

    @xlgablx@xlgablx9 ай бұрын

    • I appreciate that!

      @codecommerce@codecommerce9 ай бұрын

  • Great video! Hope you will get more followers.

    @markojovanovic165@markojovanovic1654 ай бұрын

    • Thanks mark!

      @codecommerce@codecommerce3 ай бұрын

  • Finally completed this tutorial! I love how natural how it is, errors?! Booom, we fix em together

    @earlpappi5754@earlpappi5754 Жыл бұрын

    • Haha thanks man!!

      @codecommerce@codecommerce Жыл бұрын

  • 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 💯

    @CasualEdits@CasualEdits2 жыл бұрын

    • 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! 💪

      @codecommerce@codecommerce Жыл бұрын

    • Hugeeeee

      @heetshah4490@heetshah4490 Жыл бұрын

  • this video alone worth the sub

    @VindexTOS@VindexTOS Жыл бұрын

  • Thank you very much 💖

    @kattziel@kattziel8 ай бұрын

  • 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

    @ilirbajrami2902@ilirbajrami2902 Жыл бұрын

    • Thank you my friend! I’ll make the update! Good catch :)

      @codecommerce@codecommerce Жыл бұрын

    • Thanks. This fixed my app from logging out user after refreshing the page.

      @abuxinegaming7600@abuxinegaming7600 Жыл бұрын

  • Great tutorial! Really love it :) Got one question tho. In my case useEffect seems to fire twice, for example i got console.log firebase user object twice, also the null is being logged twice. Got any idea what might be a reason?

    @krufkamilka7182@krufkamilka7182 Жыл бұрын

  • Maannnnn you're so AMAZING, omg, thanks so much

    @JoaoPedro-vj1fj@JoaoPedro-vj1fj2 жыл бұрын

    • Awesome dude thank you!

      @codecommerce@codecommerce2 жыл бұрын

  • thank you from Uzbekistan

    @anvaribodullayev561@anvaribodullayev561 Жыл бұрын

    • Uzbekistan- that’s awesome dude! 💪

      @codecommerce@codecommerce Жыл бұрын

  • 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 ! )

    @FrontendFLow811@FrontendFLow8112 жыл бұрын

    • Absolutely man!

      @codecommerce@codecommerce2 жыл бұрын

  • I have a question, which might seem stupid. Im „quite“ new to this : In the Form you used the onChange to set the States. Wouldnt that mean, that the State gets updated with every Keystroke? I have seen different approaches with useRef and FormData. Are there certain downsides for using useRef or FormData that i am Not aware of? Great Video, really helped me :)

    @CleverCrafting@CleverCrafting Жыл бұрын

  • Bro you are by far the best and most easy to watch developer out there.....

    @ivanwinter3435@ivanwinter343510 ай бұрын

    • Thank you Ivan! Much appreciated!

      @codecommerce@codecommerce10 ай бұрын

    • @@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?

      @ivanwinter3435@ivanwinter343510 ай бұрын

  • Great video ,I wish More

    @fadysherif6640@fadysherif6640 Жыл бұрын

  • Great Video!

    @supTE@supTE Жыл бұрын

  • 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 !

    @Wyrmidion@Wyrmidion Жыл бұрын

    • Thank you for this. Without you, I may still be trying to figure this one out.

      @frischsticks@frischsticks Жыл бұрын

  • Thank you mate

    @MiVoodoo@MiVoodoo Жыл бұрын

    • Anytime man! Thanks for watching 🙏

      @codecommerce@codecommerce Жыл бұрын

  • thank you😍

    @HadiRazal@HadiRazal Жыл бұрын

  • you are number 1 !

    @chilloutmusic8437@chilloutmusic8437 Жыл бұрын

  • Great video

    @moediakite895@moediakite895 Жыл бұрын

  • Thank you so much!

    @yuliaa.4741@yuliaa.4741 Жыл бұрын

    • You're welcome!

      @codecommerce@codecommerce Жыл бұрын

  • 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

    @andriymishchenko4570@andriymishchenko45709 ай бұрын

    • Sure do man! Much appreciated sir!

      @codecommerce@codecommerce9 ай бұрын

  • very good tutorial i tried a few more eventuly successed with this one

    @ariw96@ariw96 Жыл бұрын

    • Awesome!!

      @codecommerce@codecommerce Жыл бұрын

  • Thank you very much, you rule!

    @maurov6861@maurov6861 Жыл бұрын

    • Thank you my friend!

      @codecommerce@codecommerce Жыл бұрын

  • great stuff... thx a lot

    @StephBsimon@StephBsimon7 ай бұрын

  • good job!

    @RaulGlasgow@RaulGlasgow7 ай бұрын

  • really very helpful this video🙂🙂

    @faisalahmad100@faisalahmad1002 жыл бұрын

    • I'm so glad!

      @codecommerce@codecommerce2 жыл бұрын

  • 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

    @fieryninja2374@fieryninja2374 Жыл бұрын

  • I coded along and glad it worked just well.quick question tho,when I reload the page or open the logged in user in a new tab am logged out..should that be the case tho ? if not,then how should it be.

    @jackodhiambo5710@jackodhiambo571011 ай бұрын

  • tahnks very much

    @Beranekaragamcitarasa@Beranekaragamcitarasa10 ай бұрын

  • Thank you for the video, I have learned a lot, can you for the next one have a full featured CRUD + authentication done with React and Firebase?

    @theS3Interdev@theS3Interdev2 жыл бұрын

    • Sure thing!

      @codecommerce@codecommerce2 жыл бұрын

  • Hey man, Thanks for putting this out there. I was reading through the documentation about firebase's "Sign in with a pre-built UI" and wanted to implement that in one of my projects but it isint clear to me where to "require the following modules within your source files:" ... what source files? Curious if you've looked into that offering. Seems it could streamline alot of the auth with a common UX for end users.

    @wsbarth92@wsbarth922 жыл бұрын

    • I haven't used the pre-built UI. I have used the google pop-up which is quite cool!

      @codecommerce@codecommerce2 жыл бұрын

    • @@codecommerce yeah, i'm still curious what that 'all-in-one' sign in is like, I feel that auth should be part of any bootstrap, it's such a common thing, but i guess it can get as complex as you want, i finally was able to wrap my head (somewhat) around auth by hodgepodging a bunch of tuts together.

      @wsbarth92@wsbarth922 жыл бұрын

  • Thank you Very much

    @Sintayehu156@Sintayehu156 Жыл бұрын

  • Nice video. kindly make a video on role-based authentication react JS and Firebase

    @user-xm8xx1it4p@user-xm8xx1it4p8 ай бұрын
KZhead