React, Typescript and Firebase 9 Authentication [2022]

Рет қаралды 16,447

2 жыл бұрын

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.
Firebase 8 Tutorial: • React, Firebase Authen...
VS Code Snippet Tutorial: • Visual Studio Code Sni...
Github: github.com/joeythelantern/Rea...
Video Info
Music by Tesko / prod. THXMOS:
/ @prod.thxmos6970
Support
Like this video? You can show your support by buying me a coffee ☕❤️: www.buymeacoffee.com/nerdycanuck
Socials
Github: github.com/joeythelantern
Twitter: / thenerdycanuck
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

Пікірлер: 70

@gourabpaul3560 Жыл бұрын

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

@tomasburian6550 2 жыл бұрын

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

@wtf-is1yt 2 жыл бұрын

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 2 жыл бұрын

No problem!!!!

@LeetCodeSimplified Жыл бұрын

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

@TheNerdyCanuck Жыл бұрын

Thanks for the sub!

@mcgregory213 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

No problem, let me know some other topics you are interested in.

@givingtree9619 8 ай бұрын

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

@TheNerdyCanuck 2 жыл бұрын

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]);

@cherylcollier466 2 жыл бұрын

Thanks for that, I tried something very similar but forgot to return the authcheck function, also my typescript linter insists that I include navigate as one of the dependencies to useEffect useEffect(() => { const AuthCheck = onAuthStateChanged(auth, (user) => { if (user) { setLoading(false); } else { console.log('unauthorized'); navigate('/login'); } }); return () => AuthCheck(); }, [auth, navigate]);

@cherylcollier466 2 жыл бұрын

Also I cannot find your github repo

@TheNerdyCanuck 2 жыл бұрын

@@cherylcollier466 For the using navigate as a dependency in useeffect, you can 100% ignore that, there is a line you can add right above the dependency array to erase this warning: // eslint-disable-next-line I use this all the time.

@TheNerdyCanuck 2 жыл бұрын

Github is in the description :)

@cherylcollier466 2 жыл бұрын

@@TheNerdyCanuck Thanks, I know how to disable linters but I try not to do it as most of the time the linter is helpful, the next step is testing this process ;)

@leonardo.cardoso Жыл бұрын

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

@aymen5172 2 жыл бұрын

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?

@TheNerdyCanuck 2 жыл бұрын

Hmm, that's strange ... the function component is typed properly with React.Functioncomponent right?

@aymen5172 2 жыл бұрын

@@TheNerdyCanuck Yes sir! Here's what i have; export interface IAuthRouteProps {} const AuthRoute: React.FunctionComponent = (props) => { const { children } = props; the rest is pretty much the same as on your repo.

@TheNerdyCanuck 2 жыл бұрын

What version of react are you using? Did it upgrade to 18 by any chance

@aymen5172 2 жыл бұрын

@@TheNerdyCanuck Yes! Think I should downgrade to 17? or, to your knowledge, is there a workaround for 18 for this error?

@TheNerdyCanuck 2 жыл бұрын

@@aymen5172 so I haven't tested with react 18 yet as I've come down with Rona, so it'll be a week or two before I could try. I would say try 17 just to see if it's some sort of comparability issue but I don't think this is the case. Good to eliminate the possibility tho

@ZaneTait Жыл бұрын

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?

@TheNerdyCanuck Жыл бұрын

What was the error?

@DanJulius 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

Yes, it should be set to true

@luzaw4957 Жыл бұрын

Dude, you saved my life !! A flash of home screen is pretty annoying.

@Viezieg Жыл бұрын

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

@TheNerdyCanuck Жыл бұрын

For custom attributes, you have to use your own implementation on firestore, but I think the documentation has examples

@Viezieg Жыл бұрын

@@TheNerdyCanuck thx for response !

@sleon4 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

Not yet! I can make one if you'd like.

@sleon4 2 жыл бұрын

@@TheNerdyCanuck It would be exceptional if you do, a new subscriber you have brother.

@TheNerdyCanuck 2 жыл бұрын

I'll look into it!

@sleon4 2 жыл бұрын

@@TheNerdyCanuck New subscriber and activated bell

@toastrecon 2 жыл бұрын

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}: React.FunctionComponent = (props) => {", " return ;", "};", "", "export default ${TM_FILENAME_BASE};" ], "description": "TS React Functional" }

@TheNerdyCanuck 2 жыл бұрын

Snippets are the greatest invention ever.

@osemudiamhen 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

I don't use firestore from the client side personally, I like to do it from the backend

@yhoakim4035 2 жыл бұрын

in Login.tsx add if (user) { navigate('/') } return ( Loadin Page ... if you are logged, redirect automatic to main page '/' from '/login'

@johnpaulpineda2476 2 жыл бұрын

How about role-based authentication with react?

@TheNerdyCanuck 2 жыл бұрын

That shouldn't be too hard

@closeluca 2 жыл бұрын

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) {}

@TheNerdyCanuck 2 жыл бұрын

That's just personal preference that's all

@closeluca 2 жыл бұрын

@@TheNerdyCanuck thank's xDD

@markosostaric7058 Жыл бұрын

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?

@TheNerdyCanuck Жыл бұрын

React 18 has removed the children declaration from function component. Extend you interface to include 'PropsWithChildren'

@markosostaric7058 Жыл бұрын

@@TheNerdyCanuck Thank you very much!

@Capi91Que Жыл бұрын

@@TheNerdyCanuck Hello kind sir, im new to React and TS, can you pretty please show me how to extend the interface to include 'PropsWithChildren' for the "AuthRoute.tsx" page

@yhoakim Жыл бұрын

@@Capi91Que export interface IAuthRouteProps { children : React.ReactNode; };

@cherylcollier466 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

I researched this, and honestly you can safely ignore this. I've never had a client issue from this before. I've researched it and it seems to be an outlying issue. I'll look into it once more.

@TheNerdyCanuck 2 жыл бұрын

On further exploration, the more elegant way to prevent this is by declaring authcheck directly in the useEffect. I have updated it in the github link below.

@krishnanarasimha1243 2 жыл бұрын

COuld you please explain login with firebase reactjs using the login page?

@TheNerdyCanuck 2 жыл бұрын

Sure, which part?

@krishnanarasimha1243 2 жыл бұрын

@@TheNerdyCanuck -> authentication part, also explain other parts as well please

@krishnanarasimha1243 2 жыл бұрын

will you make a video, we are waiting for you? I am facing some problems in my project as well regarding firbase. please explain some problems like why it may not fetching the credentials

@TheNerdyCanuck 2 жыл бұрын

@@krishnanarasimha1243 If you can tell me what timestamp you are having trouble with I can try to answer :)

@virtualalphastudios6149 2 жыл бұрын

@@TheNerdyCanuck Just so you know you explained this better than most tutorials on youtube, it seems like this person doesnt know english that well so I wouldnt worry about it, he says "we are waiting for you?" who is waiting exactly? lmao but something no youtubers do is, continue on this project and build a profile page with Name Age and other things and make a Friends List would be cool to see as a tutorial.