Firebase React Authentication Tutorial For Beginners - Private Route With Hooks
ฝัง
- เผยแพร่เมื่อ 4 พ.ค. 2019
- 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
Follow me on Odysee: odysee.com/$/invite/@stepbyst...
New video about Firebase Database + React: • How to use Firebase Fi... Sometimes you just need to make a fast prototype and you don’t want to mess with back end, authentication, authorization and all of that. Here is where Google’s firebase can help you. In this tutorial I’ll show you how to connect your react app with Firebase authentication module.
It is Javascript tutorial for beginners. We are using React with hooks, React Router, React Router Dom and Firebase.
We’ll use Firebase Authentication module to handle login/sign up and React router to manage routing.
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code for this tutorial: github.com/satansdeer/react-f...
Subscribe to my emails and get free React testing checklist: eepurl.com/c_8tzP
Join my Discord server: / discord
Hi Maksim. There is a bug in this code. After watching the video after this, I realized you fixed it before the next video, but you did not mention it anywhere in either videos.
It's in Auth.js. In between the two videos (because you start that video with a recap), it appears you wrote the pending/loading logic. Without this logic, private route will hit the too early, while the check for currentUser is still pending.
But thanks for the video, very helpful series!
Thanks for the comment, i've pinned it so others can also see it. Later ill update the code in the attached repo.
Can you expand further on how to fix this bug ?
@@johnparsons4434 I found a bug and try to fix it using async/await. Like await onAuthStateChanged(); setLoading(false), but that's not working. When i use example from repo - its done. Can you please explain how it works?
@@johnparsons4434 Thanks for that, fixed a bug I was working around for weeks :)
Thanks Maksim! I have been using PrivateRoutes with this, and I've put in the pending/loading logic, but every time I click on a navigation link, it says it's loading, so there's always a little blip that looks like a page refresh (but isn't). I'm wondering if there's a work-around, or a way to only get it to reload for redirects. Anyone have any thoughts?
Theon you’re a good man
lmao
LOL
LMAO
xD
oh wow, best react video comment ever
Holy f***ing f***, man, you're a lifesaver!! I've been bouncing around the internet for months and somehow missed your video, but yours is the first one that worked for me! I just had to refactor a couple of things so they worked for React Router v6 & Google auth (Firebase). If you haven't yet, doing another video with that combo would be amazing. Thanks so much for taking the time to post this, it saved me so much frustration
What changes did you make? As soon as I wrap my routes in an AuthProvider, everything disappears when the app runs. Idk how many different tutorials and code examples I’ve used to try and fix this but nothing is working. Ended up going with Auth0 because their AuthProvider works right out of the box
without going through all the way upto the end in video...I was able to figure out how to work with firebase auth...thank you for this great video...!
Great tutorial. I integrated this into a little side app and all seems good to go. Now I'm just curious how to handle multiple protected routes. In any case, this was an excellent guide. Subscribed.
Thank you so much man, quick and straight to the point. Worked like a charm man!
Thanks Maksim, went down the react-firebase-auth-provider route but it felt clunky. Your solution feels a lot more lightweight. Thanks so much.
Most useful tutorial I have found on the internet about firebase auth, thanks a lot for sharing.
Very nice! Many thanks for this tutorial. I got head-ache trying to understand everything from scratch, but using your code and vide - super great!
amazing tutorial ,this is the best interms of authentication using react and firebase...this video helped me a lot
Thank you. Clear explanation with new version of React router 5.0 and react 16.8(withHooks)
Paul Miller thanks
Super easy to follow. Implemented it in my own project. Thanks dude
This is exactly what I needed for my project! Thank you!
Finally a good and functional tutorial! Thanks, bro
Great tutorial, liked (fat like) and subscribed, keep it up bro, watching you from Uzbekistan
i saw many tutorials but this was the best
This is very useful. Thanks for the video!
Excellent tutorial! If you ever decide to do a remake, I'll love to see how to manage idToken and timeout in the authentication process.
Awesome tutorial. It undid a lot of the damage a previous tutorial did to my knowledge on this subject.
wow, glad to hear
thanks dude the solution was pretty simple it is that I was stuck maybe because of the quarentine
On login page i found this error :/
"Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."
I have never learn so much from a video, and AWESOMEEE minecraft stickers 🚀💯
damn, this helped me so much bro, better than the 1hr long ones lmaoooo
Simple and easy explanations among all the videos. Thanks a lot ♥
Simply explanation that explain perfectly Firebase. This service simplify the user manage
What is the best way to go about private pages for users with different access points? I am trying to create an admin only portal for my site, and the setup in this tutorial simply lets anyone access if they are logged in. I am struggling to get currentUser from context, because it always appears null. Is the better way to do this through setting up the admin access values in Auth (through context) instead of in my login file?
Love it! - Also, don't forget to `yarn build` after you update the `.env` file.
Thanks man, your reply helped me
I have installed firebase, created a .env and a base file just like you did here. However, it will not recognize 'auth()' as a property of type 'FirebaseApp' (I'm using TypeScript). Can't seem to solve this.
Great tutorial. Thanks.
Thanks for the video. What is happening in your useEffect hook? At 3:30, onAuthStateChanged takes a cb as an argument, and you're passing a reference to setState. Why does this work without calling setState and passing an argument to it?
You're a god, how are you not more popular
Straight to the point!! Thanks man
Amazing tutorial. Thank you so much!
Very nice tutorial. But i can't seem to grasp why you use the Callback Hook... In what instance, would the handle login function be called without you wanting it to be? It seems to me it will only be called when the login form is submitted which is what we want. So I am not sure why we add this with the history dependency, it seems unecessary. Could someone explain what I am missing here
?
That was really helpfull man! Thanks a lot for sharing this amazing content.
Thank you so much sir. Your video helped me a lot!
Amazing Tutorial!! Thanks for the vid
Thank you bro, amazing tuto !
Amazing Video....Please don't stop making videos because I have pressed the bell button too😄
Wow, thank for support!
The dot env is only for development and testing I presume? As the key would be exposed as part of the javascript bundle I’d imagine. Would you recommend just generating a new key once things get to production, or is there some other method you’d recommend? I have never used firebase before
Very nice video, thanks for the tutorial!
Very clear, great tutorial - thank you - please keep making more :)
Thanks Mark
Why we using withRouter if our Login and SignUp pages are already in and have access to history?
This is just what i needed. Thanks.
Thank you so much, Maksim.
thank you for this great explanation!
great tutorial keep moving :)
Excellent tutorial.
Good work!
Thanks Nil
So capaciously and understandably! Thanks
Яков Гущин спасибо)
why history push and also redirect the history.push is not working in the login component so it is getting rendered again but but the other check it will redirect it with the component why?
Спасибо огромное!👍
С большой радостью открыл для себя твой канал!🔥
Продолжай в том же духе!🚀
I do not understand why you're using `useCallback` here and what the `withRouter()` is for... I tried the same setup with `useHistory()` to get access to the history object and just replace `useCallback` with an async function. And it acts exactly the same. Could you please explain why you choose to use `useCallback` and `withRouter`? Thanks!
I've installed firebase version 7.19.1. When I use auth feature, there are lot of token requests sent. Please tell me how to fix this.
Theon Greyjoy is a great teacher.
I have an error Uncaught TypeError: (0 , _firebase__WEBPACK_IMPORTED_MODULE_1__.useAuth) is not a function
Extremely useful tutorial, thank you! How could I access the currentUser uid in the child components? Is there a way to pass currentUser into the PrivateRoute props? Or maybe a better way to get currentUser.uid?
Why you use useCallback in onSubmit event? I don't see any React.memo exports in your code
export 'Redirect' (imported as 'Redirect') was not found in 'react-router' (possible exports: MemoryRouter, Navigate, Outlet, Route, Router,
I keep getting this error "TypeError: _base_js__WEBPACK_IMPORTED_MODULE_1__.default.auth is not a function"
1, I found that my firebase config obj looks different from his code, but It's auto generated by firebase so I'm assuming that I have nothing to do with it...
2, My code is 120% correct with no typo as I cloned from his repo and copied the entire src file
Does anyone know how to fix this?
Hi, my /login and /signup does not show anything. It's just white. When I try to re enter the path, it shows the h1 and inputs briefly then become white screen again. Pls heeeelp thanks
Great tutorial. However I wonder if there is an easy way to redirect user to his dashboard ('/') when he's logged in without showing login screen for split second?
I implemented it and when logged user enters localhost:3000/login in address bar it shows him login page for like 0.5s and then redirects to '/'. How can I bypass showing that login page?
how do I store the authentication in local storage so the login status persists after logout?
perfect and using hooks , congrats
How can I connect auth with firestore? In the sense, how can I make or access a document inside a collection called users, and then access the user data?
Спасибо, Максим, очень интересно объясняешь. И материал урока подготовил хорошо. 👍
Hahahaha I subscribed because of the loading... moment :D
Thanks man! Saved the day
now how do you add the others like Google? also how do you make it where each user has where they left off?
Awesome tutorial, thank you ^^
Thank you!
The best tutorial!
What if you do have a back end api and want to authenticate requests to it? Would Firebase no longer be a viable solution?
where did you get the code of .env file from?
I can't seem to solve this error:
Error: Invariant failed: You should not use outside a
The withRouterLogin IS called inside a I tried with your code from Github and got the same result.
Thank you for your help!
really great lecture... i love it...thank u sir
I wish I knew about your channel when I started to learn JS, that was about the time you made this video! But at that time, I didn't know. If Had, my knowledge would be better now.
What resources did you use to learn JS as a beginner?
@@satansdeer1
FreeCodeCamp
CodeAcademy
PluralSight
Those were my favourite because you get to write code and run it right on their platforms. I also watched a couple of courses, read several articles and did a lot of katas on codewars. Im still learning but with emphasis on react and related libraries.
Error: There is no user record corresponding to this identifier. The user may have been deleted. I can't figure out this error please help
I have checked many times my "Auth.js" and "PrivateRoute.js" all the things , are same as video, but still getting
this error : "Cannot destructure property 'currentUser' of 'Object(...)(...)' as it is undefined."
I have already applied the previous mentioned changes in Auth.js of adding "Pending state", but still the error won't go away.
Had the same problem, check your AuthProvider did u set that up properly
Doesn`t work PrivateRoute 2023 in must be only component
Thanks man... Actually I'm stuck last two days.
How to set env variables and hide firebase key in react I'm trying all the stackoverflow & documentations steps but it's not finally your video recommended by the TH-cam randomly and just for the learning i click and saw whole video after video i changed into project and wolla its perfectly working 🙂✨
Thank you.
Interesting tutorial. Thanks, buddy. But I am stuck with firestore authorization. Do a tutorial on how to load the sidebar menu from the firestore based on user role. This is very important
Maksim, this is a great tutorial but I am having an issue all of a sudden. i"m getting "TypeError: Cannot read property 'currentUser' of null" from PrivateRoute.jsx:6. I'm banging my head against the wall trying to figure it out. Any suggestions or insights?
Maybe the context is missing, did you wrap your whole app into AuthProvider?
Thanks a lot for tut
that login route flashing on every public route is not good. I already broke my brain to figure out how to do it more elegant. Like showing loading spinner but the problem is that users can stuck on that spinner component forever if they are not been logged in.
where can i find the .env file
amazing :)
1:36 Hahaha I laughed a lot for you waiting for no reason with a serious facial expression
What about authentication with Google, Apple, Github?
thanks bro
Hi there, wouldn't it be a security risk storing the firebase key in your code?
If someone was able to overcome this limitation please let me know how! 😄
Can you PLEASE do a react, node, passport local with a mysql or just in memory array?
If I wanted to set another value when someone logs in, for example, currentOrganizationId, where would I set that and can I use the same Context. I've written this code, but I don't know at what point to set the currentOrganizationId. gist.github.com/alanjudson/dfc1321c6a99ae637f0914781ac1c4b5
Hi Maksim, how do I dynamically render the user data from firebase clientside? So if a user logs in, how do I render that users profile with his name etc
Hi @fattah do you can use the UUID from the user and create a document in firestore relating the UUID with this document.
According to the update log of the firebase SDK (version 8.0.0), the way to import firebase SDK should be` import firebase from 'firebase/app' `instead of ` import * as firebase from 'firebase/app'`
wow very thanks
Hi great video! I'm making an app with users and admins do you think you could make a video explaining how to make private routes for the admin and user?
how to make authorization with react and firebase , bro ?
Hi Maksim! Is there a way to do role specific private routes using custom claims?
sure, youll just need a more complicated context provider that will check against the role instead of the simple boolean check
I loved your tutorial... anyway did anyone told you before that you look like Alfie Allen (Theon Grejoy) from Game of Thrones?? I paused your video and watched your face for like 10 minutes... I was thinking why this face is so familiar.. :-D
When "logged in" the route seems to jump to /login for 1 sec. It's seems to be becouse of PrivateRoute component where it interpets currentUser as null first, and load again to find the current user. The results is that /login flashes for 1 sec, then route to Home-component. Why is that?
It happens to me also but in other case. If user is logged in, every time i press refresh button route jumps to login page for 1 sec.
That is because the render happens before the response is received from Firebase. Sadly this tutorial doesn't handle these cases.
I have this same issue, could someone help me out? how can I wait to trigger the render after we check the status of current user?
Same problem here as well. @Maksim Ivanov, could you please help us here? Do you have any suggestions on how to solve this issue?