Firebase React Authentication Tutorial For Beginners - Private Route With Hooks

[@stevenjchang]

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!

[@satansdeer1]

Thanks for the comment, i've pinned it so others can also see it. Later ill update the code in the attached repo.

[@nazliton5306]

Can you expand further on how to fix this bug ?

[@alexanderdeimos1687]

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

[@nazliton5306]

@@johnparsons4434 Thanks for that, fixed a bug I was working around for weeks :)

[@AlanJudson]

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?

[@StevenBoutcher]

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

[@chrisc.4144]

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

[@eaglebirdiepar]

Theon you’re a good man

[@CognitiveSurge]

lmao

[@joshuaalphonse521]

LOL

[@jesusmendoza7774]

LMAO

[@Miodrag0204]

xD

[@mf2810]

oh wow, best react video comment ever

[@geovanejunior3154]

Theon Greyjoy is a great teacher.

[@paullukic1135]

Most useful tutorial I have found on the internet about firebase auth, thanks a lot for sharing.

[@paulm9400]

Thank you. Clear explanation with new version of React router 5.0 and react 16.8(withHooks)

[@satansdeer1]

Paul Miller thanks

[@ChrisGWGreen]

Thanks Maksim, went down the react-firebase-auth-provider route but it felt clunky. Your solution feels a lot more lightweight. Thanks so much.

[@irzoltan]

Love it! - Also, don't forget to `yarn build` after you update the `.env` file.

[@rayywaii_]

Thanks man, your reply helped me

[@vittoriomorellini1939]

Simply explanation that explain perfectly Firebase. This service simplify the user manage

[@kavinduvindikasomadasa352]

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

[@chinmayphanasgaonkar]

i saw many tutorials but this was the best

[@kallilfreire972]

Finally a good and functional tutorial! Thanks, bro

[@kwadwoagyapon-ntra2176]

Awesome tutorial. It undid a lot of the damage a previous tutorial did to my knowledge on this subject.

[@satansdeer1]

wow, glad to hear

[@reydez84]

damn, this helped me so much bro, better than the 1hr long ones lmaoooo

[@anvarsaidov8964]

Great tutorial, liked (fat like) and subscribed, keep it up bro, watching you from Uzbekistan

[@wrutzreaction7199]

amazing tutorial ,this is the best interms of authentication using react and firebase...this video helped me a lot

[@xurify]

You're a god, how are you not more popular

[@NateFreight]

Super easy to follow. Implemented it in my own project. Thanks dude

[@emday4prez]

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'`

[@adrian_franczak]

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

[@igorkirey1642]

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!

[@modeezy2341]

This is exactly what I needed for my project! Thank you!

[@hypergraphjs9739]

This is very useful. Thanks for the video!

[@AlexCastillo-dy6db]

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?

[@christinaharris9528]

Just found out after a barrage of errors that react-router and react-router-dom have updated. Instead of Redirect it's now Navigate. Also had to make a custom hook for withRouter to work and also had to wrap anything that uses Router with Routes. Other than that this was a quick and easy tutorial to follow. I should have checked the date lol.

[@edgarsboronovskis738]

Thank you for the heads up! I thought I was losing my mind.

[@TheSanchezxd]

thanks dude the solution was pretty simple it is that I was stuck maybe because of the quarentine

[@TotallyNotZoid]

Thank you so much man, quick and straight to the point. Worked like a charm man!

[@baileyritchie5711]

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?

[@PriyanshuKumar-wu4wk]

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.

[@Zenyrus]

Had the same problem, check your AuthProvider did u set that up properly

[@thedeveloper4207]

Amazing Video....Please don't stop making videos because I have pressed the bell button too😄

[@satansdeer1]

Wow, thank for support!

[@dmitruz1900]

export 'Redirect' (imported as 'Redirect') was not found in 'react-router' (possible exports: MemoryRouter, Navigate, Outlet, Route, Router,

[@RalphTonTuteur]

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 ?

[@paradoxalJohn]

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.

[@NairiAreg]

what is .env? I don't have one do I have to create it myself?

[@stevenjchang]

yes, create it yourself, but also add it to your .gitignore file in your project root folder. env means environmental variables. It should be hidden and not pushed to github, as those are your private keys.

[@NairiAreg]

@@stevenjchang thanks a lot

[@Elator11777]

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.

[@satansdeer1]

What resources did you use to learn JS as a beginner?

[@Elator11777]

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

[@antdx316]

now how do you add the others like Google? also how do you make it where each user has where they left off?

[@freesoul2377]

Line 7:25: React Hook "useCallback" is called in function "login" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 22:28: React Hook "useContext" is called in function "login" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks i am facing this can you help

[@DevilDude]

The component needs to have a name begining with a capital letter. It should be Login not login.

[@MariusMathisenVLOG]

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?

[@radonjamarinkovic]

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.

[@hristoenev6733]

That is because the render happens before the response is received from Firebase. Sadly this tutorial doesn't handle these cases.

[@luismiguelascencio4065]

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?

[@zcto414]

Same problem here as well. @Maksim Ivanov, could you please help us here? Do you have any suggestions on how to solve this issue?

[@Melvin420x12]

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!

[@gwapster13]

Great tutorial. Thanks.

Thanks man! Saved the day

[@dmitruz1900]

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

[@useyourname24]

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.

At 1:45 you said, "Make sure to install firebase, react-router, and react-router-dom". Here are the instructions: In the root folder (here it is "react-firebase-auth") run the command below: npm install --save firebase npm install --save react-router npm install --save react-router-dom

[@CroMatej]

Thank you

[@abhishekpatel7624]

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 KZbin randomly and just for the learning i click and saw whole video after video i changed into project and wolla its perfectly working 🙂✨

[@cloudeater9571]

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

[@energyimpulsedel7124]

Doesn`t work PrivateRoute 2023 in must be only component

[@elmehdiettalab4756]

Straight to the point!! Thanks man

[@mgominasian9206]

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?

[@Malcolm777-i]

When you are on the home screen and reload the page login form will show again and redirect to the homepage again.

[@Shubhaw]

Yes, I am facing the same issue and it doesn't look good when there are multiple components (with different different route paths) and if you refresh, it actually reloads the login page and then redirects to the homepage! If anybody finds out how to redirect to the same path (the page which was open earlier), please share the code here.

[@Malcolm777-i]

@@Shubhaw I think this is the suspect !!currentUser ? ( ) : ( ) } located at PrivateRoute.js

[@Malcolm777-i]

@@Shubhaw This will help you github.com/georgeiliadis91/react-firebase-auth/blob/master/src/Auth.js credit the owner :)

[@ayaanmomin8333]

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?

[@alehsiarheyeu8255]

Спасибо огромное!👍 С большой радостью открыл для себя твой канал!🔥 Продолжай в том же духе!🚀

[@ilug8571]

I have never learn so much from a video, and AWESOMEEE minecraft stickers 🚀💯

[@chris78945]

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.

[@andreikudriavtsev7402]

Why you use useCallback in onSubmit event? I don't see any React.memo exports in your code

[@jeremyi]

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!

[@MohiyuddinShaikh]

Great video but a question, can we not use history like this : import { useHistory } from 'react-router-dom'; and then in the function say : function Home(){ let history=useHistory(); if(signUpSuccessful){ history.push("/home") } }

[@satansdeer1]

Mohiyuddin Shaikh you mean just use the browser history object instead of the hook?

[@MohiyuddinShaikh]

@@satansdeer1 Yes.

[@satansdeer1]

Mohiyuddin Shaikh it will work, but there might be some slight differences in how history api works in different browsers and by using the react-router wrapper of it. Here's a documentation on react router history object: github.com/ReactTraining/history#properties

[@MohiyuddinShaikh]

@@satansdeer1 Great, Thanks Man !

[@hussainsalih3520]

great tutorial keep moving :)

[@shamilmammadov8246]

Спасибо за столь наглядный пример. Очень хотелось бы увидеть реализацию данного подхода с Redux.

[@satansdeer1]

Shamil Mammadov при авторизации через firebase redux не особо нужен. Возможно запишу видос, как работать с firestore + redux

[@marcosraul4132]

Awesome tutorial, one thing though, u definitely should not use "useCallback" for a simple "handleClick", that is used for parent components that have many many childs and a re-render is really costly. Adding that without measuring the impact of not having it does more harm than good.

[@bensonluis9846]

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

[@taqikhan5418]

where did you get the code of .env file from?

[@plastikkman]

Hi there, wouldn't it be a security risk storing the firebase key in your code?

[@plastikkman]

If someone was able to overcome this limitation please let me know how! 😄

[@mdyamin007]

Simple and easy explanations among all the videos. Thanks a lot ♥

[@deepL0]

1:36 Hahaha I laughed a lot for you waiting for no reason with a serious facial expression

[@mudiartatauda8718]

It's useful, but why my app still open login before secure route.

[@satansdeer1]

Mudiarta Tauda i will address this issue in one of the next vids. For now you can introduce loading state before you show the screens of your app

[@miluskagonzalez4016]

@@satansdeer1 hey, did you get to upload a vid addressing this issue?

[@satansdeer1]

Miluska González not yet, to be clear im talking about storing logged in state between page reloads. So that when you reload page and go to secure route it doesnt blink with login page. Is that the thing, or did I misunderstand what we are talking about here?

[@miluskagonzalez4016]

@@satansdeer1 yes, that is exactly it. Since the state starts as null and the auth is async, it takes a while to change

[@EdWeng]

@@satansdeer1 Does Firebase Auth not do this automatically? What's the best way to resolve? Is it to use LocalStorage?

[@ЯковГущин-г2ю]

So capaciously and understandably! Thanks

[@satansdeer1]

Яков Гущин спасибо)

[@davidsnyder518]

how do I store the authentication in local storage so the login status persists after logout?

[@alexanderpunkovsky437]

The best tutorial!

[@mariomarasovic6342]

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

[@adammo6661]

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?

[@jokovBG]

Hahahaha I subscribed because of the loading... moment :D

[@wjrobinson11]

What if you do have a back end api and want to authenticate requests to it? Would Firebase no longer be a viable solution?

[@LegendarySkyHero]

What about authentication with Google, Apple, Github?

[@Dev_Everything]

Can you PLEASE do a react, node, passport local with a mysql or just in memory array?

[@ВадимРошко]

Why we using withRouter if our Login and SignUp pages are already in and have access to history?

[@apayrus]

Спасибо, Максим, очень интересно объясняешь. И материал урока подготовил хорошо. 👍

[@asharashfaque]

This is just what i needed. Thanks.

[@mf2810]

Very clear, great tutorial - thank you - please keep making more :)

[@satansdeer1]

Thanks Mark

[@nilmendes7710]

Excellent tutorial. Good work!

[@satansdeer1]

Thanks Nil

[@MarsTheProgrammer]

It's not working at all. Firebase has a new way of doing it too, called Load Firebase SDKs from reserved URLs. Both this old method and the new one is giving me errors... I hate that firebase completely changes things every few months.

[@satansdeer1]

Mars Castillon could you send an example repo, id like to check out what is broken there

[@yeinnarayana2644]

@@satansdeer1 hey you such a pretty nice guy, i hope you will be nice like this even if you touch more K number of subscribers. +1 from me :D

[@AlanJudson]

Thank you so much, Maksim.

[@TheWizardOfTech]

where can i find the .env file

[@MaryoOo0]

Do you have an example when the authentication is done via facebook or github? The flow is different on pop-up login flow

[@satansdeer1]

MaryoOo0 no but i dont think there will be any difference

[@simonkalu]

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

[@shehzadmalik7926]

really great lecture... i love it...thank u sir

[@danielgreenfield8970]

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?

[@r-i-ch]

Thank you for Excellent tutorial. I am wondering if you would be able to do a TypeScript version of this? I have tried but I get many ts errors and am unable to figure out how to make it work.

[@satansdeer1]

Great suggestion!

[@danieldbird]

How do i check for currentUser on other pages to do conditionals for displaying menu items?

[@ianaustria8868]

i think you can use the useContext hook to access the currentUser

[@danieldbird]

@@ianaustria8868 Thanks a lot!

[@yendrembamrabinchandra476]

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.

[@tattah96]

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

[@gubmx20]

Hi @fattah do you can use the UUID from the user and create a document in firestore relating the UUID with this document.

[@RogerioOrioli]

perfect and using hooks , congrats

[@oojiitech32]

Hi Maksim! Is there a way to do role specific private routes using custom claims?

[@satansdeer1]

sure, youll just need a more complicated context provider that will check against the role instead of the simple boolean check

[@atmospheric_b]

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.

[@marcincz4859]

It works fine on react-create-app, but when I try to do it on webpack project I can't auth (form fields are being appended to the URL and I can't do POST request to firebase). Could you tell me how to configure webpack to work with firebase?

[@satansdeer1]

Marcin Cz shouldnt be that different, could you send a repo?

[@marcincz4859]

@@satansdeer1 github.com/MarcinCzanasz/test

[@satansdeer1]

@@marcincz4859 change your .babelrc to this `{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "10" } } ], "@babel/preset-react" ] } `

[@satansdeer1]

there was a problem with async functions support

[@sndhigh]

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?

[@satansdeer1]

Maybe the context is missing, did you wrap your whole app into AuthProvider?

[@hincha013]

Thank you bro, amazing tuto !

[@sidhant1608]

Hello, I am trying to handle multiple protected routes but the Login component keeps redirecting me to the root component. Please help on how to do this

[@satansdeer1]

Sidhant Jain you need to store the redirect route then. For example when you are first redirected to private route you could append redirect-to query param to url

[@sidhant1608]

@@satansdeer1 Hey, I tried doing that. But since the Login component is a stateless function I am having trouble realising on how to get it in the code. Since we are already using history as props in the login component, can I still get another value as a prop ? Could you please help me out

[@satansdeer1]

Sidhant Jain take 'location.search' and get the query params from it you can use URLSearchParams to parse it

[@MateusDvk]

Amazing Tutorial!! Thanks for the vid

[@metalejo]

thank you for this great explanation!