Firebase + React HOOKS Authentication Tutorial 🔥

Let us see how to do a simple firebase + react hooks login and register app using useState and useEffect React hooks and integrate it with cloud firestore and firebase auth module.

[xshadx]

Hi, i have a question.
The firebaseIsInitialized method use the OnAuthStateChanged observer that return the unsubscribe method, but i see that you don't use it to clean the memory in the returned function of useEffect. In this way it run useEffect on every update of the App component and i think it would generate memory leaks, is that correct? shouldn't you run that only on componentDidMount adding the empty array as a second argument to useEffect?


thanks!

[eeeevaaannn]

the amount of errors you make in this video that you just don't address is kind of crazy

[trungtrinh]

I have an issue and not able to run app. Issue is from Dashboard:

Line 54:29: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Line 56:3: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

[gaos]

Thanks for the video! It really helps because I'm in the process of refactoring an app to use hooks with Firebase, I was actually handling every firebase request on each component, I will certainly use the helper class approach

[edberaga]

Now in version 6, Switch component doesn't exist anymore... can't do this project. I hope you can do the latest one

[panavsethi]

How can we use session storage and add persistence in authentication?

[mustafatosun]

Very helpful tutorial! You're a life saver thanks a lot...

[tkx]

im getting this error
Line 46: React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Line 48: React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks

[markusgattol]

in getCurrentUserQuote you actually get the whole document back, then you grab inside and retrive the value for the quote key i.e. I'd name it const doc = await ... rather than const quote = ...

[MRCDF]

In the moment Iv seen people with errors, iv seeked for his github installation. Iv downloaded and iv installed the npm packages. Then iv put my firebase credentials. Then register a user and login. Everything looks to work fine. Checkout for errors in your code.

[mikeleung]

Is it safe to push to github your firebase code?

[AniketChaudhary_]

I am getting this error:- regenrator Runtime is not defined

[isagive]

all the skips just messes up the concentration...

[perc-ai]

how to organize class FIrebase methods ? If using over 30 methods how should I organize them or should i just keep them in one file

[henokmillion]

Thanks....
just as a comment: you ought to clear the terminal often; it's difficult to look at what you're writing with the media displaying timeline on top of it.

[yooda]

I got this problem. React Hook "useContext" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

[adaltopicotti]

How can I have a terminal theme like yours?

[deannno]

I was wondering what is the vscode extention on the left side with the antidote logo?

[rashdanrazak]

Hi Sir i want to ask why you use promise resolve instead of await async in onAuthStateChange ?

[kaushickannan]

I have an issue in running the app
" 'props' is not defined no-undef "