React, Typescript and Firebase 9 Authentication [2022]

In this tutorial, we learn how to upgrade / create a react app that uses firebase version 9, the modular version that emphasizes the use of hooks and other modular features.

Video Info
Music by Tesko / prod. THXMOS:

Support

Socials

About The Channel
The knowledge that I share here is mostly from my personal experiences. I wouldn't say I'm a 20 year professional, rather I am just a DevOps / Software Engineer with a lot of experience who enjoys teaching what I know in my spare time. I believe that sharing some of my basic knowledge on this platform can help others get started. There are many ways to program something and the videos you see here are my take on the NodeJS / Typescript / and sometimes Unity world. If this channel helps you learn, or helps you think differently then my job is done 😊.

#react #firebase#typescript

[wtf-isyt]

Thank you thank you thank you thank you thank you thank you!!!!
I have been writing ReactJS for some years now in my free-time.
I have tried implementing firebase 1.000.000 times - never got it to work. Used 30 minutes here - and now it works!
Liked and subed! Looking forward for more videos! And again, thank you very much!

[TheNerdyCanuck]

For those of you getting the 'You should call navigate() in a React.useEffect(), not when your component is first rendered' warning, I subscribed to our authcheck improperly. Please check out the github for the fix, it's a small change.

Essentially, instead of declaring the authcheck OUTSIDE of the useEffect, call it INSIDE by replacing the AuthCheck(); function call with the definition instead, like so:

useEffect(() => {
const AuthCheck = onAuthStateChanged(auth, (user) => {
if (user) {
setLoading(false);
} else {
console.log('unauthorized');
navigate('/login');
}
});

return () => AuthCheck();
}, [auth]);

[gourabpaul]

Dude, you just saved me hours of research & debugging. huge thanks :)

[givingtree]

Thank you a lot! This code works very well even with a new version of react (made some small changes that you can find solution to in the comment section)!

[tomasburian]

A good one, man. Saved me a lot of looking. Thanks!

[LeetCodeSimplified]

Huge time saver this video! You earned a new sub!

[aymen]

Hey man, i've been following this tutorial and it's great! i'm learning how to use firebase again after a break of a year or two.
One thing i'm stumped on is the " const { children } = props; " in the AuthRoute file.
It throws the error " Property 'children' does not exist on type 'IAuthRouteProps'." This is from your copied code, as i've had to try that in case i missed something minor in my own code, but that was not the case.
Is there anything i've forgotten to install with npm or something like that?

[wizardkelly]

Thanks a lot man, you're a great teacher !

[leonardo.cardoso]

shouldn't the api key be in a .env file?

[yhoakim]

in Login.tsx add

if (user) {

navigate('/')

}

return (



<div>
<p>Loadin Page</p>
...

if you are logged, redirect automatic to main page '/' from '/login'

[DanJulius]

I think the initial state for loading be set to true
without this I get a brief display of the homepage before having it redirect to the login page

[sleon]

Thanks for this video! Is there a tutorial with facebook?

[toastrecon]

In case anyone wants the snippet for the "fc" functional component: (You can change the name and the prefix to whatever you want)

"TS React Functional": {
"prefix": "fc",
"body": [
"import React from 'react';",
"",
"export interface I${TM_FILENAME_BASE}Props {};",
"",
"const ${TM_FILENAME_BASE}: = (props) => {",
" return <div></div>;",
"};",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "TS React Functional"
}

[markosostaric]

when making the children object in AuthRoute.tsx ( const { children } = props;) in my case it underlines the "children" with an error= Property 'children' does not exist on type '{}'

why do I get this error?

[KngdomWarrir]

Hi Mate, I found following your video that the useNavigate hook constant wasn't working for me being nested in a conditional statement. I ended up using "window.location.href = "/login";" for the redirect on the authRoute file as the redirect wasn't working and complaining it did not know what the "navigate" constant was. When i looked into the hook itself, according to the React documentation it was not something i could use within a conditional if/else statement. Can you confirm this is correct?

[closeluca]

dude you area realy gnarly thanks!! but i have a question about the auth route, why use a const rether context? i mean why not "export function AuthRoute ({}:AuthRouteProps) {<>}

[Viezieg]

this is great ! thanks ! what if we wanted to store the user info to firestore upon users signup ?

[johnpaulpineda]

How about role-based authentication with react?

[cherylcollier]

Thanks for this but I'm getting the warning 'You should call navigate() in a React.useEffect(), not when your component is first rendered'

[osemudiamhen]

great video! do you know how I can automatically create a firestore user docuement when a user is created after the google login?