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

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 309

  • @KarakiriCAE
    @KarakiriCAE 2 года назад +10

    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!

  • @april9606
    @april9606 2 года назад +38

    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!

  • @ToxicFangX1
    @ToxicFangX1 Год назад +1

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

  • @ivanwinter3435
    @ivanwinter3435 Год назад +1

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

    • @codecommerce
      @codecommerce  Год назад +1

      Thank you Ivan! Much appreciated!

    • @ivanwinter3435
      @ivanwinter3435 Год назад

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

  • @alifhasanshahOfficial
    @alifhasanshahOfficial Год назад +1

    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 .

  • @dharmeshkase6003
    @dharmeshkase6003 Год назад +1

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

  • @ilirbajrami2902
    @ilirbajrami2902 2 года назад +4

    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

    • @codecommerce
      @codecommerce  2 года назад +1

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

    • @abuxinegaming7600
      @abuxinegaming7600 Год назад

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

  • @Andrea-mm5yy
    @Andrea-mm5yy Год назад +1

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

  • @ShredNekM80
    @ShredNekM80 Год назад

    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

  • @codexjay674
    @codexjay674 2 года назад +1

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

  • @shamiyafo
    @shamiyafo Год назад +6

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

  • @tejedaAlex
    @tejedaAlex Год назад

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

  • @codeshv4071
    @codeshv4071 Год назад

    Best tutorial on Firebase Authentication, extremely clear!

  • @csc5215
    @csc5215 2 года назад +1

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

  • @samadsiddiqui5925
    @samadsiddiqui5925 Год назад +3

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

  • @raelyudan3471
    @raelyudan3471 2 года назад

    والله انك شيخ قومك ، يومين أجرب حل للتحديث الأخير و انت جبتها بكم دقيقه الله يسعدك يا شيخ thank you bro , you saved me

  • @siddheshborse5416
    @siddheshborse5416 Год назад

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

  • @Misathebotter
    @Misathebotter Год назад

    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!

  • @LarryMarkel
    @LarryMarkel Год назад

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

  • @cmar8647
    @cmar8647 2 года назад +3

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

    • @codecommerce
      @codecommerce  2 года назад +1

      Thank you! User admin role video coming!

  • @CasualEdits
    @CasualEdits 2 года назад +10

    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 💯

    • @codecommerce
      @codecommerce  2 года назад +3

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

    • @heetshah30
      @heetshah30 Год назад

      Hugeeeee

  • @techgirlmya
    @techgirlmya Год назад

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

  • @andriymishchenko4570
    @andriymishchenko4570 Год назад

    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

  • @earlpappi5754
    @earlpappi5754 2 года назад +1

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

  • @JH-br4iv
    @JH-br4iv 2 года назад

    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!

    • @codecommerce
      @codecommerce  2 года назад +1

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

  • @martinznnajijr4737
    @martinznnajijr4737 2 года назад

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

  • @tdgualu7148
    @tdgualu7148 2 года назад

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

  • @offthedeepend762
    @offthedeepend762 Год назад

    great tutorial, love the aggressive breathing

  • @markojovanovic165
    @markojovanovic165 10 месяцев назад +1

    Great video! Hope you will get more followers.

  • @nathankibet9184
    @nathankibet9184 Год назад

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

  • @thesheikhnoor
    @thesheikhnoor Год назад

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

  • @anildemir5425
    @anildemir5425 2 года назад

    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!

  • @HaitouHaitou
    @HaitouHaitou 2 года назад

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

    • @codecommerce
      @codecommerce  2 года назад

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

  • @ashharmansuri6816
    @ashharmansuri6816 2 года назад

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

  • @quintondekyls9709
    @quintondekyls9709 2 года назад

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

  • @gayashanmadhuranga3375
    @gayashanmadhuranga3375 Год назад

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

  • @MiVoodoo
    @MiVoodoo 2 года назад

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

    • @codecommerce
      @codecommerce  2 года назад

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

  • @sixtusonyedibe1619
    @sixtusonyedibe1619 2 года назад

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

  • @Wyrmidion
    @Wyrmidion Год назад +7

    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 !

    • @frischsticks
      @frischsticks Год назад +1

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

  • @HanSolo-hr4hz
    @HanSolo-hr4hz Год назад +1

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

    • @codecommerce
      @codecommerce  Год назад

      Thank you Han Solo!! Love the name too 💪

  • @samitaasbl1335
    @samitaasbl1335 2 года назад

    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.

  • @AdityaSharan811
    @AdityaSharan811 2 года назад +1

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

  • @pawelczar
    @pawelczar 2 года назад

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

  • @At3nT
    @At3nT Год назад +1

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

  • @georgios1476
    @georgios1476 2 года назад +1

    Thanks man! love your energy

  • @FFFYYYYY
    @FFFYYYYY 2 года назад

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

  • @josuenataren4806
    @josuenataren4806 Год назад

    Just found this gem; you are awesome thank you!

  • @petren44
    @petren44 Год назад

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

  • @123BiB321
    @123BiB321 2 года назад

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

  • @codestudio497
    @codestudio497 Год назад +1

    good stuff , but next time note no one really care learning html tags and tailwind css when they already searched for this video

  • @socrates1701
    @socrates1701 2 года назад

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

  • @carminameza
    @carminameza 2 года назад

    Love how complete you make the videos, great tutorial

  • @amancharlamanas3812
    @amancharlamanas3812 Год назад

    Thank you , Your videos are a blessing !

  • @rodrigo.bunhak
    @rodrigo.bunhak 2 года назад

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

  • @avarma_y
    @avarma_y 2 года назад

    Love your tutorials! Keep doing more!

  • @alexzimmerman3447
    @alexzimmerman3447 2 года назад

    You are the man for this video, thank you!

  • @angomoson7356
    @angomoson7356 2 года назад

    One of the best tutorial 🤘

  • @Isotope5000
    @Isotope5000 Год назад

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

  • @mostafaekbal3863
    @mostafaekbal3863 2 года назад

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

  • @mayurlatake96
    @mayurlatake96 Год назад +1

    Really great video 😊

  • @89oka
    @89oka 2 года назад

    Excellent!!! This is what I needed it.

  • @aaaliii4u
    @aaaliii4u Год назад

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

  • @djonsi88
    @djonsi88 2 года назад

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

  • @danmartin4822
    @danmartin4822 2 года назад

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

  • @Zeiwon
    @Zeiwon 2 года назад

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

  • @tharindulak
    @tharindulak 9 месяцев назад

    thank you so much sir its very helpfull my university project

  • @pseudonetwork2581
    @pseudonetwork2581 Год назад

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

  • @FakhruddinKaukawala-g1t
    @FakhruddinKaukawala-g1t Год назад

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

  • @JoaoPedro-vj1fj
    @JoaoPedro-vj1fj 2 года назад

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

  • @fieryninja2374
    @fieryninja2374 2 года назад +2

    for anyone who is curious if you want a password confirmation while signing up make a new div with a new label and input type password and make a new useState for the password confirmation. Then in handleSubmit put this:
    const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");
    if (password === passwordConfirm) {
    try {
    await createUser(email, password);
    navigate("/account");
    } catch (e) {
    setError(e.message);
    console.log(e.message);
    }
    } else {
    setError(
    "Firebase: Passwords do not match. (password and confirmation do not match)"
    );
    console.log(
    "Firebase: Passwords do not match. (password and confirmation do not match)"
    );
    }
    };

  • @saiteja9116
    @saiteja9116 2 года назад +2

    my signin page is getting blank when i wrap with AuthContextProvider what is the error????

  • @VindexTOS
    @VindexTOS Год назад

    this video alone worth the sub

  • @subramanyam.d24m56
    @subramanyam.d24m56 2 года назад

    Thanks a lot for your clear explanation

  • @RitchieOfficiel
    @RitchieOfficiel Год назад

    Thx for the vid' gym bro !

  • @ilirbajrami2902
    @ilirbajrami2902 2 года назад

    Boom! Liked and Subscribed :)

  • @nourmoubayed
    @nourmoubayed 2 года назад

    Boom! Good stuff man

  • @GH-pu3xc
    @GH-pu3xc Год назад

    Epic video! Thanks so much!

  • @anvaribodullayev561
    @anvaribodullayev561 2 года назад

    thank you from Uzbekistan

    • @codecommerce
      @codecommerce  2 года назад

      Uzbekistan- that’s awesome dude! 💪

  • @youtubeshort_usa
    @youtubeshort_usa 9 месяцев назад

    thanks man you really helped a lot

  • @fari4r588
    @fari4r588 Год назад

    Great video👍👍

  • @HadiRazal
    @HadiRazal Год назад +1

    thank you😍

  • @ariw96
    @ariw96 2 года назад

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

  • @mattmooney8625
    @mattmooney8625 2 года назад

    This was great! Thanks.

  • @CleverCrafting
    @CleverCrafting Год назад

    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 :)

  • @theSavanahDev
    @theSavanahDev 2 года назад +1

    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?

  • @sammy.2827
    @sammy.2827 2 года назад

    thanks this was of great help 🙌

  • @fadysherif6640
    @fadysherif6640 Год назад

    Great video ,I wish More

  • @danieltanasec
    @danieltanasec Год назад

    the firebaseConfig does not contain sensible information. Each of the firebase services have various security rules that can be used. Like read/write rules for databases/storage or authentication check for cloud functions.

  • @MiVoodoo
    @MiVoodoo 2 года назад +1

    Thank you mate

    • @codecommerce
      @codecommerce  2 года назад +1

      Anytime man! Thanks for watching 🙏

  • @chilloutmusic8437
    @chilloutmusic8437 2 года назад

    you are number 1 !

  • @earlpappi5754
    @earlpappi5754 2 года назад +3

    great content! I’m currently stuck at signing up, it is returning createUser is not a function

    • @codecommerce
      @codecommerce  2 года назад +1

      Do you have a link to your code? GitHub maybe?

    • @raspudic88
      @raspudic88 2 года назад +2

      Check your value in UserContext.Provider. Make sure there are double {{ }}. Also make sure you spelled it correctly

  • @supTE
    @supTE 2 года назад

    Great Video!

  • @maurov6861
    @maurov6861 2 года назад

    Thank you very much, you rule!

  • @fieryninja2374
    @fieryninja2374 2 года назад

    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

  • @Beranekaragamcitarasa
    @Beranekaragamcitarasa Год назад +1

    tahnks very much

  • @salpygidis
    @salpygidis 2 года назад +1

    I've done this video 3 times. Great tutorial. Are there other cleaner ways of doing the protected routes though? I have been looking everywhere to see some options

    • @codecommerce
      @codecommerce  2 года назад

      Many different options for protecting routes client and server side!

  • @amankushwaha8180
    @amankushwaha8180 Год назад

    hey can you please provides your notes it would be a great help
    your teaching is really good

  • @moediakite895
    @moediakite895 Год назад

    Great video

  • @mohamedyoussef8835
    @mohamedyoussef8835 2 года назад

    Awesome video ++++++++++++++++++ 😃

  • @morpheusmatrix1073
    @morpheusmatrix1073 Год назад

    Awesome ! Thank you ! But I have a question. Why the guy from firbase video said "it's totaly fine to include api key in client side" ? It's a new feature of firebase ?

    • @frischsticks
      @frischsticks Год назад

      best practice to never reveal API key. PERIOD! For your own safety.