Firebase Authentication v9 in ReactJS (google/email sign-in, custom reset password) with ChakraUI
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- 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: th-cam.com/users/yourstruly2...
--------------------------------------------------------------------------
💵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
best firebase project I have come across so far with react
This was mindblowingly simple yet detailed! Thank you 🙏
Glad it was helpful!
Subscribe Like share
I don’t comment much am really happy to see this video. Am really happy to see this kind of real time scenario project.
just use this video to implement a feature at work!. Amazing video
Greatly explained man, thank you so much 😀
Subscribe like share
grate and clean looking for more react tutorial
Best Video! Saved my day!
very good..... thanks.... better than many payed tutorials
superb....keep uploading more videos
Very Helpfully
This is very helpful. I'm working on custom page to firebase reset password. Thank you sir!
Glad it helped!
@@mafiacodes Hello sir i cant cleary see what u did in 21:30, can u tell me what u copy there?
Great Job 👍
Always on time..
Amazing video! a lot of really usefull info
Subscribe like share 👍
Awesome video man
Thanks for sharing this here
can you add a series for chakra ui
thanks it's awesome
Thanks, the github helped me.
Very nice
subscribe like share
Awesome video! ++++++++++++++++++ Thanks.
very good
subscribe like share
great video my guy.. if you could do one with firebase and next js with chakra i woul be so happy hahah
Will try my best to do that as well.
WANT TO LEARN FIREBASE FROM YOU ... GREAT CONTENT EVER LOOKING FOR 🙂🙂
Sure will make one
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
this was a great video thank you very much !!!
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).
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.
Thanks a lot!
I was looking for a tutorial about how to recover the user's password and couldn't find it
I am using Auth0 for loggin in to my app with 'LinkedIn'. What to do after that?
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?
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.
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
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
Thanks
android mein aapne firebase pe banaya series same aisa CRUD operation mein banao app help full gaa mere jaise beginners ko
@yoursTRULY
how can i avoid flashing of login page when we go to protected page pls help
please make latest complete react firebase course including auth,firestore and much more
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
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?
Two ways serverside or client side, I would say protect client side the same way explained here
@@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.
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
U can handle that in the __app.js file where you get page props, make a handler there to check for authentication
I cant understand why even after restarting complete app(in localhost) user stays logged in
very good tutorial, How can i make a change password page for the user that is logged in?
Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'then') error on 1:31:18
Hey your tutorial is super good!! would you also make one on Sign in with link please....
I’ll try to make it
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.
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
Same here, looks like useEffect of AuthProvider is called on any page refresh, not keeping the state.
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
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
Is it mounted.current && setIsSubmitting(false) OR mounted.current ? setIsSubmitting(false)
mounted.current && setIsSubmitting(false)
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?
Can you do verify email please?
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!!!!
Make sure pop ups are not blocked, else tru another browser, else restart , else make logs to see what error is coming
@@mafiacodes the problem's solved :) but hey thanks for your concern!
Need a full video for your vscode setup bro
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
can't say what's wrong, watch the video again and follow the instructions on setting up the project.
I also got the same error, could please tell me, how did you fix this Problem?
After you add .env file, you need to restart your application, kill the server and then run npm start again. It should work.
can you made video on react js authentication with jwt including interceptors and role base protected routing please make video on it
35:18 how to make uppercase to shotcut?
Hello sir i cant cleary see what u did in 21:30, can u tell me what u copy there?
there was nothing to be seen, only that values should come from env
Firebase custom claims for authorising Admin vs Editor vs End User to different level access in Android app please mittal bhai
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
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.
Your theme is awesome Please tell me the theme name
I am having difficulties creating touch. Env. Local any suggestions
r u on windows? touch is a linux/Mac/unix thing
@@mafiacodes yes u got me
can i use this to create an app?
Yes you can
Bhai more on firebase V9
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.
well u can watch this video th-cam.com/video/72JYhSoVYPc/w-d-xo.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...
Can you possibly add the changes with react router v6
Yep I’ll do that
+1 👍
@@mafiacodes I really need to implement router v6 do you know when this will be available
Sir CRUD operation aur FCM pe notification pe banao please
Sir How to send email verification link ?
there is a method I guess on current user, sendEmailVerification
@@mafiacodes Haa i implemented
Excelent tutorial, but bro please, talk a little bit slower
Ok next time