React Authentication Crash Course (with Firebase v9)

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

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

  • @monique2839
    @monique2839 2 года назад +6

    I just want you to know, you have one of THE BEST firebase tutorials with react on youtube. I always recommend people to your channel when they are getting started with Firebase. I love your teaching style! Everything is clear and well explained and you get straight to the point. Please please please continue to make more videos like this and just content in general. I really appreciate it !!!

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

      @Monique I'm so happy that I was able to add value to you. It means a lot.

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

    Thank you. The same a lot of videos explain in really difficult ways, you resolve it in 22 mins. I am lucky I decided to look for more videos and found this one. Thanks!!

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

      thank you too!

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

    just wanted to say thank you , this helped me with a problem with Firebase

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

    You really helped me, i've had trouble with monitoring the auth state. Thanks a lot!

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

      glad i was able to help :))

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

    Nice video, short and crisp!
    Much all we need!

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

      glad you liked it :))

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

    Great video it really helped me out, I didn't quit understand the difference between v8 and v9! Keep up the content great explanation!

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

      thank you :))

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

    Great content, thanks!
    Guys if you only want the name of the current user in 'Currently logged in as:' you can write
    Currently logged in as: {currentUser ? currentUser?.email.split("@")[0] : "Guest"}

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

    Just finished your last playlist, will check this video! Waiting for the search bar functionality you replied to a comment :)

    • @ravenjs
      @ravenjs  3 года назад +1

      thanks @Camilo! About the search bar, you're talking about the Firestore playlist right?

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

      Yes, that one!

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

    You saved me so much time. thank you

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

    great tutorial. but why is it when I make sign up 1 account, log out, then try to make a new account, i keep getting the error warning? if i try to log in with the initial account, it works, but if i make a 2nd account it keeps getting errors until i close the window, terminal & visual studio code... then open vsc and run npm start again ... then im able to make a different account.. anyone know why?

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

    Very nice tutorial!

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

    straight to the point easy and simple and understandable , Thanks

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

      thank you too!

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

    really helpful great job bro

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

    Excellent video bro! really appreciated

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

    Short but sweet thank brt

  • @heyiamigor
    @heyiamigor 3 года назад +1

    Great video! Looking forward to the next video on auth

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

    Amazing video, you showed so much great stuff in 22 minutes. Thank you.

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

      glad it helped :)

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

    I'm having an issue. when I click on signup the data I filled in appears in the url of my page. page gets refreshed with that url and no data saved In firebase. I don't know what's wrong with it

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

    It was a very useful explanation. thank you

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

    thanks for this! patiently waiting for your next video =))

    • @ravenjs
      @ravenjs  3 года назад +1

      thank you somuch for your enthusiasm Joe :)) i've been super duper busy these few weeks and i've been dying to make a new video. i still am. thx for ur patience and sory for the delay :(

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

    Worked
    Finally!.

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

    Thank you for creating this video! it has helped me so much

  • @oussamaabdallah5856
    @oussamaabdallah5856 3 года назад +3

    can u please make a video about react-redux firebase v9 I had searched all the net but i didn't find any updated guide? thanks

    • @ravenjs
      @ravenjs  3 года назад +1

      Do you mean react-redux with Firebase Authentication or Cloud Firestore?

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

      ​@@ravenjs ohh thanks for the fast reply ! i mean with cloud firestore i worked with react-redux-firebase but now they didnt update the package with the v9 new syntaxe and methods , i dont know if there is an other tool , you will be the first one talk about redux and firebase v9 🔥

    • @ravenjs
      @ravenjs  3 года назад +1

      @@oussamaabdallah5856 ahh. so you wanna store the data fetched from firestore inside of redux? if this is the case, it's pretty easy to implement this, i'll definitely make a video about it. i just wanna make sure i understood ur question completely b4 making the video :)

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

    I have an error Uncaught TypeError: (0 , _firebase__WEBPACK_IMPORTED_MODULE_1__.useAuth) is not a function

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

      you could try removing node_modules and reinstall all the npm packages again?

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

      @@ravenjs I did not try it yet

  • @mohamedmrabet4814
    @mohamedmrabet4814 3 года назад +3

    This is gold!

    • @ravenjs
      @ravenjs  3 года назад +1

      haha thank you so much for this amazing comment :))

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

    How to auto log out when the user closed the browser or the tab?

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

      Good question. In Firebase Auth, thers 3 types of auth state persistence: 'local', 'session' and 'none'. You can find more details in the docs i've linked below, and also you can use
      setPersistence(auth, browserSessionPersistence)
      Auth State Persistence Docs:
      firebase.google.com/docs/auth/web/auth-state-persistence#modifying_the_auth_state_persistence

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

    What about reauthentication? How do we get the credentials?

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

    goat tutorial. really helped me

    • @ravenjs
      @ravenjs  3 года назад +1

      goat? 🤣 xD

    • @Ramenmemes
      @Ramenmemes 3 года назад +1

      @@ravenjs greatest of all time

    • @ravenjs
      @ravenjs  3 года назад +1

      @@Ramenmemes sensei you just taught me something new today. Thank you sm

    • @Ramenmemes
      @Ramenmemes 3 года назад +1

      @@ravenjs UwU

  • @Ash-high
    @Ash-high 3 года назад +2

    Awesome!! This solved my problems

    • @ravenjs
      @ravenjs  3 года назад +1

      so glad it did!

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

    is useRef replacing the onChange={event.target.value} ?

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

      yes! you are absolutely correct :))

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

    Yeah but how do u get those input values to clear after submitting??

    • @ravenjs
      @ravenjs  3 года назад +1

      you might wanna change to using controlled fields in React for more advanced features like this. i chose useRef here simply because it was the cheapest and dirtiest way to get going with input fields in react xD

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

    thank you for you job and videos !!

    • @ravenjs
      @ravenjs  3 года назад +1

      thank you too :))

  • @nicolepozo3610
    @nicolepozo3610 3 года назад +3

    You read my mind 😂 thank u so much for all the good videos

    • @ravenjs
      @ravenjs  3 года назад +1

      thas 'cause im secretly a psychic 🤫

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

    Awesome. Keep it up.

    • @ravenjs
      @ravenjs  3 года назад +1

      thanks @merakli :)

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

    hey sorry are you french? nice video thanks ;)

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

      nopee Noah

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

    How can we add Firstname and Lastname fields?

    • @ravenjs
      @ravenjs  3 года назад +3

      @Super Crunch, to store user-related data, you'll need to use firebase auth in conjunction with firebase/firestore. I have a whole playlist about Firestore if you need it, but the simple answer is:
      create a user document in Firebase/Firestore, give it a field called userID, and store the Firebae Auth userID in the Firestore document. Then, you can also store other user-related info like the firstname and lastname fields in the cloud firestoredatabase

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

    Hi! I learned a lot from your tutorials and I implement it it my app. I am using React, Firebase and Redux for my state management. So far I was able to implement the authentication but I have problem on how to sync my navigation when after login/sign up in react firebase. I am using react-router in my navigation but the login, signup still shows up a split seconds before it get removed.
    My state looks like this -> user: null, isLoading: false. But the action to switch isLoading to true is always the first to finish and action to save the user is always the last. Can you give me some tip to fix this issue? Should I just set a delay to sync the 2 states?

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

      how are you implementing the loading state? are you using an async function?

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

    Awesome video +++++++++++++++++++ Thank you.

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

    Hey would you be able to make vids on private routes

    • @ravenjs
      @ravenjs  3 года назад +1

      yes @Daniel Odiase thank you so much for this suggestion. I plan on making a video to show how to create user roles and private routes using react-router-dom

  • @cianjk
    @cianjk 3 года назад +3

    Would you be able to make a video covering user roles with Firebase and React?

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

      @Cian Kelly thank you so much for this amazing suggestion. I'll note it down!

  • @ДорофейШейко
    @ДорофейШейко 3 года назад +2

    Thanks for this hard theme

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

    can you make send notification firebase v9 with react.js

    • @ravenjs
      @ravenjs  3 года назад +1

      hey @Ali!
      Yes, I believe you can get push notifications with Firebase and ReactJS:
      firebase.google.com/docs/cloud-messaging/js/client
      I will need to make a specific video to cover this topic, thanks a million for this amazing suggestion :))

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

    bravoooooooooooooooooo

    • @ravenjs
      @ravenjs  3 года назад +1

      thank youuuuuuuuuuuuuuuu

  • @burakdemir6601
    @burakdemir6601 3 года назад +5

    literally best firebase authentication,thank you my man
    keep up the good work

    • @ravenjs
      @ravenjs  3 года назад +1

      i'm flaterred, thank you so much @Burak Demir :))

  • @AdAm-yn1ov
    @AdAm-yn1ov 3 года назад +2

    Thanks man 🙂

    • @ravenjs
      @ravenjs  3 года назад +1

      you're most welcome :)

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

    great tutorial!

    • @ravenjs
      @ravenjs  3 года назад +1

      Glad you think so!

  • @Rene-mg9eg
    @Rene-mg9eg 3 года назад +4

    Great video! Keep up the good content 🔥
    Would be nice if you can make a video how to create profildata in firestore and connect them to the userid frim firebase authentication.
    Im stuck at this at the moment because im an absolute beginner and the logic is kinda tricky for me .😬

    • @ravenjs
      @ravenjs  3 года назад +4

      @Rene you are on point! I'm definitely making videos on how to use Cloud Firestore with Firebase Auth in conjunction. thx for this brilliant suggestion too!

    • @nagweentareq7536
      @nagweentareq7536 3 года назад +1

      @@ravenjs did you make the video or not yet ?

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

    Also make authentication tutorial on phone number and other providers..
    🙂

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

      yes great idea! tq

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

      @@ravenjs most welcome..
      And I am waiting for this..

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

    Thanks alot bro

    • @ravenjs
      @ravenjs  3 года назад

      thank you too :))

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

    Thanks for your help any discord server to help junior devs ?

    • @ravenjs
      @ravenjs  3 года назад +1

      not yet...for now. our community is not nearly as big yet, but if you need any help you can just put them in the yt comments at the moment :) thx for your enthusiasm though

  • @ANAS-md4vp
    @ANAS-md4vp Год назад

    when I try to signup I get this message: Possible Unhandled Promise Rejection:
    FirebaseError: Firebase: Error (auth/admin-restricted-operation).
    FirebaseError: Firebase: Error (auth/admin-restricted-operation).

  • @SadiqCafarli-p8z
    @SadiqCafarli-p8z Год назад

    Bro Firebase is a like Backend?

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

    thank you!!

    • @ravenjs
      @ravenjs  3 года назад +1

      thank you too :)

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

    Love the video but create a .env file to hide the api credentials

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

      yea haha i'll be removing the firebase project soon

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

    thanks for this please do make the video for updating email and password soon

    • @ravenjs
      @ravenjs  3 года назад +1

      hey @Abdullah Abdulfatah thanks for the encouragement :)) i'll do my best

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

      @@ravenjs I don't mean to disturb you but i am currently facing the issue right now for the assessment of the job i applied for
      Not so much luck so far

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

      @@ravenjs The value of the input changes by one letter and it just throws an error and sends me a notification mail for the letter that changed, I'm going crazy right now

    • @ravenjs
      @ravenjs  3 года назад +1

      ​@@draq_ whee calm down brotha :) did you manage to solve this issue?

    • @ravenjs
      @ravenjs  3 года назад +1

      @@draq_ hey I'm all ears. how can i help you?

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

    thanks for the video, your second video is hidden

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

      no wayy, how did you know 😉😏

  • @ReVoX161
    @ReVoX161 3 года назад +1

    At 15 : 00 :
    when i did the question mark at currentuser : Currently logged in as : { currentUser?.email} . the code after this one all became red , still suprsingly works . is there something wrong ?

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

      "the code becoming red" is really subjective to which linter or IDE you are using and how you configure it, so yea it depends