React Authentication Crash Course (with Firebase v9)
Vložit
- čas přidán 27. 07. 2024
- Sign up, log in, and log out users with Firebase Authentication from your front end React Application.
(Web v9 Modular)
The code used in this video:
github.com/LogicismX/React-Fi...
Firebase Auth Documentation:
firebase.google.com/docs/auth...
Firebase Auth Playlist:
• React Authentication C...
Timestamps:
00:00 - Demo
00:39 - Firebase Setup
03:20 - Auth Setup
03:50 - Signup Users
10:23 - onAuthStateChange (useAuth + currentUser)
16:10 - Logout Users
19:14 - Login Users
20:55 - Weak Password Error - Věda a technologie
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 !!!
@Monique I'm so happy that I was able to add value to you. It means a lot.
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!!
thank you too!
Great video it really helped me out, I didn't quit understand the difference between v8 and v9! Keep up the content great explanation!
thank you :))
Amazing video, you showed so much great stuff in 22 minutes. Thank you.
glad it helped :)
Nice video, short and crisp!
Much all we need!
glad you liked it :))
just wanted to say thank you , this helped me with a problem with Firebase
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"}
Great video! Looking forward to the next video on auth
You really helped me, i've had trouble with monitoring the auth state. Thanks a lot!
glad i was able to help :))
Excellent video bro! really appreciated
Thank you for creating this video! it has helped me so much
thanks for this! patiently waiting for your next video =))
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 :(
really helpful great job bro
straight to the point easy and simple and understandable , Thanks
thank you too!
It was a very useful explanation. thank you
You read my mind 😂 thank u so much for all the good videos
thas 'cause im secretly a psychic 🤫
You saved me so much time. thank you
Very nice tutorial!
Short but sweet thank brt
Just finished your last playlist, will check this video! Waiting for the search bar functionality you replied to a comment :)
thanks @Camilo! About the search bar, you're talking about the Firestore playlist right?
Yes, that one!
Awesome!! This solved my problems
so glad it did!
Worked
Finally!.
literally best firebase authentication,thank you my man
keep up the good work
i'm flaterred, thank you so much @Burak Demir :))
thank you for you job and videos !!
thank you too :))
Thanks for this hard theme
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 .😬
@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!
@@ravenjs did you make the video or not yet ?
Awesome. Keep it up.
thanks @merakli :)
This is gold!
haha thank you so much for this amazing comment :))
Awesome video +++++++++++++++++++ Thank you.
great tutorial!
Glad you think so!
Thanks alot bro
thank you too :))
Thanks man 🙂
you're most welcome :)
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?
thank you!!
thank you too :)
goat tutorial. really helped me
goat? 🤣 xD
@@ravenjs greatest of all time
@@Ramenmemes sensei you just taught me something new today. Thank you sm
@@ravenjs UwU
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
What about reauthentication? How do we get the credentials?
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?
how are you implementing the loading state? are you using an async function?
Would you be able to make a video covering user roles with Firebase and React?
@Cian Kelly thank you so much for this amazing suggestion. I'll note it down!
is useRef replacing the onChange={event.target.value} ?
yes! you are absolutely correct :))
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
Do you mean react-redux with Firebase Authentication or Cloud Firestore?
@@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 🔥
@@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 :)
I have an error Uncaught TypeError: (0 , _firebase__WEBPACK_IMPORTED_MODULE_1__.useAuth) is not a function
you could try removing node_modules and reinstall all the npm packages again?
@@ravenjs I did not try it yet
Yeah but how do u get those input values to clear after submitting??
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
bravoooooooooooooooooo
thank youuuuuuuuuuuuuuuu
How can we add Firstname and Lastname fields?
@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
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).
Hey would you be able to make vids on private routes
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
Bro Firebase is a like Backend?
can you make send notification firebase v9 with react.js
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 :))
Also make authentication tutorial on phone number and other providers..
🙂
yes great idea! tq
@@ravenjs most welcome..
And I am waiting for this..
hey sorry are you french? nice video thanks ;)
nopee Noah
Thanks for your help any discord server to help junior devs ?
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
thanks for this please do make the video for updating email and password soon
hey @Abdullah Abdulfatah thanks for the encouragement :)) i'll do my best
@@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
@@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
@@draq_ whee calm down brotha :) did you manage to solve this issue?
@@draq_ hey I'm all ears. how can i help you?
Love the video but create a .env file to hide the api credentials
yea haha i'll be removing the firebase project soon
thanks for the video, your second video is hidden
no wayy, how did you know 😉😏
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 ?
"the code becoming red" is really subjective to which linter or IDE you are using and how you configure it, so yea it depends
How to auto log out when the user closed the browser or the tab?
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