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

Рет қаралды 37,172

Күн бұрын

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
GitHub (repo): github.com/trulymittal/react-...
Get your digital ocean account using the link (m.do.co/c/3208f08b3324) and get 100$ to use.
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: kzfaq.info...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! www.kite.com/get-kite/?...
--------------------------------------------------------------------------
======================
✔ Other useful Playlists
======================
#RestAPI (#NodeJS and MongoDB): • REST API using NodeJS ...
#API Authentication using #JWT: • NodeJS API Authenticat...
#Firebase: • Firebase | Build a Not...
Docker: • Docker
MongoDB: • Learn MongoDB in 50 mi...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#yoursTRULY #tutorial #howto #nodejs #android

Пікірлер: 99

@ToshisanMotonaka 2 жыл бұрын

This was mindblowingly simple yet detailed! Thank you 🙏

@mafiacodes 2 жыл бұрын

Glad it was helpful! Subscribe Like share

@akramnarejo6221 2 жыл бұрын

best firebase project I have come across so far with react

@Allrounder-cf2th 2 жыл бұрын

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

@varunKT001 2 жыл бұрын

Greatly explained man, thank you so much 😀

@mafiacodes 2 жыл бұрын

Subscribe like share

@preciousoluwanifemi9144 2 жыл бұрын

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

@Richard.halabi 2 жыл бұрын

very good..... thanks.... better than many payed tutorials

@AlbertGalilea-pj2uv 2 жыл бұрын

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

@mafiacodes 2 жыл бұрын

Glad it helped!

@AlbertGalilea-pj2uv 2 жыл бұрын

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

@khaleelas4871 2 жыл бұрын

grate and clean looking for more react tutorial

@reactjswithsid6779 2 жыл бұрын

superb....keep uploading more videos

@utkarshsingh4878 8 ай бұрын

Best Video! Saved my day!

@sergiobeltrangalvis3009 Жыл бұрын

Amazing video! a lot of really usefull info

@mafiacodes Жыл бұрын

Subscribe like share 👍

@sourovpaul8047 2 жыл бұрын

Very Helpfully

@kaishmohammadkhan1270 2 жыл бұрын

Always on time..

@Bharath_Murugan 2 жыл бұрын

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

@m4mirza584 2 жыл бұрын

Great Job 👍

@sutikshanmishra2061 Жыл бұрын

WANT TO LEARN FIREBASE FROM YOU ... GREAT CONTENT EVER LOOKING FOR 🙂🙂

@mafiacodes Жыл бұрын

Sure will make one

@deonvisser2480 2 жыл бұрын

Thanks, the github helped me.

@shujathaliirfan2662 2 жыл бұрын

Very nice

@mafiacodes 2 жыл бұрын

subscribe like share

@hex9219 2 жыл бұрын

thanks it's awesome

@samsonbrody6308 2 жыл бұрын

great video my guy.. if you could do one with firebase and next js with chakra i woul be so happy hahah

@mafiacodes 2 жыл бұрын

Will try my best to do that as well.

@marcosboero6881 2 жыл бұрын

Great video man, thanks a lot. I'm in the middle of changing an app from mongodb/custom auth, to firebase/firestore. The issue I have with firebase auth is that I need to create a user collection for storing data besides the one provided by firebase (wich duplicates my api calls).

@mafiacodes 2 жыл бұрын

you can store some fields in the user object of firebase without making another api call, or you can use firebase functions to trigger when a user in created and then make the necessary adjustments to the user object.

@Asmrcodingbliss 2 жыл бұрын

very good

@mafiacodes 2 жыл бұрын

subscribe like share

@mohamedyoussef8835 2 жыл бұрын

Awesome video! ++++++++++++++++++ Thanks.

@AdrianzDev 2 жыл бұрын

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

@alitaa1154 2 жыл бұрын

this was a great video thank you very much !!!

@CodeWithViju Жыл бұрын

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

@sanitbandekar 2 жыл бұрын

Thanks

@sanitbandekar 2 жыл бұрын

android mein aapne firebase pe banaya series same aisa CRUD operation mein banao app help full gaa mere jaise beginners ko

@rahulsriram6295 2 жыл бұрын

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

@mafiacodes 2 жыл бұрын

U can handle that in the __app.js file where you get page props, make a handler there to check for authentication

@PauloFabianoLanger 2 жыл бұрын

Awesome video! Thanks. I'm trying to implement it using Next.JS but I am struggling a bit in the ProtectedRoute part. How could I protect a next.js page?

@mafiacodes 2 жыл бұрын

Two ways serverside or client side, I would say protect client side the same way explained here

@PauloFabianoLanger 2 жыл бұрын

@@mafiacodes I see but in next.js we don't use so I blocked about it :( I tried using a HOC in the page component but I can't use hooks (useAuth, in this case) in a hook so it doesn't work.

@waziee Жыл бұрын

great video! could you do a video about same thing but with router v6? im using your starter and wanted to update to latest version of React but im having a lot of bugs especially in navigation, please help me

@ghana4925 2 жыл бұрын

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

@ig_samuelsam Жыл бұрын

Need a full video for your vscode setup bro

@archisapien4179 2 жыл бұрын

Hey your tutorial is super good!! would you also make one on Sign in with link please....

@mafiacodes 2 жыл бұрын

I’ll try to make it

@LFCROXforLIFE 10 ай бұрын

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

@sanitbandekar 2 жыл бұрын

Sir CRUD operation aur FCM pe notification pe banao please

@saurabhu6458 Жыл бұрын

Your theme is awesome Please tell me the theme name

@atanunayak6637 2 жыл бұрын

Bhai more on firebase V9

@ogunacg3387 2 жыл бұрын

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

@lying6624 2 жыл бұрын

It is good tutorial, but once you refresh the page there is no auth user for a second. Can you make a video about it?

@aprimic 2 жыл бұрын

Can you do verify email please?

@nawazishali274 10 ай бұрын

can you made video on react js authentication with jwt including interceptors and role base protected routing please make video on it

@YouTube_changed_my_username 2 жыл бұрын

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?

@joaovitorferreira5110 2 жыл бұрын

Great tutorial! I'm trying to use the currentUser in the ProtectedRoute, but when the app refreshes, the currentUser becomes null initially and then currentUser's information loads back up. While the currentUser is null on refresh, the user is kicked from the profile route and redirected to the login page. I'm wondering if anyone has any suggestions on how to prevent this from happening.

@mafiacodes 2 жыл бұрын

I guess what you can do is that in the login page use the context to get currentuser, then current user as a dependency in useeffect monitor the status of current user if not null then redirect back to the profile page. Subscribe like share

@federicopintaluba3039 2 жыл бұрын

Same here, looks like useEffect of AuthProvider is called on any page refresh, not keeping the state.

@mr.artist486 Жыл бұрын

I am using Auth0 for loggin in to my app with 'LinkedIn'. What to do after that?

@adithiyag4616 2 жыл бұрын

@yoursTRULY how can i avoid flashing of login page when we go to protected page pls help

@aungmyooo9692 2 жыл бұрын

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.

@khalidmohamed6705 2 жыл бұрын

hi sire can I copy API_KEY from firebase and put it in init-firebase.js without using the .env file as am doing this for evaluation purposes only

@gurubhai4918 Жыл бұрын

Firebase custom claims for authorising Admin vs Editor vs End User to different level access in Android app please mittal bhai

@johnbosco8280 2 жыл бұрын

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

@vpermits 2 жыл бұрын

As passwords are the bane of our existence, curious why more people do not use the email link (password less) provided by firebase and ditch the insecure (same one used everywhere... password, abc123... on and on:) password authentication set ups. I'm looking for a working example somewhere and not finding much.

@mafiacodes 2 жыл бұрын

well u can watch this video kzfaq.info/get/bejne/bZh6jMuE1Ly9gJc.html , though its for password reset 😃, but the same logic can be applied to make password-less login links also, see the login try it out, and let me know, else I'll make one using the same...

@adithiyag4616 2 жыл бұрын

I cant understand why even after restarting complete app(in localhost) user stays logged in

@johnnyparsons2372 2 жыл бұрын

Can you possibly add the changes with react router v6

@mafiacodes 2 жыл бұрын

Yep I’ll do that

@DaveFredkove 2 жыл бұрын

+1 👍

@johnnyparsons2372 2 жыл бұрын

@@mafiacodes I really need to implement router v6 do you know when this will be available

@FHSagor-mq1mh 2 жыл бұрын

Brother thanks for this awesome video. I have learnt a lot from this video... But i have facing an issue when i register every time the onAuthState changes and set the current user . That's why it shows logged in without log in the user ... What should i do for this... I would like to login the user after registration... I don't want to change onAuthState State in registration process... Please help

@mafiacodes 2 жыл бұрын

that's the way firebase authstate works, when someone registers using the firebase register method, it registers and makes the user signs in, and that is also what is supposed to happen, it is a better UX, than first register and then again login with same details.

@user-tt6ky7fx3k 2 жыл бұрын

35:18 how to make uppercase to shotcut?

@abdulazeezolanrewaju843 2 жыл бұрын

Thank you sir, How can we do email Verification? on the user object, the emailVerification says false. is there a way to verify the email

@mafiacodes 2 жыл бұрын

call the method on auth intense to send email for verification...let firebase handle the ui for verification or do as I did for password reset @1:33:58, the logic being same

@ZaarmTech 2 жыл бұрын

Is it mounted.current && setIsSubmitting(false) OR mounted.current ? setIsSubmitting(false)

@mafiacodes 2 жыл бұрын

mounted.current && setIsSubmitting(false)

@AlbertGalilea-pj2uv 2 жыл бұрын

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

@mafiacodes 2 жыл бұрын

there was nothing to be seen, only that values should come from env

@w1llow01 2 жыл бұрын

I followed along but when I started doing the auth and auth context I get this error:Firebase: Error (auth/invalid-api-key). The thing is I go to firebase console and the configuration api. key is the same as the one I have in the .env file. Please help

@mafiacodes 2 жыл бұрын

can't say what's wrong, watch the video again and follow the instructions on setting up the project.

@leelakamatham1404 2 жыл бұрын

I also got the same error, could please tell me, how did you fix this Problem?

@pragyasingh0710 2 жыл бұрын

After you add .env file, you need to restart your application, kill the server and then run npm start again. It should work.

@iancarlos5199 2 жыл бұрын

can i use this to create an app?

@mafiacodes 2 жыл бұрын

Yes you can

@196_shubhamsabat7 2 жыл бұрын

hey! buddy I want ur help. I've configured firebase for my project for google sign in using popup and idk why the popup is not opening on my localhost, but as soon as I close the server, it opens. it;s really weird and I'm frustrated. I've tried all the tips from StackOverflow, downgraded the firebase version to 8 also. nothing worked. plssssss help!!!!

@mafiacodes 2 жыл бұрын

Make sure pop ups are not blocked, else tru another browser, else restart , else make logs to see what error is coming

@196_shubhamsabat7 2 жыл бұрын

@@mafiacodes the problem's solved :) but hey thanks for your concern!

@khalidmohamed6705 2 жыл бұрын

I am having difficulties creating touch. Env. Local any suggestions

@mafiacodes 2 жыл бұрын

r u on windows? touch is a linux/Mac/unix thing

@khalidmohamed6705 2 жыл бұрын

@@mafiacodes yes u got me