Firebase Authentication v9 in ReactJS (google/email sign-in, custom reset password) with ChakraUI

In this video series, we will be doing #Firebase #authentication in #Reactjs. We would be doing email/password + #Google #signin providers. We would also be implementing forgot password with a custom reset password page. All of this with a custom auth hook - useAuth.
We will be using the new firebase API i.e. v9, that uses tree shaking and uses a modular approach.

Timeline:
00:00 Introduction
00:20 Application demo
07:47 Cloning the started project
09:40 Starter project explanation
15:19 Create NEW firebase project
18:28 Initialize Firebase project in application
26:33 AuthContext
30:48 useAuth hook
34:28 Register user
46:51 Login user
53:30 Observe user (sign in/out)
57:55 Logout user
1:00:34 Google sign-in
1:04:32 Handling memory leak (useMounted)
1:10:28 Conditional Navbar
1:13:20 Protected Routes (with Redirect To or Back)
1:25:57 Forgot password
1:33:58 Custom Reset password page

--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
💵Support the channel:
--------------------------------------------------------------------------
--------------------------------------------------------------------------

======================
✔ Other useful Playlists
======================

#yoursTRULY #tutorial #howto #nodejs #android

[akramnarejo]

best firebase project I have come across so far with react

[Allrounder-cfth]

I don’t comment much am really happy to see this video. Am really happy to see this kind of real time scenario project.

[LFCROXforLIFE]

This is a fantastic video but I am facing one issue, at @1:20:37 my path/props is showing as undefined and I cannot use it to access the state or modify the pages. I am trying not to show the login page after user has logged in, but I cannot do it since the props return undefined

[ToshisanMotonaka]

This was mindblowingly simple yet detailed! Thank you 🙏

[preciousoluwanifemi]

just use this video to implement a feature at work!. Amazing video

[AlbertGalilea-pjuv]

This is very helpful. I'm working on custom page to firebase reset password. Thank you sir!

[MagHatashi]

This was great, thanks. But the issue is, you are only allowed one custom URL in Firebase. So, if you use a custom for Reset Password, that same page will be sent for users when they verify email. How to get around this?

[ogunacg]

I have a question, I can't use useToast inside onSubmit function becuase of this error :React Hook "useToast" cannot be called inside a callback.React Hooks must be called in a React function component or a custom React Hook function; do you have any elegant way to solve the error? thank you

[johnbosco]

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'then') error on 1:31:18

[khaleelas]

grate and clean looking for more react tutorial

[CodeWithViju]

please make latest complete react firebase course including auth, firestore and much more

[ColabGuy]

Thanks a lot!
I was looking for a tutorial about how to recover the user's password and couldn't find it

[Richard.halabi]

very thanks.... better than many payed tutorials

[varunKT]

Greatly explained man, thank you so much 😀

[rahulsriram]

Thank you! Can we also get a video to handle those redirects to and from in NextJS? Cz in NextJS we have directory based routing

[ghana]

very good tutorial, How can i make a change password page for the user that is logged in?

[DngerCrazy]

Hoping to get some help with this trying to use this technique in my own application. I keep getting the error of uncaught in promise typeError register(...).this is not a function. Any ideas on what is happening or why?

[AlbertGalilea-pjuv]

Hello sir i cant cleary see what u did in 21:30, can u tell me what u copy there?

[alexaungmyooo]

How to prevent google sign in open in new tab? And Public-facing name does not change even you change it in google provider. May I know how to fix this issue.

[Bharath_Murugan]

Awesome video man
Thanks for sharing this here
can you add a series for chakra ui